手机扫描网页二维码登录实现原理分析
阅读本文大概需要 5 分钟。
相信我们每个人经历过这样的场景：
手机扫码登录 PC 版微信，通过二维码扫描登录，笔记本上的微信就和手机微信同步登录了。这样免去输入繁琐的账号密码，确定方便得很。
对于这样的现象或许有些人都已经司空见惯了，但是有人有没有想过这其中的过程到底发生了什么呢？
其中它是如何实现的呢？这里受到这篇文章的启发
https://blog.csdn.net/zhang_zhenwei/article/details/80847473。
我们来简单研究下。这里以淘宝网站二维码扫描登录为例子。
01
首先，任何一个二维码表示的其实都是一串字符串。我们打开淘宝登录页面
https://login.taobao.com/member/login.jhtml
02
可以通过草料二维码网站解析出这张二维码表示的字符串，解析如下
https://login.m.taobao.com/qrcodeCheck.htm?lgToken=7a5943ff614a68802f415bcf117b1452&tbScanOpenType=Notification
这里面关键的就是 lgToken，这是标识网页的唯一 ID，也可以看做是一个登陆请求链接。
当打开了二维码登录后，我们通过 chrome 控制台，按 F12 查看 network 请求，会发现浏览器网页在轮询调用接口，这里截了张图，我们可以看到浏览器每隔 2 秒调用一次接口（注：这里是之前截的图，所以 lgToken 跟上面的不一样），而且不知道有人注意到没有，有两个不同的 lgToken 在重复。
03
访问网页源码，查找到如下 js 代码：
getQRCodeURL: "https://qrlogin.taobao.com/qrcodelogin/generateQRCode4Login.do",
访问此链接，得到如下 json 格式内容：
{"success":true,"message":"null","url":"//img.alicdn.com/tfscom/TB1E4gpIhnaK1RjSZFtwu2C2VXa.png","lgToken":"986c0f36214c1255d94abbb8dc7c6972","adToken":"cfb59d92e2e2900315438a0b70e62573"}
可知，其中 url 是二维码图片地址，lgToken 后面还有一个 adToken，这个 adToken 是干什么的呢？
我们继续查看，网页源代码还有如下的 js 代码：
checkQRCodeURL: "https://qrlogin.taobao.com/qrcodelogin/qrcodeLoginCheck.do",
不难猜到，这个链接是用来检查手机扫码的状态，也就是淘宝页面做了定时检查，当超过一定时间没有扫描，二维码就会过期，如需扫描需要重新刷新页面获取新的二维码。
访问的时候要加上 lgToken，如
https://qrlogin.taobao.com/qrcodelogin/qrcodeLoginCheck.dolgToken=986c0f36214c1255d94abbb8dc7c6972&defaulturl=https%3A%2F%2Fwww.taobao.com%2F
可以得到如下几种结果：
如果没有扫码，浏览器网页等待扫码，返回的是：
{"code":"10000","message":"login start state","success":true}
如果扫码成功，但是手机上没点击“确认登录”的话，返回的是：
{"code":"10001","message":"mobile scan QRCode success","success":true}
二维码过期， 返回的是：
{"code":"10004","message":"QRCode expired!code=1,msg=data not exist","success":true}
当确认登录，也会返回一个 json ，有点长这里就不贴出了。
04
总结一下：
上面的过程，手机端与服务端做了哪些具体交互我们不得而知，但是可以猜测到，客户端在登录状态有效的情况下，获取了网页端二维码的信息，拿网页端的 lgToken 去请求了服务端，并且服务端记住了这个 lgToken，当网页端不断的用该 lgToken 轮询请求服务端状态时，与手机端的请求匹配一致，就认为是登录了，并且返回了真正的登录态 adToken。
最后以一张流程图总结扫码登录原理：
有什么看法欢迎留言和我讨论~
推荐阅读