二维码登录流程解析

二维码登录是一种常见的用户认证方式，通过扫描二维码，用户可以快速、便捷地完成登录操作。

其基本流程可以分为以下几个步骤：

二维码登录的基本流程

生成二维码：

后端服务器生成一个唯一的会话ID或令牌（Token）。

将这个会话ID编码成二维码，并发送给前端展示（也可以由前端自己生成）。

展示二维码：

前端页面展示生成的二维码，等待用户扫描。

用户扫描二维码：

用户使用移动设备（如手机）上的应用扫描二维码。

移动设备获取二维码中的会话ID，并与后端进行通信。

验证二维码：

后端服务器接收到移动设备发送的会话ID。

验证该会话ID的有效性（检查会话ID是否存在且未过期）。

用户授权：

如果会话ID有效，后端要求移动设备上的用户进行身份验证（例如输入用户名和密码或其他认证方式）。

用户在移动设备上完成身份验证，并确认登录请求。

确认登录：

移动设备将用户的认证信息发送给后端服务器进行验证。

后端服务器验证成功后，更新会话ID的状态为已登录。

通知前端：

后端服务器通过轮询、WebSocket或其他方式通知前端页面登录成功。

前端页面根据通知进行登录状态更新，跳转到登录后的页面。

🤗 示例

以知乎扫码登录为例（2023-07-11）。

电脑Chrome浏览器打开知乎首页，未登录状态下，会提示登录账户，左边就有扫码登录的入口。

记得把“保留日志”勾上，登录成功后会重定向刷新网页，这时候默认会清空记录。

查看到关于二维码的相关请求。请求了二维码的图片

二维码图片对应的文本为【http://t.cn/Rq3gcDV 】是个短链接，还原后为 zhihu 的链接

获取二维码内容，后端返回数据一个过期秒级时间戳（使用过期时间戳可以在后端控制二维码的有效期），一个随机数token。

知乎二维码有效期2分钟

用这token去请求二维码的image

然后前端开始2s轮询二维码的扫描结果。

二维码过期之后，又会自动刷新。

此时，首页上的二维码内容为【https://www.zhihu.com/account/scan/login/YmE1ZDZiZTgtZDI3?/api/login/qrcode/YmE1ZDZiZTgtZDI3/image】

手机上扫完二维码，还没点击确认登录，就如下页面。

电脑上显示状态为已扫描

对应的接口status变成了1

手机上点击确认登录后

base64解码后

同时发起同步qrcode状态的请求

这样子就完成登录流程，页面跳转登录成功。

可能的注意事项

在实现二维码登录过程中，有许多需要注意的事项，以确保系统的安全性、用户体验和稳定性。

安全性

二维码内容加密：

在生成二维码时，对二维码中的内容进行加密，防止信息泄露和篡改。

使用HTTPS协议进行数据传输，确保传输过程中的数据安全。

会话ID的唯一性和时效性：

会话ID应该是唯一的，防止重复使用。

设置会话ID的有效期，避免二维码长期有效，导致安全隐患。

身份验证：

在移动设备上进行身份验证时，使用强密码、双因素认证（2FA）等方式，提高认证的安全性。

在用户授权过程中，确保敏感信息的安全传输和存储。

防止重复使用：

每个二维码在使用一次后立即失效，防止被重复使用。

记录二维码的使用状态，防止恶意利用。

用户体验

二维码生成与展示：

确保二维码生成速度快，展示清晰，便于用户扫描。

提供适配不同屏幕大小的二维码图像，保证在各种设备上的良好展示效果。

扫描速度和准确性：

使用高效的二维码生成和解析算法，确保扫描速度快且准确，客户端比如安卓可以直接调用Google官方的解码接口。

在二维码失效或无效时，及时向用户提示，并提供重新生成二维码的选项。

登录反馈：

用户扫描二维码并完成授权后，及时通知前端页面更新登录状态，比如调整好前端HTTP轮询二维码结果的间隔，或者使用websocket长连接的方式。

在前端页面上提供友好的反馈信息，如登录成功、二维码失效等。

也可以通过学习【QRCodeLogin】或【qrcode-scan】项目来加深对二维码登录流程的印象。