1 引言
下面这张图，无论是IM开发者仍是普通用户，应该很熟悉：javascript
2 扫码登陆功能的完整技术逻辑
1）网页端与服务器的配合逻辑：html
接下来就是对于这个服务的详细实现。前端
首先用户打开网站的登陆页面的时候，向浏览器的服务器发送获取登陆二维码的请求。服务器收到请求后，随机生成一个uuid，将这个id做为key值存入redis服务器，同时设置一个过时时间，再过时后，用户登陆二维码须要进行刷新从新获取。java
同时，将这个key值和本公司的验证字符串合在一块儿，经过二维码生成接口，生成一个二维码的图片（二维码生成，网上有不少现成的接口和源码，这里再也不介绍）。而后，将二维码图片和uuid一块儿返回给用户浏览器。ios
浏览器拿到二维码和uuid后，会每隔一秒向浏览器发送一次，登陆是否成功的请求。请求中携带有uuid做为当前页面的标识符。这里有的同窗就会奇怪了，服务器只存了个uuid在redis中做为key值，怎么会有用户的id信息呢？web
这里确实会有用户的id信息，这个id信息是由手机服务器存入redis中的。具体请继续阅读“手机端与服务器的配合逻辑”。ajax
2）手机端与服务器的配合逻辑：redis
话说，浏览器拿到二维码后，将二维码展现到网页上，并给用户一个提示：请掏出您的手机，打开扫一扫进行登陆。json
用户拿出手机扫描二维码，就能够获得一个验证信息和一个uuid（扫描二维码获取字符串的功能在网上一样有不少demo，这里就不详细介绍了）。promise
因为手机端已经进行过了登陆，在访问手机端的服务器的时候，参数中都回携带一个用户的token，手机端服务器能够从中解析到用户的userId（这里从token中取值而不是手机端直接传userid是为了安全，直接传userid可能会被截获和修改，token是加密的，被修改的风险会小不少）。手机端将解析到的数据和用户token一块儿做为参数，向服务器发送验证登陆请求（这里的服务器是手机服务器，手机端的服务器跟网页端服务器不是同一台服务器）。
服务器收到请求后，首先对比参数中的验证信息，肯定是否为用户登陆请求接口。若是是，返回一个确认信息给手机端。
手机端收到返回后，将登陆确认框显示给用户（防止用户误操做，同时使登陆更加人性化）。用户确认是进行的登陆操做后，手机再次发送请求。服务器拿到uuId和userId后，将用户的userid做为value值存入redis中以uuid做为key的键值对中。
3）登陆成功时的逻辑：
而后，浏览器再次发送请求的时候，浏览器端的服务器就能够获得一个用户Id，并调用登陆的方法，声成一个浏览器端的token，再浏览器再次发送请求的时候，将用户信息返回给浏览器，登陆成功。这里存储用户id而不是直接存储用户信息是由于，手机端的用户信息，不必定是和浏览器端的用户信息彻底一致。
4）详细的技术原理总结以下图所示：
3 淘宝的扫码登陆技术实现
本节咱们以淘宝的扫码登陆为例，来实际研究分析一下淘宝的扫码登陆实现逻辑。
登陆界面 https://login.taobao.com/member/login.jhtml 传回来的参数为：
而后请求(GET)报文是这样的:
https://qrlogin.taobao.com/qrcodelogin/qrcodeLoginCheck.do?lgToken=2c3b4d53ef0513787bf4ce711ea5ba53&defaulturl=&_ksTS=1540106757739_2804&callback=jsonp2805
关键的就是lgToken，是网页的惟一ID，当打开了二维码登陆的时候，网页在轮询(应该是长轮询long polling)调用接口去请求服务器。
若是没有扫码，返回的为：
若是扫了的话则会返回：
{
"code": "10001",
"message": "mobile scan QRCode success",
"success": true
}
长时间没有扫码的话，网页端会中止轮询，二维码失效！
当手机端确认登陆后，接口返回的是：
{ "code": "10006", "success": true, "url": "https://login.taobao.com/member/loginByIm.do?uid=cntaobaoxxx&token=ff82fc0d1d395a33d3b38ec5a4981336&time=1530179143250&asker=qrcodelogin&ask_version=1.0.0&defaulturl=https://www.taobao.com&webpas=0b7aed2d43f01825183e4a49c6cae47d1479929926"}
表示登陆成功，固然手机端与服务端在点击"确认登陆"之间的交互可能就是这样：网页端生成的lgToken去请求服务端，服务端记住了这个lgToken并认为登陆了，当网页端再次轮询请求接口时，就返回真正的登陆态Token，网页端此时就能够凭着这个Token来登陆了。
详细的技术逻辑以下图所示：
4 微信的扫码登陆技术实现
4.1 技术原理流程图
微信的网页版访问地址是：https://wx.qq.com/，有兴趣也能够自行深刻研究。
4.2 实际的技术实现逻辑
1）获取惟一的uuid, 以及包含uid信息的二维码：
getUUID: function() {
vare = t.defer();
returnwindow.QRLogin = {},
$.ajax({
url: i.API_jsLogin,
dataType: "script"
}).done(function() {
200 == window.QRLogin.code ? e.resolve(window.QRLogin.uuid) : e.reject(window.QRLogin.code)
}).fail(function() {
e.reject()
}),
e.promise
}
2）浏览器轮询服务器，获取扫码状态：
// 查看扫码状态
checkLogin: function(e, a) {
varn = t.defer()
, a = a || 0;
returnwindow.code = 0,
window.checkLoginPromise = $.ajax({
url: i.API_login + "?loginicon=true&uuid="+ e + "&tip="+ a + "&r="+ ~newDate,
dataType: "script",
timeout: 35e3
}).done(function() {
newRegExp("/"+ location.host + "/");
if(window.redirect_uri && window.redirect_uri.indexOf("/"+ location.host + "/") < 0)
returnvoid (location.href = window.redirect_uri);
vare = {
code: window.code,
redirect_uri: window.redirect_uri,
userAvatar: window.userAvatar
};
n.resolve(e)
}).fail(function() {
n.reject()
}),
n.promise
}
3）根据服务器返回的扫码状态，进行相应的操做：
* 408 扫码超时：若是手机没有扫码或没有受权登陆，服务器会阻塞约25s，而后返回状态码 408 -> 前端继续轮询
* 400 二维码失效：大约5分钟的时间内不扫码，二维码失效
* 201 已扫码：若是手机已经扫码，服务器当即返回状态码和用户的基本信息 （window.code=201,window.code.userAvator="..."），-> 前端继续轮询
* 200 已受权：若是手机点击了确认登陆，服务器返回200及token -> 前端中止轮询, 获取到token，重定向到目标页
具体的代码示例以下：
// 根据服务器返回的扫码状态，进行相应的操做
functiono(c) {
switch(c.code) {
case200:
t.newLoginPage(c.redirect_uri).then(function(t) {
varo = t.match(/<ret>(.*)<\/ret>/)
, r = t.match(/<script>(.*)<\/script>/)
, c = t.match(/<skey>(.*)<\/skey>/)
, s = t.match(/<wxsid>(.*)<\/wxsid>/)
, l = t.match(/<wxuin>(.*)<\/wxuin>/)
, d = t.match(/<pass_ticket>(.*)<\/pass_ticket>/)
, f = t.match(/<message>(.*)<\/message>/)
, u = t.match(/<redirecturl>(.*)<\/redirecturl>/);
returnu ? void (window.location.href = u[1]) : o && "0"!= o[1] ? (alert(f && f[1] || "登陆失败"),
i.report(i.AUTH_FAIL_COUNT, 1),
void location.reload()) : (e.$emit("newLoginPage", {
Ret: o && o[1],
SKey: c && c[1],
Sid: s && s[1],
Uin: l && l[1],
Passticket: d && d[1],
Code: r
}),
void (a.getCookie("webwx_data_ticket") || n.report(n.ReportType.cookieError, {
text: "webwx_data_ticket 票据丢失",
cookie: document.cookie
})))
});
break;
case201:
e.isScan = !0,
n.report(n.ReportType.timing, {
timing: {
scan: Date.now()
}
}),
t.checkLogin(e.uuid).then(o, function(t) {
!t && window.checkLoginPromise && (e.isBrokenNetwork = !0)
});
break;
case408:
t.checkLogin(e.uuid).then(o, function(t) {
!t && window.checkLoginPromise && (e.isBrokenNetwork = !0)
});
break;
case400:
case500:
case0:
vars = a.getCookie("refreshTimes") || 0;
s < 5 ? (s++,
a.setCookie("refreshTimes", s, .5),
document.location.reload()) : e.isNeedRefresh = !0;
break;
case202:
e.isScan = !1,
e.isAssociationLogin = !1,
a.setCookie("login_frequency", 0, 2),
window.checkLoginPromise && (window.checkLoginPromise.abort(),
window.checkLoginPromise = null),
r()
}
e.code = c.code,
e.userAvatar = c.userAvatar,
a.log("get code", c.code)
}
参考文章 https://www.toutiao.com/a6779438044907831812/?tt_from=mobile_qq&utm_campaign=client_share×tamp=1578534913&app=news_article&utm_source=mobile_qq&utm_medium=toutiao_ios&req_id=2020010909551301012903513626DB4C81&group_id=6779438044907831812