扫码登录的典型流程图
哈德韦
共 3033字,需浏览 7分钟
· 2022-08-25
关于扫码登录,之前写过几篇文章以及发过相关的视频。
@startuml
autonumber
actor "用户" as User
participant "浏览器" as Browser
participant "手机端" as Mobile
participant "服务端" as Server #orange
activate User
User -> Browser: 输入 URL
activate Browser
Browser -> Server: 请求 csrf token
activate Server
Server -> Browser: 返回 csrf token
deactivate 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 Mobile
Mobile -> Server: 通知已扫描
activate Server
Server -> Server: 更新二维码状态为已扫描
deactivate Server
Mobile -> Mobile: 展示确认登录页面
Mobile --> User
deactivate Mobile
Browser -> Server: 轮询二维码状态
activate Server
Server -> Browser: 返回已扫描,等待确认
Browser -> Browser: 更新 UI,显示已扫描
Browser --> User
deactivate Server
User -> Mobile: 点击确认登录
activate Mobile
activate Server
Mobile -> Server: 通知二维码的状态为已确认
Server -> Mobile: 通知用户已登录
deactivate Mobile
Server -> Server: 更新二维码的状态为已确认
deactivate Server
Browser -> Server : 轮询二维码状态
activate Server
Server -> Browser: 返回已确认,并带上用户登录 cookie
Browser -> Browser: 更新 cookie
Browser -> Server: 使用 cookie 请求用户信息
Server -> Browser: 返回用户信息
Browser -> Browser: 存储用户信息到 local storage
Browser --> User: 展示用户登录态页面
@enduml
@startuml
autonumber
actor "用户" as User
participant "浏览器" as Browser
participant "手机端" as Mobile
participant "服务端" as Server #orange
activate User
User -> Browser: 输入 URL
activate Browser
Browser -> Server: 请求 csrf token
activate Server
Server -> Browser: 返回 csrf token
deactivate 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 Mobile
Mobile -> Server: 通知已扫描
activate Server
Server -> Server: 更新二维码状态为已扫描
deactivate Server
Mobile -> Mobile: 展示确认登录页面
Mobile --> User
deactivate Mobile
Browser -> Server: 轮询二维码状态
activate Server
Server -> Browser: 返回已扫描,等待确认
Browser -> Browser: 更新 UI,显示已扫描
Browser --> User
deactivate Server
deactivate User
Browser -> Server: 轮询二维码状态
activate Server
Server -> Browser: 返回已扫描,待确认
deactivate Server
deactivate Browser
...
Server -> Server: 超时,更新二维码状态为超时
Browser -> Server: 轮询二维码状态
activate Browser
activate Server
Server -> Browser: 返回已超时
Browser -> Browser: 进入刷新二维码流程
@enduml
图片源码如下:
[*] --> 已生成
已生成 --> 已超时 : 超时未扫码
已生成 : 等待用户扫码
已生成 -> 已扫码 : 用户扫码
已扫码 : 等待用户点击确认
已扫码 -> 已确认: 用户点击确认
已确认 : 创建 session,进入登录态
已扫码 --> 已超时: 超时未确认
已确认 -> [*] : 服务器端可以删除二维码状态存储了
已超时 -> [*] : 服务器端可以删除二维码状态存储了
若有收获,就点个赞吧
评论
mxGraphJavaScript 绘制流程图
mxGraph是一款基于web的绘制流程图的javascript库工具,虽然目前还尚未提供注册,不过好在mxGraph已经放出了demo,可以先去尝鲜一下,虽然还有很多功能不是那么的完善。
mxGraphJavaScript 绘制流程图
0
Graphity流程图绘制工具
Graphity是一个图表编辑器,可用于快速而有效地生成各种绘图和应用自动不同布局的图表和类似网络,Graphity采用Flash开发,可直接在浏览器上使用。主要支持以下几种图表类型:流程图社会网络图
Graphity流程图绘制工具
0
yEd流程图绘制工具
yed是一个画流程图的工具,不是开源软件,但是可以让你摆脱MicrosoftOfficeVisio ,也有linux下的版本,整个程序是java开发的,确实比较强大。
yEd流程图绘制工具
0
SimpleDiagrams流程图绘制工具
SimpleDiagrams是一个用AdobeAIR制作的免费工具,换言之在Windows/MacOSX/Linux下也可使用。启动后用户便可在「黑板」上利用「粉笔」像涂鸦般随意绘制图形。除了流程图外
SimpleDiagrams流程图绘制工具
0