# 邮箱验证码登录系统说明 ## 📋 系统说明 系统**已完全禁用用户名密码登录**,现在**仅支持邮箱验证码登录**。 ## 🔐 登录流程 ### 1. 用户登录流程 ``` 输入邮箱 → 点击"获取验证码" → 接收邮件验证码 → 输入验证码 → 点击"登录/注册" → 进入系统 ``` ### 2. 详细步骤 1. **输入邮箱地址** - 用户在登录页面输入邮箱地址 - 系统会验证邮箱格式 2. **获取验证码** - 点击"获取验证码"按钮 - 系统调用腾讯云SES发送验证码邮件 - 按钮进入60秒倒计时状态(防重复发送) 3. **接收验证码** - 用户查收邮箱中的验证码 - 验证码为6位数字 - 验证码有效期:5分钟 4. **输入验证码** - 用户输入收到的6位数字验证码 - 系统会验证验证码格式 5. **完成登录** - 点击"登录/注册"按钮 - 系统验证验证码是否正确 - 验证通过后: - 如果用户存在:直接登录 - 如果用户不存在:自动注册新用户并登录 - 登录成功后生成JWT Token - 跳转到个人主页 ## ✅ 已实现的功能 ### 后端功能 ✅ **邮箱验证码登录接口** - `/api/auth/login/email` - 验证邮箱验证码 - 自动注册新用户(如不存在) - 生成JWT Token - 返回用户信息 ✅ **用户名密码登录已禁用** - `/api/auth/login` - 返回提示信息:"系统已禁用用户名密码登录,请使用邮箱验证码登录" ✅ **验证码服务** - 发送验证码邮件:`/api/verification/email/send` - 验证验证码:`/api/verification/email/verify` - 开发模式支持:`/api/verification/email/dev-set` ### 前端功能 ✅ **登录页面** - 邮箱输入框 - 验证码输入框 - 获取验证码按钮(带倒计时) - 登录/注册按钮 - 表单验证 - 错误提示 ✅ **登录流程** - 发送验证码请求 - 验证码格式验证(6位数字) - 调用邮箱验证码登录API - Token存储 - 自动跳转 ## 📝 API接口说明 ### 1. 发送验证码 ``` POST /api/verification/email/send Content-Type: application/json { "email": "user@example.com" } ``` **响应**: ```json { "success": true, "message": "验证码发送成功" } ``` ### 2. 邮箱验证码登录 ``` POST /api/auth/login/email Content-Type: application/json { "email": "user@example.com", "code": "123456" } ``` **响应**: ```json { "success": true, "message": "登录成功", "data": { "user": { "id": 1, "username": "user", "email": "user@example.com", ... }, "token": "eyJhbGciOiJIUzI1NiIs..." } } ``` ## 🔒 安全特性 ### 1. 验证码安全 - ✅ 验证码有效期:5分钟 - ✅ 验证码长度:6位数字 - ✅ 发送频率限制:60秒内只能发送一次 - ✅ 验证后自动删除,防止重复使用 ### 2. 登录安全 - ✅ 必须验证验证码才能登录 - ✅ 用户名密码登录已完全禁用 - ✅ 使用JWT Token进行身份认证 - ✅ 自动注册用户时设置默认权限(ROLE_USER) ## 🎯 用户体验 ### 优点 - ✅ 无需记忆密码 - ✅ 登录流程简单 - ✅ 自动注册新用户 - ✅ 安全可靠 ### 注意事项 - ⚠️ 需要邮箱能够正常接收邮件 - ⚠️ 验证码有时效性(5分钟) - ⚠️ 发送验证码有频率限制(60秒) ## 🛠️ 开发模式 ### 开发环境配置 当 `tencent.ses.template-id=0` 时,系统进入开发模式: - ✅ 不会实际发送邮件 - ✅ 验证码显示在日志中 - ✅ 可以使用开发接口手动设置验证码 ### 开发模式测试 ```bash # 1. 发送验证码(开发模式) POST /api/verification/email/send { "email": "test@example.com" } # 查看日志获取验证码 # 2. 或者直接设置验证码 POST /api/verification/email/dev-set { "email": "test@example.com", "code": "123456" } # 3. 使用设置的验证码登录 POST /api/auth/login/email { "email": "test@example.com", "code": "123456" } ``` ## 📊 登录流程对比 ### 旧流程(已禁用) ``` 输入用户名 → 输入密码 → 点击登录 → 进入系统 ``` ### 新流程(当前) ``` 输入邮箱 → 获取验证码 → 接收邮件 → 输入验证码 → 登录/注册 → 进入系统 ``` ## ⚙️ 配置要求 ### 必需配置 ```properties # 腾讯云SES配置 tencent.ses.secret-id=你的SecretID tencent.ses.secret-key=你的SecretKey tencent.ses.from-email=已验证的发信地址 tencent.ses.template-id=0 # 0=开发模式,实际ID=生产模式 ``` ## 🚀 使用示例 ### 前端调用示例 ```javascript // 1. 发送验证码 const response = await fetch('/api/verification/email/send', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: 'user@example.com' }) }) // 2. 登录(使用收到的验证码) const loginResponse = await fetch('/api/auth/login/email', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: 'user@example.com', code: '123456' // 从邮箱获取的验证码 }) }) const result = await loginResponse.json() if (result.success) { // 保存token和用户信息 sessionStorage.setItem('token', result.data.token) sessionStorage.setItem('user', JSON.stringify(result.data.user)) // 跳转到主页 } ``` ## ⚠️ 重要说明 1. **用户名密码登录已完全禁用** - 即使调用 `/api/auth/login`,也会返回错误提示 - 所有登录必须通过邮箱验证码方式 2. **自动注册** - 如果邮箱对应的用户不存在,系统会自动创建新用户 - 用户名自动从邮箱生成(邮箱@前面的部分) - 默认角色:ROLE_USER(普通用户) - 默认积分:50 3. **验证码管理** - 验证码存储在内存中(重启服务会清除) - 验证成功后自动删除 - 过期后自动清除 ## 🔄 后续优化建议 如需进一步提升,可以考虑: - 将验证码存储到Redis(支持分布式) - 添加图形验证码防止机器人 - 支持手机号验证码登录 - 添加登录日志记录 ## ✅ 总结 系统现在**完全使用邮箱验证码登录**,用户名密码登录已禁用。用户只需: 1. 输入邮箱 2. 获取验证码 3. 输入验证码 4. 完成登录/注册 安全和用户体验都得到了提升!