登录流程图模板与变体

登录流程图模板与变体

登录流程图应按「一种主登录方式一张图」来画，画清凭证校验、分支失败与 Token 签发，避免把账密、短信、OAuth、扫码混在同一画布。

登录是用户接触产品的第一道门。流程画清楚，能让产品、前端、后端、安全四方对齐；流程画乱，就会出现「验码后忘记跳哪」「Token 没下发」这类低级 bug。本指南梳理四种主流登录方式的核心节点与分支，并给出 AI 生成模板。

用 构图AI 可一句话生成手绘风登录流程图，基于 Excalidraw 可编辑，导出 PNG / SVG / .excalidraw；12 种图类型中的流程图 / 时序图技能都常用，示例库约 25 个模板含登录与微信相关示例。

何时需要画登录流程图

• 新项目启动：选定登录方式（账密 / 短信 / OAuth / 微信）。
• 接入新登录方式：老产品加微信扫码或企业 SSO。
• 安全审计：检查 Token 下发、会话失效、暴力破解与防刷。
• 新人 onboarding：看懂「点登录按钮后发生了什么」。
• 体验优化：标出耗时步骤（发短信、跳转授权页）以便减步。

四种主流登录方式

1. 账号密码登录

最传统也最常见。核心节点：

用户输入账号密码 → 前端校验格式 → 提交后端 → 查 DB 比对哈希
  ├ 通过 → 签发 Token / Session
  └ 失败 → 返回错误提示（可累计锁定）

要点：密码传输与存储策略要在图注点明；失败超阈值要锁定或加验证码。

2. 短信验证码登录

体验通常更好，但有通道成本与防刷压力。

用户输手机号 → 后端发码（限频）→ 用户输验证码
  → 后端校验验证码
    ├ 通过 → 签发 Token
    └ 失败 → 提示重新输入

要点：同一手机号发送间隔、验证码 TTL、IP 级限频都应在图上可见。

3. 第三方 OAuth 登录

适合拉新，降低注册门槛。

用户点第三方登录 → 跳转 IdP 授权页 → 用户同意
  → IdP 回调业务后端带 code
    → 后端用 code 换 access_token → 拉用户信息
      → 业务库 upsert 用户 → 签发业务 Token

4. 微信扫码登录

国内 PC 端常见标配。

PC 展示二维码 → 用户用微信扫码 → 微信回调业务后端
  → 后端拿到 openid
    → 已绑定账号 → 直接签发 Token
    → 未绑定 → 跳绑定 / 注册页

详见 微信登录示例。

方式对比与状态机

除了流程图，登录还常用状态机：

未登录 → 登录中 → 已登录 → 已退出
              ↓
          登录失败 → 被锁定

复杂风控场景建议流程 + 状态两张图，不要挤在一起。

手动画 vs AI 生成

登录流程图节点相对稳定、分支多，很适合 AI：

画一张微信扫码登录的流程图，手绘风。
角色：用户（PC）、业务前端、业务后端、微信开放平台、用户数据库。
流程：
1. PC 访问登录页，业务后端调用微信生成二维码 ticket。
2. 用户用微信扫码 → 微信回调业务后端。
3. 业务后端拿 code 换 openid。
4. 后端查用户库：
   - 已绑定：直接签发 Token。
   - 未绑定：跳转绑定 / 注册页。
5. PC 拿到 Token 跳首页。
分支：扫码超时未确认 → 二维码过期。

参考 登录流程示例 与 微信登录示例。登录赠送 1 次免费额度；多方式都要画时，VIP 不限制 AI 画图 更合适。生成后把「签发 Token」与 JWT 登录架构 用词对齐，避免文档打架。

产品与安全的联合评审怎么开

登录图最适合拉上产品、前端、后端、安全一起开短会：投影一张主路径图，只讨论「有没有漏掉的失败态」。常见遗漏包括：

• 用户拒绝 OAuth 授权后如何回跳；
• 短信通道失败时的降级文案与重试；
• 扫码成功但前端轮询超时；
• 风控拦截后是锁定账号还是仅二次验证挑战。

会议产出应是「更新后的图 + 待办列表」，而不是又一份纯文字纪要。AI 生成的第一版负责把主干摆正，会上的修改尽量直接在 Excalidraw 画布完成，结束即导出 PNG 进 PRD。若还要给新人对齐实现细节，再补一张时序图描述回调顺序——流程定业务，时序定消息，JWT 架构图 定凭证存储，三件套比一张超级图更清晰。

多种登录并存时，在文档首页放一张「方式选择」示意（用户点了哪个按钮），再分别链到子图，阅读路径会友好很多。

国际化或多品牌 App 还要注意：同一套后端可能对应不同的 IdP 与文案。此时不要把所有 IdP 画进一张流程图，而是抽「公共签发 Token」子流程 + 各 IdP 专页。构图AI 很适合批量生成这些变体：只改角色名与跳转文案，主成功路径保持不变，维护成本可控。也建议在图注标明「验证码 / 二维码 TTL」等关键数字，方便测试同学直接设计用例。若登录成功后还要强制绑手机或完善资料，请把「强制任务」画成登录后的独立分支，不要塞进鉴权菱形里，以免和「校验失败」混淆。测试用例标题尽量直接复用图上的分支文案，减少理解偏差。

相关指南

• JWT 登录架构：登录成功后的 Token 架构。
• 登录时序示例：登录链路的时序图视角。
• OAuth 流程示例：第三方登录的标准协议。