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