微信 H5 登录流程

@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

流程说明

用户泳道：
- 访问 H5 页面
- 点击微信登录按钮
- 处理授权请求
- 等待登录结果
H5 前端泳道：
- 加载页面
- 配置 wx.config
- 调用 wx.login 获取 code
- 发送 code 到后端
- 根据响应显示结果
微信客户端泳道：
- 处理配置请求
- 获取用户授权
- 生成临时 code
后端服务器泳道：
- 接收 code
- 换取 access_token
- 获取用户信息
- 查询用户状态
- 生成登录态或返回禁用信息
数据库泳道：
- 查询用户记录
- 返回用户状态

注意事项

code 的有效期很短，通常只有 5 分钟
access_token 需要安全存储在后端，避免泄露
建议后端生成自己的登录态 token 返回给前端
需要处理用户拒绝授权的情况
需要处理各种网络异常情况
建议实现静默登录机制，提升用户体验
用户禁用状态应该定期同步和更新
建议在前端缓存用户禁用状态，避免频繁请求
禁用消息提示应该清晰明确，告知用户如何解除禁用

2.0 KiB Raw Permalink Blame History

微信 H5 登录流程

流程说明

注意事项

2.0 KiB

Raw Permalink Blame History