104 lines
2.0 KiB
Markdown
104 lines
2.0 KiB
Markdown
# 微信 H5 登录流程
|
|
|
|
```plantuml
|
|
@startuml
|
|
|用户|
|
|
start
|
|
:访问H5页面;
|
|
:点击微信登录;
|
|
:处理授权请求;
|
|
if (是否同意?) then (是)
|
|
:等待登录结果;
|
|
else (否)
|
|
:授权失败;
|
|
end
|
|
endif
|
|
|
|
|H5前端|
|
|
:加载页面;
|
|
:配置wx.config;
|
|
if (配置成功?) then (是)
|
|
:调用wx.login;
|
|
:发送code到后端;
|
|
:等待后端响应;
|
|
if (登录结果?) then (成功)
|
|
:展示用户信息;
|
|
else (禁用)
|
|
:显示禁用提示;
|
|
endif
|
|
else (否)
|
|
:显示配置失败;
|
|
end
|
|
endif
|
|
|
|
|微信客户端|
|
|
:处理配置请求;
|
|
:返回配置结果;
|
|
:获取用户授权;
|
|
:生成临时code;
|
|
|
|
|后端服务器|
|
|
:接收code;
|
|
:换取access_token;
|
|
:获取用户信息;
|
|
:查询用户状态;
|
|
if (用户状态?) then (正常)
|
|
:生成登录态;
|
|
else (禁用)
|
|
:返回禁用信息;
|
|
endif
|
|
|
|
|数据库|
|
|
:查询用户记录;
|
|
:返回用户状态;
|
|
|
|
@enduml
|
|
```
|
|
|
|
## 流程说明
|
|
|
|
1. 用户泳道：
|
|
|
|
- 访问 H5 页面
|
|
- 点击微信登录按钮
|
|
- 处理授权请求
|
|
- 等待登录结果
|
|
|
|
2. H5 前端泳道：
|
|
|
|
- 加载页面
|
|
- 配置 wx.config
|
|
- 调用 wx.login 获取 code
|
|
- 发送 code 到后端
|
|
- 根据响应显示结果
|
|
|
|
3. 微信客户端泳道：
|
|
|
|
- 处理配置请求
|
|
- 获取用户授权
|
|
- 生成临时 code
|
|
|
|
4. 后端服务器泳道：
|
|
|
|
- 接收 code
|
|
- 换取 access_token
|
|
- 获取用户信息
|
|
- 查询用户状态
|
|
- 生成登录态或返回禁用信息
|
|
|
|
5. 数据库泳道：
|
|
- 查询用户记录
|
|
- 返回用户状态
|
|
|
|
## 注意事项
|
|
|
|
1. code 的有效期很短，通常只有 5 分钟
|
|
2. access_token 需要安全存储在后端，避免泄露
|
|
3. 建议后端生成自己的登录态 token 返回给前端
|
|
4. 需要处理用户拒绝授权的情况
|
|
5. 需要处理各种网络异常情况
|
|
6. 建议实现静默登录机制，提升用户体验
|
|
7. 用户禁用状态应该定期同步和更新
|
|
8. 建议在前端缓存用户禁用状态，避免频繁请求
|
|
9. 禁用消息提示应该清晰明确，告知用户如何解除禁用
|