聊聊二维码扫码登录的原理

聊聊二维码扫码登录的原理

在日常生活中有大量的扫描二维码的场景，最近正好看到这方面的视频与文章，了解一下二维码背后的技术和逻辑。

二维码最常用的场景之一就是通过手机端应用扫描 PC 或者 WEB 端的二维码，来登录同一个系统。

比如手机微信扫码登录 PC 端微信，手机淘宝扫码登录 PC 端淘宝。那么就让我们来看一下，二维码登录是怎么操作的！

二维码登录的本质

二维码登录本质上也是一种登录认证方式。

常规的登录认证需要做的两件事：

• 告诉系统我是谁
• 向系统证明我是谁

通过扫描二维码，把手机端的账号信息传递到 PC 端，向系统证明我是谁。

手机端 APP 它是已经登录过的，就是说手机端是已经通过登录认证。只要扫码确认是这个手机且是这个账号操作的，其实就能间接证明我谁。

二维码

先认识一下二维码，在认识二维码之前我们先看一下一维码，又称为条形码：一维条码

img

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

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

系统认证机制

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

基于 token 的认证机制：

image-20210418233036432

1. 账号密码登录时，客户端会将设备信息一起传递给服务端，
2. 如果账号密码校验通过，服务端会把账号与设备进行一个绑定，存在一个数据结构中，这个数据结构中包含了账号 ID，设备 ID，设备类型等等

const token = {
  acountid:'账号ID',
  deviceid:'登录的设备ID',
  deviceType:'设备类型，如 iso,android,pc......',
}

然后服务端会生成一个 token，用它来映射数据结构，这个 token 其实就是一串有着特殊意义的字符串，它的意义就在于，通过它可以找到对应的账号与设备信息。

1. 客户端得到这个 token 后，需要进行一个本地保存，每次访问系统 API 都携带上 token 与设备信息。
2. 服务端就可以通过 token 找到与它绑定的账号与设备信息，然后把绑定的设备信息与客户端每次传来的设备信息进行比较， 如果相同，那么校验通过，返回 AP 接口响应数据， 如果不同，那就是校验不通过拒绝访问

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

客户端登录的目的，就是获得属于自己的 token。

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

image-20210418233436076

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

可以看到，二维码在中间有三个状态， 待扫描，已扫描待确认，已确认。

image-20210418233526709

1. 二维码的背后它一定存在一个唯一性的 ID，当二维码生成时，这个 ID 也一起生成，并且绑定了 PC 端的设备信息
2. 手机去扫描这个二维码
3. 二维码切换为 已扫描待确认状态， 此时就会将账号信息与这个 ID 绑定
4. 当手机端确认登录时，它就会生成 PC 端用于登录的 token，并返回给 PC 端

具体过程：

二维码准备

按二维码不同状态来看， 首先是等待扫描状态，用户打开 PC 端，切换到二维码登录界面时。

image-20210418233749186

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

扫描状态切换

image-20210418233841134

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

临时 token是为了手机端在下一步操作时，可以用它作为凭证。以此确保扫码，登录两步操作是同一部手机端发出的。

状态确认

image-20210418234001642

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

总结

image-20210418234120407

我们从登陆的本质触发，探索二维码扫码登录是如何做到的

1. 告诉系统我是谁
2. 向系统证明我谁

在这个过程中，我们先简单讲了两个前提知识，

• 一个是二维码原理，
• 一个是基于 token 的认证机制。

然后我们以二维码状态为轴，分析了这背后的逻辑: 通过 token 认证机制与二维码状态变化来实现扫码登录.

需要指出的是，前面的讲的登录流程，它适用于同一个系统的 PC 端，WEB 端，移动端。

参考资料

• TikTok二面：“聊聊二维码扫码登录的原理”。
• 大古同学
• 极客时间一个二维码的视频

分享计划

博客内容将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。