AIGC/demo/EMAIL_VERIFICATION_LOGIN_GUIDE.md

邮箱验证码登录系统说明

📋 系统说明

系统已完全禁用用户名密码登录，现在仅支持邮箱验证码登录。

🔐 登录流程

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"
}

响应：

{
  "success": true,
  "message": "验证码发送成功"
}

2. 邮箱验证码登录

POST /api/auth/login/email
Content-Type: application/json

{
  "email": "user@example.com",
  "code": "123456"
}

响应：

{
  "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 时，系统进入开发模式：

• ✅ 不会实际发送邮件
• ✅ 验证码显示在日志中
• ✅ 可以使用开发接口手动设置验证码

开发模式测试

# 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"
}

📊 登录流程对比

旧流程（已禁用）

输入用户名 → 输入密码 → 点击登录 → 进入系统

新流程（当前）

输入邮箱 → 获取验证码 → 接收邮件 → 输入验证码 → 登录/注册 → 进入系统

⚙️ 配置要求

必需配置

# 腾讯云SES配置
tencent.ses.secret-id=你的SecretID
tencent.ses.secret-key=你的SecretKey
tencent.ses.from-email=已验证的发信地址
tencent.ses.template-id=0  # 0=开发模式，实际ID=生产模式

🚀 使用示例

前端调用示例

// 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. 完成登录/注册

安全和用户体验都得到了提升！