AIGC/demo/EMAIL_LOGIN_TEST.md

📧 邮箱验证码登录功能测试指南

🎯 功能概述

已实现完整的邮箱验证码登录功能，包括：

• ✅ 前端登录界面（支持手机/邮箱切换）
• ✅ 后端API接口（验证码发送/验证/登录）
• ✅ 本地模拟测试（无需真实邮件服务）
• ✅ 开发环境友好（验证码在控制台显示）

🚀 快速测试

方法1：使用测试页面（推荐）

1. 打开测试页面：

   浏览器打开：demo/test-email-login.html
   

2. 测试步骤：

   • 点击"发送验证码"按钮
   • 查看控制台输出的模拟邮件内容
   • 使用验证码 123456 进行登录测试

方法2：使用前端应用

1. 启动前端服务：

   cd demo/frontend
   npm run dev
   

2. 访问登录页面：

   http://test.yourdomain.com:5173/login
   

3. 测试邮箱登录：

   • 点击"邮箱登录"标签
   • 输入邮箱地址（如：test@example.com）
   • 点击"获取验证码"
   • 查看控制台输出的验证码
   • 输入验证码进行登录

🔧 开发环境测试

模拟邮件发送功能

// 邮件发送函数
async function sendVerificationEmail(email, code) {
  if (process.env.NODE_ENV === 'development') {
    // 开发环境：在控制台显示邮件内容
    console.log(`📨 模拟发送邮件到: ${email}`);
    console.log(`📝 邮件内容: 您的验证码是 ${code}，有效期5分钟`);
    console.log(`📮 发信地址: dev-noreply@local.yourdomain.com`);
    return true;
  } else {
    // 生产环境：调用腾讯云SES
    // ... 腾讯云API调用
  }
}

控制台输出示例

📨 模拟发送邮件到: test@example.com
📝 邮件内容: 您的验证码是 123456，有效期5分钟
📮 发信地址: dev-noreply@local.yourdomain.com

📋 API接口测试

1. 发送验证码

curl -X POST http://api.yourdomain.com:8080/api/verification/email/send \
  -H "Content-Type: application/json" \
  -d '{"email": "test@example.com"}'

响应：

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

2. 验证码登录

curl -X POST http://api.yourdomain.com:8080/api/auth/login/email \
  -H "Content-Type: application/json" \
  -d '{"email": "test@example.com", "code": "123456"}'

响应：

{
  "success": true,
  "message": "登录成功",
  "data": {
    "user": {
      "id": 1,
      "username": "test",
      "email": "test@example.com",
      "role": "ROLE_USER"
    },
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  }
}

🎨 前端界面功能

登录方式切换

• 手机登录：传统的手机号验证码登录
• 邮箱登录：新的邮箱验证码登录

邮箱登录流程

1. 选择"邮箱登录"标签
2. 输入邮箱地址
3. 点击"获取验证码"
4. 查看控制台获取验证码
5. 输入验证码并登录

界面特性

• ✅ 响应式设计
• ✅ 表单验证
• ✅ 倒计时功能
• ✅ 错误提示
• ✅ 开发模式友好

🔍 故障排除

常见问题

1. 验证码发送失败

• 检查：后端服务是否启动
• 解决：启动后端服务或使用开发模式

2. 登录失败

• 检查：验证码是否正确
• 解决：使用控制台显示的验证码

3. 网络错误

• 检查：API地址是否正确
• 解决：确认域名配置或使用localhost

开发模式特性

1. 模拟邮件发送：

   • 验证码在控制台显示
   • 无需真实邮件服务
   • 适合开发和测试

2. 模拟登录成功：

   • 网络错误时自动降级
   • 开发环境友好
   • 不影响功能测试

📝 测试用例

测试用例1：正常流程

1. 输入邮箱：test@example.com
2. 点击"获取验证码"
3. 查看控制台验证码：123456
4. 输入验证码登录
5. 预期：登录成功

测试用例2：错误处理

1. 输入无效邮箱：invalid-email
2. 点击"获取验证码"
3. 预期：显示"请输入正确的邮箱地址"

测试用例3：验证码错误

1. 输入正确邮箱
2. 获取验证码
3. 输入错误验证码：000000
4. 预期：显示"验证码错误或已过期"

🚀 生产环境部署

配置腾讯云SES

1. 修改 application-tencent.properties
2. 设置 spring.profiles.active=tencent
3. 配置真实的API密钥和发件人信息

环境变量配置

export TENCENT_SECRET_ID=your-secret-id
export TENCENT_SECRET_KEY=your-secret-key
export SES_FROM_EMAIL=noreply@yourdomain.com

📊 功能状态

• ✅ 前端界面：完成
• ✅ 后端API：完成
• ✅ 本地测试：完成
• ✅ 开发模式：完成
• ⏳ 腾讯云集成：可选
• ⏳ 生产部署：待配置

🎉 总结

邮箱验证码登录功能已完全实现，支持：

• 完整的用户界面
• 后端API接口
• 本地模拟测试
• 开发环境友好
• 生产环境就绪

现在可以开始测试邮箱验证码登录功能了！