二维码的实现以及扫码登陆的原理过程

251 阅读2分钟

javaScript 二维码生成实战

前身(条形码)

条形码只能实现0-9的数字标识符已经不满足现在的需求

二维码的实现

什么是二维码

本质是二进制代码

二维码的实现

  • 定位图案
    • 定位图案(Position Detection Pattern):标记二维码矩形的大小,三个定位图案即可标识并确定一个二维码矩形的位置和方向
    • 定位图案分割器(Separators for Position Detection Patterns):用白边框将定位图案与其他区域区分
    • 时序图案(Timing Patterns):用于定位,二维码如果尺寸过大,扫描时容易畸变,时序图案的作用就是防止扫描时畸变的产生
    • 对齐图案(Alignment Patterns):对齐图案:只有在 Version 2 及其以上才会需要;
  • 功能数据
    • 格式信息(Format Information):存在于所有尺寸中,存放格式化数据
    • 版本信息(Version Information):用于 Version 7 以上,需要预留两块 3×6 的区域存放部分版本信息;
  • 数据内容
    • 数据码(Data Code)
    • 纠错码(Error Correction Code)

扫码登陆原理

  • 网页端请求二维码
  • 服务端接收请求并生成一个uuid存储redis(设置过期时间)一个uuid只能绑定一次。
  • 浏览器拿到二维码解析,并用uuid去轮询请求服务端是否登陆(目前淘宝登陆是轮询方式,时间间隔2s,过期时间3分钟)(微信网页版,设置请求头keep-alive建立长连接)直到二维码失效

  • 手机端扫描二维码,进行登录,识别uuid以及token提交到手机服务端,服务端确认是否为登陆接口,判断token校验用户合法性以及是否登陆。返回对应的登陆确认信息给手机端
  • 手机端收到返回确认登陆确认后发送请求浏览器服务端,携带uuid以及userId
  • 服务端将用户信息和uuid做键值对存储redis中(uuid-userId)

  • 浏览器轮询中,根据redis中键值对(uuid-userId)校验登陆状态。发生对应请求
  • 确认登陆,将用户的信息返回浏览器

注意

  • 很多网站扫二维码登录采用轮询+长连接的方式
  • websocket
    • 部分用户使用低版本浏览器,即客户端的兼容性;
    • 推送服务的稳定性和可用性,消耗资源过大