feat: 实现邮箱验证码登录和腾讯云SES集成
- 实现邮箱验证码登录功能,支持自动注册新用户 - 修复验证码生成逻辑,确保前后端验证码一致 - 添加腾讯云SES webhook回调接口,支持6种邮件事件 - 配置ngrok内网穿透支持,允许外部访问 - 优化登录页面UI,采用全屏背景和居中布局 - 清理调试代码和未使用的导入 - 添加完整的配置文档和测试脚本
This commit is contained in:
93
demo/NGROK_CONFIG.md
Normal file
93
demo/NGROK_CONFIG.md
Normal file
@@ -0,0 +1,93 @@
|
||||
# 内网穿透配置完成
|
||||
|
||||
## ✅ **已完成的配置修改**
|
||||
|
||||
### 🎨 **前端配置 (vite.config.js)**
|
||||
```javascript
|
||||
server: {
|
||||
port: 5173,
|
||||
host: '0.0.0.0', // 允许外部访问
|
||||
allowedHosts: true, // 允许所有主机访问
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
// ... 其他配置
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 🔧 **后端配置 (SecurityConfig.java)**
|
||||
```java
|
||||
// 允许前端开发服务器和ngrok域名
|
||||
configuration.setAllowedOrigins(Arrays.asList(
|
||||
"http://localhost:3000",
|
||||
"http://127.0.0.1:3000",
|
||||
"http://localhost:5173",
|
||||
"http://127.0.0.1:5173",
|
||||
"https://*.ngrok.io",
|
||||
"https://*.ngrok-free.app"
|
||||
));
|
||||
configuration.setAllowedOriginPatterns(Arrays.asList(
|
||||
"https://*.ngrok.io",
|
||||
"https://*.ngrok-free.app"
|
||||
));
|
||||
```
|
||||
|
||||
## 🚀 **使用步骤**
|
||||
|
||||
### 1️⃣ **启动ngrok**
|
||||
```bash
|
||||
# 穿透前端端口
|
||||
ngrok http 5173
|
||||
|
||||
# 穿透后端端口
|
||||
ngrok http 8080
|
||||
```
|
||||
|
||||
### 2️⃣ **获取ngrok地址**
|
||||
ngrok会显示类似:
|
||||
```
|
||||
Forwarding https://abc123.ngrok.io -> http://localhost:5173
|
||||
Forwarding https://def456.ngrok.io -> http://localhost:8080
|
||||
```
|
||||
|
||||
### 3️⃣ **修改前端API配置**
|
||||
需要将前端代码中的API地址改为ngrok地址:
|
||||
|
||||
**修改 `demo/frontend/src/api/request.js`**:
|
||||
```javascript
|
||||
baseURL: 'https://你的后端ngrok地址.ngrok.io/api'
|
||||
```
|
||||
|
||||
**修改 `demo/frontend/src/views/Login.vue`**:
|
||||
- 第151行:`'https://你的后端ngrok地址.ngrok.io/api/verification/email/send'`
|
||||
- 第223行:`'https://你的后端ngrok地址.ngrok.io/api/auth/login/email'`
|
||||
|
||||
### 4️⃣ **测试访问**
|
||||
- 前端:`https://abc123.ngrok.io`
|
||||
- 后端API:`https://def456.ngrok.io/api`
|
||||
|
||||
## 🔒 **安全说明**
|
||||
|
||||
- `allowedHosts: true` 允许所有主机访问(仅开发环境)
|
||||
- CORS配置支持ngrok域名模式匹配
|
||||
- 生产环境建议限制具体的域名
|
||||
|
||||
## 📝 **注意事项**
|
||||
|
||||
1. **ngrok免费版限制**:
|
||||
- 每次重启ngrok,域名会变化
|
||||
- 需要重新配置前端API地址
|
||||
|
||||
2. **HTTPS证书**:
|
||||
- ngrok提供HTTPS,但证书可能不被信任
|
||||
- 浏览器可能显示安全警告
|
||||
|
||||
3. **网络延迟**:
|
||||
- 通过ngrok访问会有额外延迟
|
||||
- 建议在本地测试完成后再使用ngrok
|
||||
|
||||
现在您可以安全地使用ngrok进行内网穿透测试了!
|
||||
Reference in New Issue
Block a user