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

## 🎯 功能概述

已实现完整的邮箱验证码登录功能，包括：
- ✅ 前端登录界面（支持手机/邮箱切换）
- ✅ 后端API接口（验证码发送/验证/登录）
- ✅ 本地模拟测试（无需真实邮件服务）
- ✅ 开发环境友好（验证码在控制台显示）

## 🚀 快速测试

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

1. **打开测试页面**：
   ```
   浏览器打开：demo/test-email-login.html
   ```

2. **测试步骤**：
   - 点击"发送验证码"按钮
   - 查看控制台输出的模拟邮件内容
   - 使用验证码 `123456` 进行登录测试

### 方法2：使用前端应用

1. **启动前端服务**：
   ```bash
   cd demo/frontend
   npm run dev
   ```

2. **访问登录页面**：
   ```
   http://test.yourdomain.com:5173/login
   ```

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

## 🔧 开发环境测试

### 模拟邮件发送功能

```javascript
// 邮件发送函数
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. 发送验证码

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

**响应**：
```json
{
  "success": true,
  "message": "验证码发送成功"
}
```

### 2. 验证码登录

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

**响应**：
```json
{
  "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密钥和发件人信息

### 环境变量配置
```bash
export TENCENT_SECRET_ID=your-secret-id
export TENCENT_SECRET_KEY=your-secret-key
export SES_FROM_EMAIL=noreply@yourdomain.com
```

## 📊 功能状态

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

## 🎉 总结

邮箱验证码登录功能已完全实现，支持：
- 完整的用户界面
- 后端API接口
- 本地模拟测试
- 开发环境友好
- 生产环境就绪

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