扫码登录的典型流程图-技术圈

关于扫码登录，之前写过几篇文章以及发过相关的视频。

●基于 keycloak 的关注公众号即登录功能的设计与实现
●基于 Java Spring Security 的关注微信公众号即登录的设计与实现
●扫二维码登录一定安全吗？

今天再以知乎的扫码登录为例，画一个完整的流程图，供参考。

整体流程

以下是一个正常扫码并登录的时序图。

图片源码如下：

@startuml
autonumber
actor "用户" as Userparticipant "浏览器" as Browserparticipant "手机端" as Mobileparticipant "服务端" as Server #orange
activate User
User -> Browser: 输入 URLactivate Browser
Browser -> Server: 请求 csrf tokenactivate Server
Server -> Browser: 返回 csrf tokendeactivate Server

Browser -> Server: 带上 csrf token 请求生成二维码
activate Server
Browser -> Server: 开始轮询二维码的状态
Server -> Server: 生成二维码note right of Server: 并记录该二维码的状态是等待扫描
Server -> Browser: 返回待扫描
Server -> Browser: 返回二维码deactivate Server
Browser --> User
User -> Mobile: 进入 APP，点击扫码activate MobileMobile -> Server: 通知已扫描activate ServerServer -> Server: 更新二维码状态为已扫描deactivate ServerMobile -> Mobile: 展示确认登录页面Mobile --> Userdeactivate Mobile
Browser -> Server: 轮询二维码状态activate ServerServer -> Browser: 返回已扫描，等待确认Browser -> Browser: 更新 UI，显示已扫描Browser --> Userdeactivate Server
User -> Mobile: 点击确认登录activate Mobileactivate ServerMobile -> Server: 通知二维码的状态为已确认Server -> Mobile: 通知用户已登录deactivate MobileServer -> Server: 更新二维码的状态为已确认deactivate Server
Browser -> Server : 轮询二维码状态activate ServerServer -> Browser: 返回已确认，并带上用户登录 cookieBrowser -> Browser: 更新 cookieBrowser -> Server: 使用 cookie 请求用户信息Server -> Browser: 返回用户信息Browser -> Browser: 存储用户信息到 local storageBrowser --> User: 展示用户登录态页面
@enduml

如果在展示二维码后不扫描，或者扫描后用户不确认登录，等待一段时间后（比如一分钟），浏览器轮询二维码状态时，服务器端都返回超时即可。

超时情况

以下是用户扫码后不点击确认的超时流程图，对于不扫描的超时流程图，会更简单一点，略过不画。

图片源码如下：

@startuml
autonumber
actor "用户" as Userparticipant "浏览器" as Browserparticipant "手机端" as Mobileparticipant "服务端" as Server #orange
activate User
User -> Browser: 输入 URLactivate Browser
Browser -> Server: 请求 csrf tokenactivate Server
Server -> Browser: 返回 csrf tokendeactivate Server

Browser -> Server: 带上 csrf token 请求生成二维码
activate Server
Browser -> Server: 开始轮询二维码的状态
Server -> Server: 生成二维码note right of Server: 并记录该二维码的状态是等待扫描
Server -> Browser: 返回待扫描
Server -> Browser: 返回二维码deactivate Server
Browser --> User
User -> Mobile: 进入 APP，点击扫码activate MobileMobile -> Server: 通知已扫描activate ServerServer -> Server: 更新二维码状态为已扫描deactivate ServerMobile -> Mobile: 展示确认登录页面Mobile --> Userdeactivate Mobile
Browser -> Server: 轮询二维码状态activate ServerServer -> Browser: 返回已扫描，等待确认Browser -> Browser: 更新 UI，显示已扫描Browser --> Userdeactivate Server
deactivate User
Browser -> Server: 轮询二维码状态activate ServerServer -> Browser: 返回已扫描，待确认deactivate Serverdeactivate Browser...
Server -> Server: 超时，更新二维码状态为超时
Browser -> Server: 轮询二维码状态activate Browseractivate ServerServer -> Browser: 返回已超时Browser -> Browser: 进入刷新二维码流程@enduml

服务器端的二维码状态流转图

二维码的生命周期图：

图片源码如下：

@startuml
[*] --> 已生成已生成 --> 已超时 : 超时未扫码已生成 : 等待用户扫码
已生成 -> 已扫码 : 用户扫码已扫码 : 等待用户点击确认
已扫码 -> 已确认: 用户点击确认已确认 : 创建 session，进入登录态
已扫码 --> 已超时: 超时未确认
已确认 -> [*] : 服务器端可以删除二维码状态存储了已超时 -> [*] : 服务器端可以删除二维码状态存储了
@enduml

若有收获，就点个赞吧