# email-test

**Repository Path**: luli1314520/email-test

## Basic Information

- **Project Name**: email-test
- **Description**: 邮箱登录验证思考和预演
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-07
- **Last Updated**: 2025-12-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 邮箱验证码登录系统

一个基于 Node.js 和 React 的邮箱验证码登录功能实现，包含完整的前后端代码。

## 功能特性

- ✅ 发送邮箱验证码
- ✅ 验证码验证登录
- ✅ 验证码有效期管理（5分钟）
- ✅ 60秒倒计时防重复发送
- ✅ 美观的现代化 UI 界面
- ✅ 响应式设计，支持移动端

## 项目结构

```
emial-demo/
├── backend/          # Node.js 后端服务
│   ├── server.js     # 主服务器文件
│   ├── package.json  # 后端依赖配置
│   └── env.example   # 环境变量示例
├── frontend/         # React 前端应用
│   ├── src/
│   │   ├── components/
│   │   │   ├── LoginForm.js    # 登录组件
│   │   │   └── LoginForm.css   # 登录样式
│   │   ├── App.js              # 主应用组件
│   │   ├── App.css             # 应用样式
│   │   ├── index.js            # 入口文件
│   │   └── index.css           # 全局样式
│   ├── public/
│   │   └── index.html          # HTML 模板
│   └── package.json            # 前端依赖配置
└── README.md                   # 项目说明文档
```

## 快速开始

### 1. 安装后端依赖

```bash
cd backend
npm install
```

### 2. 配置邮箱信息

复制 `env.example` 文件为 `.env` 并填写您的邮箱配置：

```bash
cp env.example .env
```

编辑 `.env` 文件：

```env
EMAIL_USER=your-email@qq.com
EMAIL_PASS=your-email-authorization-code
SMTP_HOST=smtp.qq.com
SMTP_PORT=587
PORT=3001
```

**重要提示：**
- 如果使用 QQ 邮箱，需要在 QQ 邮箱设置中开启 SMTP 服务并获取授权码
- 如果使用 Gmail，需要开启"允许不够安全的应用访问"
- 其他邮箱服务商请参考相应的 SMTP 配置

### 3. 启动后端服务

```bash
npm start
# 或使用开发模式（需要安装 nodemon）
npm run dev
```

后端服务将在 `http://localhost:3001` 启动

### 4. 安装前端依赖

打开新的终端窗口：

```bash
cd frontend
npm install
```

### 5. 启动前端应用

```bash
npm start
```

前端应用将在 `http://localhost:3000` 启动，浏览器会自动打开

## API 接口说明

### 1. 发送验证码

**接口：** `POST /api/send-code`

**请求体：**
```json
{
  "email": "user@example.com"
}
```

**响应：**
```json
{
  "success": true,
  "message": "验证码已发送到您的邮箱"
}
```

### 2. 验证码登录

**接口：** `POST /api/login`

**请求体：**
```json
{
  "email": "user@example.com",
  "code": "123456"
}
```

**响应：**
```json
{
  "success": true,
  "message": "登录成功",
  "data": {
    "email": "user@example.com",
    "token": "mock-jwt-token-1234567890"
  }
}
```

### 3. 健康检查

**接口：** `GET /api/health`

**响应：**
```json
{
  "status": "ok",
  "message": "服务运行正常"
}
```

## 使用说明

1. 在登录页面输入您的邮箱地址
2. 点击"发送验证码"按钮
3. 查收邮箱中的验证码（6位数字）
4. 输入验证码并点击"登录"
5. 验证码有效期为 5 分钟
6. 验证码发送后 60 秒内不能重复发送

## 技术栈

### 后端
- **Node.js** - 运行环境
- **Express** - Web 框架
- **Nodemailer** - 邮件发送
- **CORS** - 跨域支持

### 前端
- **React** - UI 框架
- **Axios** - HTTP 客户端
- **CSS3** - 样式和动画

## 注意事项

1. **生产环境建议：**
   - 使用 Redis 存储验证码，而不是内存 Map
   - 实现 JWT token 认证机制
   - 添加请求频率限制（Rate Limiting）
   - 使用 HTTPS 协议
   - 添加日志记录和错误监控

2. **安全性建议：**
   - 验证码应设置合理的过期时间
   - 限制同一 IP 的发送频率
   - 使用更复杂的验证码生成算法
   - 添加图形验证码防止机器人攻击

3. **邮箱配置：**
   - 不同邮箱服务商的 SMTP 配置可能不同
   - 建议使用专门的发送邮箱服务（如 SendGrid、阿里云邮件推送等）

## 常见问题

**Q: 无法发送邮件？**
A: 请检查 `.env` 文件中的邮箱配置是否正确，特别是授权码（不是登录密码）

**Q: 前端无法连接后端？**
A: 确保后端服务已启动，并检查 `frontend/src/components/LoginForm.js` 中的 `API_BASE_URL` 配置

**Q: 验证码收不到？**
A: 检查邮箱的垃圾邮件文件夹，或尝试使用其他邮箱服务商

## 许可证

ISC