从登录的交互形式角度，登录有很多方式：账号密码登录、验证码登录、手机号一键登录、扫码登录等等。

今天我们聊一聊扫码登录的原理。

先来看一个扫码登录的场景：

1.使用微信扫码登录PC网页

2. 手机已经登录淘宝，如果我们想在PC网页登录，可以使用淘宝移动端扫码登录。

从账号体系角度，这是扫码登录的两种方式：第三方登录和自有账户登录。

我们在面试中问“请讲一讲扫码登录的原理”，通常指的是自有账户登录；而在实际业务开发中，基于微信的第三方登录是很常见的一个需求。

下面我们讨论这两种扫码登录如何实现。

自有账户扫码登录

前置条件： 用户手机已经登录账号（如淘宝），因此有完备的用户信息。

整个登录过程中，一个关键的、串联整个过程的参数是“key”（或者叫场景id），后端、PC、移动端都是通过这个key关联到相应的信息，从而串联起整个登录过程。

扫码登录过程：

用户访问登录页面，前端向后端请求登录的二维码和key，这个key用来索引用户登录状态。
服务端生成二维码，并将key（假设是"XXX"）保存（本地或redis），然后将二维码和参数返给前端，这里可以后端生成二维码并上传到OSS，然后返回给前端二维码的地址；也可以直接返回给前端字符串，前端自己去生成二维码：www.npmjs.com/package/qrc…。
前端获取到key="XXX"和二维码后，就使用key开始轮询登录状态，等待用户扫码登录。（这里的轮询可以用websocket长连接代替）。
用户手机已经扫码后，移动端跳转到授权登录页（携带参数key="XXX"）。
用户点击登录后，前端调用后端接口，通知后端：“"XXX"对应的用户是我，我已经授权PC网页登录了，我的用户信息是：XXXXX”。
后端找到"XXX"对应的信息，更新用户登录状态为true，并更新用户信息。前端轮询再发轮询时候，后端发现状态改变，则返回给前端登录成功，并返回登录的用户信息。
前端收到登录成功的返回，就更新登录状态，展示用户信息，停止轮询。

注意：

这里的授权登录页只是实现移动端和服务端通信的一种方式，也可以用其他方式实现通信：二维码中只包含key信息，移动客户端扫码后解析出key值，然后通过一个写死的地址来和服务端通信，这样灵活性稍差；或者二维码中包含key信息和服务端接口名，移动端扫码后通过这个接口来和服务端通信。

第三方扫码登录

以微信扫码登录为例。

很多业务方使用微信登录，利用微信账户体系快速搭建自己的用户体系。

微信支持网页授权（ 官方开发文档 ）、开放平台扫码登录（官方开发文档）

微信扫码登录过程：

用户访问登录页面，前端向后端请求登录的二维码和key，这个key用来索引用户登录状态。
业务服务器向微信请求带参二维码（生成带参二维码），这个参数是自定义的（假设是"xxx"），微信中称为“场景值”。注意请求时候需要带上access_token。
业务服务端收到二维码，和“场景值”key="xxx"，保存场景值后，一起返回给前端。
前端获取到key="xxx"和二维码后，就使用key开始轮询登录状态，等待用户扫码登录
用户手机使用扫码后，移动端跳转到二维码对应的地址,这个地址带有场景值信息：xxx。
微信客户端解析地址后会和微信服务器通信，告知微信服务器：“这个场景值xxx，我已经授权登录”。
业务服务器收到事件时候，找到"xxx"，根据用户信息走登录注册流程，然后更新用户登录状态为true，并更新用户信息。前端再发轮询时候，后端发现状态改变，则返回给前端登录成功，并返回登录的用户信息。
前端收到登录成功的返回，就更新登录状态，展示用户信息，停止轮询。

扫码登录实际上就是把移动端的登录状态同步到PC端，这个同步过程需要服务器进行校验和传递数据。扫码过程其实就是把PC的信息同步给移动端，从而能够让整个数据链路串联起来，如果PC展示一个url，移动端手动输入，也是可以实现的，但扫码的操作更便捷和安全。