用NodeJS实现简单的扫码登陆示例

1.研究知乎与微信的实现

首先研究知乎扫码登陆

在电脑端打开知乎,进入浏览器控制台Network,很明显可以看到知乎通过定时请求来判断当前的二维码状态。

经过初略观察,发现以下信息:

打开扫码登陆页面后

首先会发送POST请求,来请求相关信息。地址：
https://www.zhihu.com/api/v3/account/api/login/qrcode

然后通过上一步请求的信息获取二维码图片。地址：
https://www.zhihu.com/api/v3/account/api/login/qrcode/R4F3Suw4SNqdncbT/image

将二维码解析得到的地址：
https://www.zhihu.com/account/scan/login/QWoTFB3_Q_GsIIof

页面定时发送请求地址：
https://www.zhihu.com/api/v3/account/api/login/qrcode/R4F3Suw4SNqdncbT/scan_info

再来看看微信的

打开微信网页首先请求https://login.wx.qq.com/jslogin获取二维码uuid

接着请求https://login.weixin.qq.com/qrcode/{uuid}获取二维码图片

然后请求https://login.wx.qq.com/cgi-bin/mmwebwx-bin/login来获取二维码状态

不过微信这边每次请求如果不进行操作的情况下保持连接到25秒左右进行响应

2.动手实现

完整代码放在:https://gitee.com/baojuhua/node_simples/tree/master/node_simple_qr_login

因为会话之间是独立的,所以需要通过某种手段将其打通,所以我这边直接在代码中通过声明全局CacheSession变量进行操作(当然你也可以使用req.sessionStore.sessions)。

实现原理也非常简单,首先需要移动端登陆先成功来模拟手机应用登陆成功的情况。

接着在浏览器进行访问登陆页面,然后生成扫码登陆相关信息保存到CacheSession并且通过标识与session会话进行关联。

然后移动端扫码二维码访问地址,通过解析获得CacheSession中对应的数据,将相关数据显示到移动端等待用户确认。

再然后是用户发送确定登陆或拒绝登陆再或者是不进行操作的情况：

• 如果点击了确定,前端发送请求给后端,后端会修改CacheSession中数据,等待电脑端定时请求获取到数据后进行登陆跳转
• 点击拒绝与点击确定的效果差不多,只不过不会跳转到登陆而已
• 因为移动端访问扫码二维码获得的地址后会修改CacheSession中记录的超时值,如果长时间未操作就会将状态修改为超时状态

代码中的路由说明：

路由	说明
/	PC端首页(通过浏览器标识判断客户端类型进行重定向)
/login	PC端扫码登陆页面
/qrcode	PC端生成二维码相关信息
/qrcode/img/:code	PC端生成二维码图片
/qrcode/scan_info/:code	PC端定时获取扫描状态信息
/app_home	移动端首页
/app_login(get)	移动端登陆页面
/app_Login(post)	移动端登陆请求
/account/scan/:code	移动端同意登陆页面(显示登陆端ip、浏览器标识等信息)
/confirm/scan/:code	移动端确定取消登陆

二维码状态说明:

状态(status)值	说明
-1	系统异常
0	等待扫描
1	已扫描等待确定
2	移动端确定
3	移动端确定超时
4	会话过期
5	移动端拒绝

测试

这里分别用 Chrome 浏览器与 火狐 浏览器进行测试

Chrome模拟电脑端

火狐模拟手机端

二维码过期效果

模拟手机端登陆

手机端同意登陆

手机端同意拒绝登陆

手机Opera浏览器测试(手机端效果)

手机Opera浏览器测试(电脑端效果)