二维码扫码登录的原理

1,673 阅读5分钟

转自个人blog:sunjuhui.top/articles/20…

二维码

所谓一维码,也就是条形码,超市里的条形码--这个相信大家都非常熟悉,条形码实际上就是一串数字,它上面存储了商品的序列号。

image.png

饮水机上面的条形码

二维码其实与条形码类似,只不过它存储的不一定是数字,还可以是任何的字符串,你可以认为,它就是字符串的另外一种表现形式,

21663bde5726acd3dc1de39c716f0e4cb571104d1af1ba1603a8a2b5ad2199cc4d25e.png

字符串

二维码最常用的场景之一就是通过手机端应用扫描 PC 或者 WEB 端的二维码,来登录同一个系统。比如手机微信扫码登录 PC 端微信,手机淘宝扫码登录 PC 端淘宝。image.png

认证机制

为了安全,手机端它是不会存储你的登录密码的。但是在日常使用过程中,我们应该会注意到,只有在你的应用下载下来后,第一次登录的时候,才需要进行一个账号密码的登录, 那之后呢 即使这个应用进程被杀掉,或者手机重启,都是不需要再次输入账号密码的,它可以自动登录。

image.png

  1. 账号密码登录时,客户端会将设备信息一起传递给服务端,
  2. 如果账号密码校验通过,服务端会把账号与设备进行一个绑定,存在一个数据结构中,这个数据结构中包含了账号 ID,设备 ID,设备类型等等
  3. 然后服务端会生成一个 token,用它来映射数据结构,这个 token 其实就是一串有着特殊意义的字符串,它的意义就在于,通过它可以找到对应的账号与设备信息,
  4. 客户端得到这个 token 后,需要进行一个本地保存,每次访问系统 API 都携带上 token 与设备信息。
  5. 服务端就可以通过 token 找到与它绑定的账号与设备信息,然后把绑定的设备信息与客户端每次传来的设备信息进行比较, 如果相同,那么校验通过,返回 AP 接口响应数据, 如果不同,那就是校验不通过拒绝访问

客户端不会也没必要保存你的密码,相反,它是保存了 token。这个 token 这么重要,万一被别人知道了怎么办。实际上,知道了也没有影响, 因为设备信息是唯一的,只要你的设备信息别人不知道, 别人拿其他设备来访问,验证也是不通过的。

可以说,客户端登录的目的,就是获得属于自己的 token。

那么在扫码登录过程中,PC 端是怎么获得属于自己的 token 呢?不可能手机端直接把自己的 token 给 PC 端用!token 只能属于某个客户端私有,其他人或者是其他客户端是用不了的。

扫描二维码登录的一般步骤

大概流程

  1. 扫码前,手机端应用是已登录状态,PC 端显示一个二维码,等待扫描
  2. 手机端打开应用,扫描 PC 端的二维码,扫描后,会提示"已扫描,请在手机端点击确认"
  3. 用户在手机端点击确认,确认后 PC 端登录就成功了

image.png

二维码准备

  1. PC 端向服务端发起请求,告诉服务端,我要生成用户登录的二维码,并且把 PC 端设备信息也传递给服务端
  2. 服务端收到请求后,它生成二维码 ID,并将二维码 ID 与 PC 端设备信息进行绑定
  3. 然后把二维码 ID 返回给 PC 端
  4. PC 端收到二维码 ID 后,生成二维码(二维码中肯定包含了 ID)
  5. 为了及时知道二维码的状态,客户端在展现二维码后,PC 端不断的轮询服务端,比如每隔一秒就轮询一次,请求服务端告诉当前二维码的状态及相关信息

image.png

扫描状态切换

  1. 用户用手机去扫描 PC 端的二维码,通过二维码内容取到其中的二维码 ID
  2. 再调用服务端 API 将移动端的身份信息与二维码 ID 一起发送给服务端
  3. 服务端接收到后,它可以将身份信息与二维码 ID 进行绑定,生成临时 token。然后返回给手机端
  4. 因为 PC 端一直在轮询二维码状态,所以这时候二维码状态发生了改变,它就可以在界面上把二维码状态更新为已扫描

image.png

image.png

状态确认

  1. 手机端在接收到临时 token 后会弹出确认登录界面,用户点击确认时,手机端携带临时 token 用来调用服务端的接口,告诉服务端,我已经确认7f4064103e37424eb7fca595da47827e.jpg
  2. 服务端收到确认后,根据二维码 ID 绑定的设备信息与账号信息,生成用户 PC 端登录的 token
  3. 这时候 PC 端的轮询接口,它就可以得知二维码的状态已经变成了"已确认"。并且从服务端可以获取到用户登录的 token
  4. 到这里,登录就成功了,后端 PC 端就可以用 token 去访问服务端的资源了

image.png

end