微信网页版扫码登录原理

微信网页版登录步骤

1.  浏览器打开链接:https://wx.qq.com/,网页出现二维码

2.  手机扫描二维码,网页出现用户头像

3.  手机确认登录

4.  网页加载出用户微信界面

 

手机一扫描二维码,并且同意登录后,网页上就能及时知道当前二维码被扫描,用户同意后,立马就能加载出聊天界面,实时性非常高,

问题

那么网页是如何知道当前二维码是被哪个用户扫描的,是何时扫描的?

 

问题分析

用google浏览器打开网页版微信:https://wx.qq.com/,F12打开开发者工具,选择Network,F5刷新页面,可以看到此网页一直有一个请求处于等待相应状态,如下图:

微信网页版扫码登录原理

请求参数如下:

https://login.wx.qq.com/cgi-bin/mmwebwx-bin/login?loginicon=true&uuid=gcWrz8np0Q==&tip=0&r=-1942477294&_=1513770915130

该请求会一直处于等待相应状态,除非等到25s左右自动重新请求,或二维码被扫描,二维码被扫描的情况下,页面会加载出用户头像,并等待用户在手机上进行确认登录,确认后就能加载出微信主界面

1、  打开网页版微信,会向微信服务器发送请求得到一个uuid,用户生成登录二维码

2、  页面用此uuid作为参数发送请求,查看该uuid被扫描的情况,如果已经被扫描,则返回扫描者的信息,如果没有被扫描,等待一段时间后,继续查看,直到请求超时或找到扫描者信息

3、  用户用手机扫描二维码时,就是向服务器发送请求,用扫描到的二维码uuid作为key,生成扫描记录和授权记录,方便网页版使用该uuid查找扫描记录

问题总结

实现的关键在于一个一直处于等待回应状态的请求(ajax长轮询),该请求保证只要二维码被扫描,就能实时的获取到用户信息

扩展

微信网页版的聊天也是保持一个ajax长轮询,如图
微信网页版扫码登录原理