以下是更详细的 **Mermaid 流程图**，包含 **验证码生成、发送、存储、验证的全流程**，并补充了 **错误处理、安全防护和用户交互细节**： ```mermaid graph TD subgraph 用户端 A[用户点击'获取验证码'] --> B[输入手机号] B --> C[提交手机号到服务端] end subgraph 服务端 C --> D{检查手机号合法性} D -->|合法| E[生成随机6位验证码] D -->|非法| F[返回'手机号错误'] E --> G[哈希加密验证码] G --> H[存储到数据库] H --> I[调用短信平台API] I --> J[短信平台发送验证码到手机] end subgraph 短信平台 J --> K[用户收到短信] end subgraph 验证流程 K --> L[用户输入验证码] L --> M[提交验证码到服务端] M --> N{服务端验证} N -->|验证通过| O[标记验证码为已使用] O --> P[返回'登录成功'] N -->|验证失败| Q[返回'验证码错误'] Q --> R[用户重新输入或重新发送] end subgraph 安全防护 H --> S[设置过期时间5分钟] N --> T[检查是否过期] N --> U[检查是否已使用] N --> V[哈希比对] C --> W[限流: 1分钟最多1次] end style A fill:#f9f,stroke:#333 style F fill:#fcc,stroke:#333 style P fill:#cfc,stroke:#333 style Q fill:#fcc,stroke:#333 style S stroke-dasharray: 5 5 ``` --- ### 🔍 **流程图说明** 1. **用户端交互** - 用户输入手机号并请求验证码，触发服务端流程。 2. **服务端处理** - **合法性检查**：验证手机号格式（如长度、国家代码）。 - **生成与存储**：使用安全随机数生成验证码，哈希加密后存入数据库。 - **调用短信平台**：通过 HTTPS 发送验证码到用户手机。 3. **短信平台** - 第三方服务（如阿里云短信）负责实际发送短信。 4. **验证流程** - 用户输入验证码后，服务端进行哈希比对、过期时间和使用状态检查。 - 验证成功则允许登录，失败则提示错误。 5. **安全防护** - **限流**：防止高频请求（如 1 分钟最多 1 次）。 - **哈希存储**：数据库不存储明文验证码。 - **过期时间**：验证码 5 分钟后自动失效。 - **防复用**：验证成功后标记为已使用。 --- ### 🛠️ **关键节点说明** | 节点 | 说明 | |------|------| | `D{检查手机号合法性}` | 验证手机号格式，防止无效请求 | | `S[设置过期时间5分钟]` | 数据库记录 `expires_at` 字段 | | `V[哈希比对]` | 用户输入验证码哈希后与数据库比对 | | `W[限流]` | 基于 Redis 或缓存实现请求频率控制 | --- ### 🌈 **样式说明** - **粉色（#f9f）**：用户主动操作（如点击按钮）。 - **绿色（#cfc）**：成功路径（如登录成功）。 - **红色（#fcc）**：错误路径（如验证失败、非法手机号）。 - **虚线边框**：后台安全防护逻辑（如过期时间、限流）。 --- ### ✅ **总结** 该流程图覆盖了 **用户请求 → 服务端处理 → 短信发送 → 验证码验证** 的全链路，并明确了安全防护措施，可直接用于系统设计文档或开发参考。 将代码复制到 [Mermaid Live Editor](https://mermaid.live/edit) 即可查看可视化图形。