如何实现扫码登陆

背景

最近工作原因需要在项目中加入扫码登陆功能,因为之前没有接触过所以对几个网站主流网站进行了调查。

实现方式

轮询

调查的全部网站都采用轮询的方式来实现二维码登陆,但是具体细节有不同。

以京东为例:

在这里插入图片描述

可以看出,在二维码登陆页面,网页会不断的请求服务器(轮询),以获取是否扫描二维码.

当完成扫码后会直接切换状态,继续轮询是否确认登陆:

在这里插入图片描述

这样,在手机点击确认时会直接轮询会相应并跳转页面。

这里猜测:

  1. 生成二维码,二维码信息入库
  2. 页面js开启轮询,服务端查库返回是否登陆
  3. 手机扫码app发送请求,服务端修改库中对应记录为登陆
  4. js轮询,服务端返回登陆,页面变为登陆状态进行后续操作
  5. 扫码登陆结束

细微差别

淘宝

淘宝的区别是,一个轮询周期发送两天请求,一条用于确认是否扫码,另一条用于确认是否登陆。

【淘宝】

微信网页版

微信网页版的实现逻辑相对更独特。

【微信】

虽然都是轮询,但是微信没次请求间隔很长(25秒),但是在一次请求后服务端不会马上返回相应。
调查后猜测:

微信服务端在收到轮询后不会立即返回响应,而是在服务端进行循环查库,可以理解为在服务端进行轮询。
服务端在25秒内循环参考状态是否改变,如果改变则直接返回,否则25秒结束后返回为扫码。

网页端在接到状态改变后马上获取数据,展现给用户。
否则会继续发送轮询请求。

可以看出,微信的做法用户体验更好:

  1. 扫码后迅速响应,不像其他的需要等待下一次请求才能触发响应。
  2. 请求次数大量减少,减轻浏览器压力,同时节省用户流量。
  3. 缺点是会增加服务器压力。

以上。

发布了88 篇原创文章 · 获赞 150 · 访问量 56万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览