背景
最近工作原因需要在项目中加入扫码登陆功能,因为之前没有接触过所以对几个网站主流网站进行了调查。
实现方式
轮询
调查的全部网站都采用轮询的方式来实现二维码登陆,但是具体细节有不同。
以京东为例:
可以看出,在二维码登陆页面,网页会不断的请求服务器(轮询),以获取是否扫描二维码.
当完成扫码后会直接切换状态,继续轮询是否确认登陆:
这样,在手机点击确认时会直接轮询会相应并跳转页面。
这里猜测:
- 生成二维码,二维码信息入库
- 页面js开启轮询,服务端查库返回是否登陆
- 手机扫码app发送请求,服务端修改库中对应记录为登陆
- js轮询,服务端返回登陆,页面变为登陆状态进行后续操作
- 扫码登陆结束
细微差别
淘宝
淘宝的区别是,一个轮询周期发送两天请求,一条用于确认是否扫码,另一条用于确认是否登陆。
微信网页版
微信网页版的实现逻辑相对更独特。
虽然都是轮询,但是微信没次请求间隔很长(25秒),但是在一次请求后服务端不会马上返回相应。
调查后猜测:
微信服务端在收到轮询后不会立即返回响应,而是在服务端进行循环查库,可以理解为在服务端进行轮询。
服务端在25秒内循环参考状态是否改变,如果改变则直接返回,否则25秒结束后返回为扫码。
网页端在接到状态改变后马上获取数据,展现给用户。
否则会继续发送轮询请求。
可以看出,微信的做法用户体验更好:
- 扫码后迅速响应,不像其他的需要等待下一次请求才能触发响应。
- 请求次数大量减少,减轻浏览器压力,同时节省用户流量。
- 缺点是会增加服务器压力。
以上。