🔧 修复install.sh中的shell变量转义问题
- 修复3处Nginx配置中的Cookie变量转义($http_cookie → \$http_cookie) - 移除多余的文档文件(交接文档、更新说明) - 清理文件末尾空行 这个修复确保install.sh脚本能正确生成Nginx配置,而不会将$http_cookie误解释为shell变量。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2381,7 +2381,7 @@ server {
|
|||||||
proxy_set_header X-Forwarded-Proto \$scheme;
|
proxy_set_header X-Forwarded-Proto \$scheme;
|
||||||
|
|
||||||
# Cookie传递配置(验证码session需要)
|
# Cookie传递配置(验证码session需要)
|
||||||
proxy_set_header Cookie $http_cookie;
|
proxy_set_header Cookie \$http_cookie;
|
||||||
proxy_pass_header Set-Cookie;
|
proxy_pass_header Set-Cookie;
|
||||||
|
|
||||||
# 上传超时设置
|
# 上传超时设置
|
||||||
@@ -2663,7 +2663,7 @@ server {
|
|||||||
proxy_set_header X-Forwarded-Proto \$scheme;
|
proxy_set_header X-Forwarded-Proto \$scheme;
|
||||||
|
|
||||||
# Cookie传递配置(验证码session需要)
|
# Cookie传递配置(验证码session需要)
|
||||||
proxy_set_header Cookie $http_cookie;
|
proxy_set_header Cookie \$http_cookie;
|
||||||
proxy_pass_header Set-Cookie;
|
proxy_pass_header Set-Cookie;
|
||||||
|
|
||||||
# 上传超时设置(大文件上传需要更长时间,设置为1小时)
|
# 上传超时设置(大文件上传需要更长时间,设置为1小时)
|
||||||
@@ -2800,7 +2800,7 @@ server {
|
|||||||
proxy_set_header X-Forwarded-Proto \$scheme;
|
proxy_set_header X-Forwarded-Proto \$scheme;
|
||||||
|
|
||||||
# Cookie传递配置(验证码session需要)
|
# Cookie传递配置(验证码session需要)
|
||||||
proxy_set_header Cookie $http_cookie;
|
proxy_set_header Cookie \$http_cookie;
|
||||||
proxy_pass_header Set-Cookie;
|
proxy_pass_header Set-Cookie;
|
||||||
|
|
||||||
# 上传超时设置(大文件上传需要更长时间,设置为1小时)
|
# 上传超时设置(大文件上传需要更长时间,设置为1小时)
|
||||||
@@ -4716,4 +4716,3 @@ elif [[ "$MODE" == "ssl" ]]; then
|
|||||||
else
|
else
|
||||||
main
|
main
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
|||||||
685
交接文档_验证码功能.md
685
交接文档_验证码功能.md
@@ -1,685 +0,0 @@
|
|||||||
# 玩玩云 - 验证码功能交接文档
|
|
||||||
|
|
||||||
> 创建时间:2025年11月21日
|
|
||||||
> 项目名称:vue-driven-cloud-storage(玩玩云存储系统)
|
|
||||||
> 功能:登录验证码功能实现与部署
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📦 项目信息
|
|
||||||
|
|
||||||
### Gitee仓库
|
|
||||||
- **仓库地址**: https://gitee.com/yu-yon/vue-driven-cloud-storage.git
|
|
||||||
- **用户名**: `yu-yon`
|
|
||||||
- **私人令牌**: `54434786369b55e02e98f5ed6825a2e6`
|
|
||||||
|
|
||||||
### Git配置
|
|
||||||
```bash
|
|
||||||
git config user.name '喻勇祥'
|
|
||||||
git config user.email '237899745@qq.com'
|
|
||||||
```
|
|
||||||
|
|
||||||
### 克隆命令
|
|
||||||
```bash
|
|
||||||
git clone https://gitee.com/yu-yon/vue-driven-cloud-storage.git
|
|
||||||
```
|
|
||||||
|
|
||||||
### 使用令牌推送
|
|
||||||
```bash
|
|
||||||
git push https://yu-yon:54434786369b55e02e98f5ed6825a2e6@gitee.com/yu-yon/vue-driven-cloud-storage.git master
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✨ 本次功能更新概述
|
|
||||||
|
|
||||||
### 功能说明
|
|
||||||
添加登录验证码功能,提高系统安全性:
|
|
||||||
- 密码输错2次后自动显示验证码
|
|
||||||
- 4位纯数字验证码,可点击刷新
|
|
||||||
- 验证码有效期5分钟
|
|
||||||
- 基于IP和用户名双重防护
|
|
||||||
- 前台和后台登录均支持
|
|
||||||
|
|
||||||
### 技术实现
|
|
||||||
- **后端**: Express + express-session + svg-captcha
|
|
||||||
- **前端**: Vue 3 + axios
|
|
||||||
- **部署**: Nginx反向代理 + Node.js后端
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📝 本次提交记录
|
|
||||||
|
|
||||||
共提交了**7个commit**到Gitee master分支:
|
|
||||||
|
|
||||||
### 1. `61c99ce` - ✨ 添加登录验证码功能
|
|
||||||
**时间**: 2025-11-21
|
|
||||||
|
|
||||||
**后端改动**:
|
|
||||||
- 安装依赖: `svg-captcha`, `express-session`
|
|
||||||
- 新增API: `GET /api/captcha` (生成验证码)
|
|
||||||
- 修改API: `POST /api/login` (支持验证码验证)
|
|
||||||
- 增强RateLimiter: 添加`getFailureCount()`方法
|
|
||||||
|
|
||||||
**前端改动**:
|
|
||||||
- 登录表单添加验证码输入框(条件显示)
|
|
||||||
- 验证码图片展示和刷新功能
|
|
||||||
- 自动触发验证码显示逻辑
|
|
||||||
|
|
||||||
**新增文档**:
|
|
||||||
- `CAPTCHA_FEATURE.md` - 详细功能文档
|
|
||||||
- `CAPTCHA_README.md` - 快速开始指南
|
|
||||||
- `test_captcha.sh` - 自动化测试脚本
|
|
||||||
- `更新说明_验证码功能.txt` - 中文说明
|
|
||||||
|
|
||||||
### 2. `7ce9d95` - 🐛 修复验证码Session问题
|
|
||||||
**问题**: Session配置导致验证码无法保存
|
|
||||||
|
|
||||||
**修复内容**:
|
|
||||||
```javascript
|
|
||||||
// backend/server.js
|
|
||||||
session({
|
|
||||||
saveUninitialized: true, // false → true
|
|
||||||
name: 'captcha.sid',
|
|
||||||
cookie: {
|
|
||||||
sameSite: 'lax' // 新增
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. `83773ef` - 🐛 修复验证码跨域Cookie传递问题
|
|
||||||
**问题**: axios不携带credentials导致cookie无法传递
|
|
||||||
|
|
||||||
**修复内容**:
|
|
||||||
```javascript
|
|
||||||
// frontend/app.js mounted()
|
|
||||||
axios.defaults.withCredentials = true;
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. `fca00aa` - 🔄 更新前端版本号
|
|
||||||
**问题**: 浏览器缓存旧版本js文件
|
|
||||||
|
|
||||||
**修复内容**:
|
|
||||||
```html
|
|
||||||
<!-- frontend/app.html -->
|
|
||||||
app.js?v=20251110001 → app.js?v=20251121001
|
|
||||||
```
|
|
||||||
|
|
||||||
### 5. `5f3fd38` - 🐛 修复Nginx Cookie传递问题 ⚠️ **最关键**
|
|
||||||
**问题**: Nginx反向代理默认不传递Cookie
|
|
||||||
|
|
||||||
**修复内容**:
|
|
||||||
```nginx
|
|
||||||
# nginx/nginx.conf - location /api 块中添加
|
|
||||||
proxy_set_header Cookie $http_cookie;
|
|
||||||
proxy_pass_header Set-Cookie;
|
|
||||||
```
|
|
||||||
|
|
||||||
### 6. `225c3a5` - 🔧 更新install.sh
|
|
||||||
**问题**: 安装脚本生成的Nginx配置缺少Cookie设置
|
|
||||||
|
|
||||||
**修复内容**:
|
|
||||||
- 修改install.sh的3处`location /api`配置
|
|
||||||
- 添加自动修复脚本: `fix_install_sh.sh`
|
|
||||||
- 添加详细说明: `INSTALL_SH_UPDATE.md`
|
|
||||||
|
|
||||||
### 7. `3ef0fa8` - 📖 添加验证码快速修复指南
|
|
||||||
**新增文档**: `CAPTCHA_QUICK_FIX.md`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔧 完整的验证码工作原理
|
|
||||||
|
|
||||||
### 1. 验证码生成流程
|
|
||||||
```
|
|
||||||
浏览器 → GET /api/captcha
|
|
||||||
↓
|
|
||||||
后端生成验证码图片(SVG)
|
|
||||||
↓
|
|
||||||
后端创建session: req.session.captcha = "1234"
|
|
||||||
↓
|
|
||||||
后端返回: Set-Cookie: captcha.sid=xxx
|
|
||||||
↓
|
|
||||||
Nginx传递Cookie到浏览器
|
|
||||||
↓
|
|
||||||
浏览器保存cookie
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 验证码验证流程
|
|
||||||
```
|
|
||||||
浏览器 → POST /api/login (带Cookie: captcha.sid=xxx)
|
|
||||||
↓
|
|
||||||
Nginx传递Cookie到后端
|
|
||||||
↓
|
|
||||||
后端读取session: req.session.captcha
|
|
||||||
↓
|
|
||||||
对比用户输入: captcha === session.captcha
|
|
||||||
↓
|
|
||||||
验证成功/失败
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 配置依赖关系
|
|
||||||
|
|
||||||
验证码功能需要**三层配置**同时生效:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────┐
|
|
||||||
│ 1. 前端配置 (frontend/app.js) │
|
|
||||||
│ axios.defaults.withCredentials = true │
|
|
||||||
│ → 确保请求携带cookie │
|
|
||||||
└─────────────────────────────────────────────┘
|
|
||||||
↓
|
|
||||||
┌─────────────────────────────────────────────┐
|
|
||||||
│ 2. Nginx配置 (nginx.conf) │
|
|
||||||
│ proxy_set_header Cookie $http_cookie │
|
|
||||||
│ proxy_pass_header Set-Cookie │
|
|
||||||
│ → 确保Cookie在Nginx层传递 │
|
|
||||||
└─────────────────────────────────────────────┘
|
|
||||||
↓
|
|
||||||
┌─────────────────────────────────────────────┐
|
|
||||||
│ 3. 后端配置 (backend/server.js) │
|
|
||||||
│ session({ saveUninitialized: true }) │
|
|
||||||
│ → 确保session被创建和保存 │
|
|
||||||
└─────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**缺少任何一层都会导致验证码失败!**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ⚠️ 当前存在的问题
|
|
||||||
|
|
||||||
### 生产环境验证码不工作
|
|
||||||
|
|
||||||
**症状**:
|
|
||||||
- 验证码一直提示"已过期"
|
|
||||||
- 测试发现: `curl -si https://cs.workyai.cn/api/captcha` **没有返回Set-Cookie**
|
|
||||||
|
|
||||||
**根本原因**:
|
|
||||||
生产环境的Nginx配置**没有应用Cookie传递设置**
|
|
||||||
|
|
||||||
**证据**:
|
|
||||||
```bash
|
|
||||||
curl -si https://cs.workyai.cn/api/captcha
|
|
||||||
HTTP/2 200
|
|
||||||
❌ 缺少: Set-Cookie: captcha.sid=...
|
|
||||||
```
|
|
||||||
|
|
||||||
### 需要修复的步骤
|
|
||||||
|
|
||||||
#### 方法1:手动修复(推荐)
|
|
||||||
|
|
||||||
1. **SSH登录生产服务器**
|
|
||||||
```bash
|
|
||||||
ssh root@你的服务器IP
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **找到Nginx配置文件**
|
|
||||||
```bash
|
|
||||||
# 查找配置文件
|
|
||||||
find /etc/nginx -name "*.conf" | xargs grep -l "workyai.cn"
|
|
||||||
# 或
|
|
||||||
find /www/server -name "*.conf" | xargs grep -l "40001"
|
|
||||||
|
|
||||||
# 输出示例: /etc/nginx/conf.d/玩玩云.conf
|
|
||||||
```
|
|
||||||
|
|
||||||
3. **编辑配置文件**
|
|
||||||
```bash
|
|
||||||
vim /etc/nginx/conf.d/玩玩云.conf # 替换为实际路径
|
|
||||||
```
|
|
||||||
|
|
||||||
4. **找到 location /api 块**
|
|
||||||
```nginx
|
|
||||||
location /api {
|
|
||||||
proxy_pass http://localhost:40001;
|
|
||||||
...
|
|
||||||
proxy_set_header X-Forwarded-Proto $scheme;
|
|
||||||
|
|
||||||
# ⬇️ 在这一行后面添加3行 ⬇️
|
|
||||||
# Cookie传递配置(验证码session需要)
|
|
||||||
proxy_set_header Cookie $http_cookie;
|
|
||||||
proxy_pass_header Set-Cookie;
|
|
||||||
|
|
||||||
# 上传超时设置
|
|
||||||
...
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
5. **测试并重载**
|
|
||||||
```bash
|
|
||||||
# 测试配置
|
|
||||||
nginx -t
|
|
||||||
|
|
||||||
# 重新加载
|
|
||||||
nginx -s reload
|
|
||||||
```
|
|
||||||
|
|
||||||
6. **验证修复**
|
|
||||||
```bash
|
|
||||||
# 测试验证码API(应该返回Set-Cookie)
|
|
||||||
curl -si http://localhost:40001/api/captcha | grep -i "set-cookie"
|
|
||||||
|
|
||||||
# 期望输出:
|
|
||||||
# Set-Cookie: captcha.sid=s%3A...; Path=/; HttpOnly; SameSite=Lax
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 方法2:自动修复脚本
|
|
||||||
|
|
||||||
在服务器上运行:
|
|
||||||
```bash
|
|
||||||
cd /root/vue-driven-cloud-storage # 项目路径
|
|
||||||
|
|
||||||
# 拉取最新代码
|
|
||||||
git pull origin master
|
|
||||||
|
|
||||||
# 运行自动修复脚本
|
|
||||||
sudo bash << 'AUTO_FIX'
|
|
||||||
#!/bin/bash
|
|
||||||
set -e
|
|
||||||
|
|
||||||
echo "🔧 自动修复Nginx配置..."
|
|
||||||
|
|
||||||
# 查找配置文件
|
|
||||||
CONF=$(find /etc/nginx /www/server -name "*.conf" -exec grep -l "location /api" {} \; 2>/dev/null | grep -v backup | head -1)
|
|
||||||
|
|
||||||
if [[ -z "$CONF" ]]; then
|
|
||||||
echo "❌ 未找到配置文件"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "找到: $CONF"
|
|
||||||
|
|
||||||
# 备份
|
|
||||||
cp "$CONF" "${CONF}.backup.$(date +%Y%m%d%H%M%S)"
|
|
||||||
|
|
||||||
# 添加Cookie配置
|
|
||||||
if ! grep -q "proxy_set_header Cookie" "$CONF"; then
|
|
||||||
sed -i '/proxy_set_header X-Forwarded-Proto \$scheme;/a\
|
|
||||||
\
|
|
||||||
# Cookie传递配置(验证码session需要)\
|
|
||||||
proxy_set_header Cookie $http_cookie;\
|
|
||||||
proxy_pass_header Set-Cookie;' "$CONF"
|
|
||||||
echo "✅ 已添加Cookie配置"
|
|
||||||
else
|
|
||||||
echo "✅ Cookie配置已存在"
|
|
||||||
fi
|
|
||||||
|
|
||||||
# 测试并重载
|
|
||||||
nginx -t && nginx -s reload
|
|
||||||
|
|
||||||
echo "✅ 修复完成!"
|
|
||||||
echo ""
|
|
||||||
echo "验证修复:"
|
|
||||||
curl -si http://localhost:40001/api/captcha | grep -i "set-cookie"
|
|
||||||
AUTO_FIX
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🧪 本地测试步骤
|
|
||||||
|
|
||||||
### 环境准备
|
|
||||||
```bash
|
|
||||||
# 克隆项目
|
|
||||||
git clone https://gitee.com/yu-yon/vue-driven-cloud-storage.git
|
|
||||||
cd vue-driven-cloud-storage
|
|
||||||
|
|
||||||
# 安装后端依赖
|
|
||||||
cd backend
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# 安装前端依赖(如需要)
|
|
||||||
cd ../frontend
|
|
||||||
# (前端通常无需安装,静态文件)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 启动后端
|
|
||||||
```bash
|
|
||||||
cd backend
|
|
||||||
node server.js
|
|
||||||
|
|
||||||
# 或使用PM2
|
|
||||||
pm2 start server.js --name backend
|
|
||||||
|
|
||||||
# 查看日志
|
|
||||||
pm2 logs backend
|
|
||||||
```
|
|
||||||
|
|
||||||
### 启动前端(使用简单HTTP服务器)
|
|
||||||
```bash
|
|
||||||
cd frontend
|
|
||||||
|
|
||||||
# 方法1: Python
|
|
||||||
python3 -m http.server 3000
|
|
||||||
|
|
||||||
# 方法2: Node.js http-server
|
|
||||||
npx http-server -p 3000
|
|
||||||
|
|
||||||
# 方法3: Nginx(推荐,模拟生产环境)
|
|
||||||
# 使用项目中的 nginx/nginx.conf
|
|
||||||
```
|
|
||||||
|
|
||||||
### 配置Nginx(本地测试)
|
|
||||||
```bash
|
|
||||||
# 复制配置
|
|
||||||
sudo cp nginx/nginx.conf /etc/nginx/conf.d/玩玩云-本地.conf
|
|
||||||
|
|
||||||
# 修改配置中的路径
|
|
||||||
sudo vim /etc/nginx/conf.d/玩玩云-本地.conf
|
|
||||||
# 修改 root 路径为你的实际路径
|
|
||||||
# 修改 proxy_pass 为 http://localhost:40001
|
|
||||||
|
|
||||||
# 测试并重载
|
|
||||||
sudo nginx -t
|
|
||||||
sudo nginx -s reload
|
|
||||||
```
|
|
||||||
|
|
||||||
### 测试验证码功能
|
|
||||||
|
|
||||||
1. **访问登录页面**
|
|
||||||
```
|
|
||||||
http://localhost:80
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **触发验证码**
|
|
||||||
- 输入任意用户名: `test`
|
|
||||||
- 输入错误密码: `wrong`
|
|
||||||
- 点击登录2次
|
|
||||||
- 第3次尝试应该显示验证码
|
|
||||||
|
|
||||||
3. **测试验证码验证**
|
|
||||||
- 输入验证码图片中的数字
|
|
||||||
- 如果不清楚,点击图片刷新
|
|
||||||
- 验证码应该能正常验证
|
|
||||||
|
|
||||||
4. **检查浏览器**
|
|
||||||
- F12 → Network
|
|
||||||
- 查看 `/api/captcha` 请求
|
|
||||||
- Response Headers应该有: `Set-Cookie: captcha.sid=...`
|
|
||||||
- 查看 `/api/login` 请求
|
|
||||||
- Request Headers应该有: `Cookie: captcha.sid=...`
|
|
||||||
|
|
||||||
### 测试命令行
|
|
||||||
```bash
|
|
||||||
# 测试验证码生成
|
|
||||||
curl -vi http://localhost:40001/api/captcha | grep -i "set-cookie"
|
|
||||||
|
|
||||||
# 完整流程测试
|
|
||||||
# 1. 生成验证码并保存cookie
|
|
||||||
curl -s http://localhost:40001/api/captcha -c cookies.txt > /dev/null
|
|
||||||
|
|
||||||
# 2. 查看cookie
|
|
||||||
cat cookies.txt
|
|
||||||
|
|
||||||
# 3. 使用cookie登录
|
|
||||||
curl -v http://localhost:40001/api/login \
|
|
||||||
-b cookies.txt \
|
|
||||||
-H "Content-Type: application/json" \
|
|
||||||
-d '{"username":"admin","password":"admin123","captcha":"1234"}'
|
|
||||||
|
|
||||||
# 清理
|
|
||||||
rm cookies.txt
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📂 重要文件清单
|
|
||||||
|
|
||||||
### 后端文件
|
|
||||||
```
|
|
||||||
backend/
|
|
||||||
├── server.js # ✅ 已修改 - session配置、验证码API
|
|
||||||
├── package.json # ✅ 已修改 - 新增依赖
|
|
||||||
├── package-lock.json # ✅ 已修改
|
|
||||||
├── auth.js # 无修改
|
|
||||||
└── database.js # 无修改
|
|
||||||
```
|
|
||||||
|
|
||||||
### 前端文件
|
|
||||||
```
|
|
||||||
frontend/
|
|
||||||
├── app.html # ✅ 已修改 - 验证码UI、版本号
|
|
||||||
└── app.js # ✅ 已修改 - withCredentials、验证码逻辑
|
|
||||||
```
|
|
||||||
|
|
||||||
### Nginx配置
|
|
||||||
```
|
|
||||||
nginx/
|
|
||||||
└── nginx.conf # ✅ 已修改 - Cookie传递配置
|
|
||||||
```
|
|
||||||
|
|
||||||
### 部署脚本
|
|
||||||
```
|
|
||||||
install.sh # ✅ 已修改 - 3处Cookie配置
|
|
||||||
fix_install_sh.sh # ✅ 新增 - 自动修复脚本
|
|
||||||
```
|
|
||||||
|
|
||||||
### 文档
|
|
||||||
```
|
|
||||||
CAPTCHA_FEATURE.md # ✅ 新增 - 详细功能文档
|
|
||||||
CAPTCHA_README.md # ✅ 新增 - 快速开始
|
|
||||||
CAPTCHA_QUICK_FIX.md # ✅ 新增 - 快速修复指南
|
|
||||||
INSTALL_SH_UPDATE.md # ✅ 新增 - install.sh修改说明
|
|
||||||
更新说明_验证码功能.txt # ✅ 新增 - 中文说明
|
|
||||||
test_captcha.sh # ✅ 新增 - 测试脚本
|
|
||||||
交接文档_验证码功能.md # ✅ 本文档
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔍 问题诊断工具
|
|
||||||
|
|
||||||
### 检查Nginx配置
|
|
||||||
```bash
|
|
||||||
# 查看完整配置
|
|
||||||
nginx -T | grep -A 30 "location /api"
|
|
||||||
|
|
||||||
# 检查Cookie配置
|
|
||||||
nginx -T | grep -i "proxy_set_header cookie"
|
|
||||||
|
|
||||||
# 查找配置文件
|
|
||||||
find /etc/nginx -name "*.conf" -exec grep -l "workyai.cn" {} \;
|
|
||||||
```
|
|
||||||
|
|
||||||
### 检查后端状态
|
|
||||||
```bash
|
|
||||||
# 检查进程
|
|
||||||
ps aux | grep "node.*server"
|
|
||||||
|
|
||||||
# 检查端口
|
|
||||||
netstat -tlnp | grep 40001
|
|
||||||
|
|
||||||
# 检查依赖
|
|
||||||
cd backend && npm list | grep -E "(session|captcha)"
|
|
||||||
|
|
||||||
# 查看日志
|
|
||||||
pm2 logs backend
|
|
||||||
# 或
|
|
||||||
tail -f backend/logs/error.log
|
|
||||||
```
|
|
||||||
|
|
||||||
### 测试验证码API
|
|
||||||
```bash
|
|
||||||
# 本地测试
|
|
||||||
curl -vi http://localhost:40001/api/captcha
|
|
||||||
|
|
||||||
# 远程测试
|
|
||||||
curl -vi https://cs.workyai.cn/api/captcha
|
|
||||||
|
|
||||||
# 完整测试
|
|
||||||
bash test_captcha.sh
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📞 联系方式
|
|
||||||
|
|
||||||
### Git配置
|
|
||||||
- 用户名: 喻勇祥
|
|
||||||
- 邮箱: 237899745@qq.com
|
|
||||||
|
|
||||||
### 项目信息
|
|
||||||
- Gitee: https://gitee.com/yu-yon
|
|
||||||
- 项目: vue-driven-cloud-storage
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📅 后续工作计划
|
|
||||||
|
|
||||||
### 必须完成
|
|
||||||
1. ✅ 完成代码提交(已完成7个commit)
|
|
||||||
2. ⚠️ **修复生产环境Nginx配置**(待完成)
|
|
||||||
3. ⚠️ 验证生产环境验证码功能(待完成)
|
|
||||||
|
|
||||||
### 建议完成
|
|
||||||
1. 添加验证码样式优化
|
|
||||||
2. 添加验证码错误次数限制
|
|
||||||
3. 添加登录日志记录
|
|
||||||
4. 考虑添加滑动验证码
|
|
||||||
|
|
||||||
### 优化建议
|
|
||||||
1. 设置生产环境的SESSION_SECRET
|
|
||||||
2. 启用HTTPS时设置COOKIE_SECURE=true
|
|
||||||
3. 配置ALLOWED_ORIGINS白名单
|
|
||||||
4. 定期清理失败的登录尝试记录
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📋 验证清单
|
|
||||||
|
|
||||||
部署完成后,使用此清单验证:
|
|
||||||
|
|
||||||
### 后端检查
|
|
||||||
- [ ] express-session依赖已安装
|
|
||||||
- [ ] svg-captcha依赖已安装
|
|
||||||
- [ ] server.js包含session配置
|
|
||||||
- [ ] server.js包含验证码API
|
|
||||||
- [ ] server.js包含验证码验证逻辑
|
|
||||||
- [ ] 后端服务正常运行
|
|
||||||
|
|
||||||
### 前端检查
|
|
||||||
- [ ] app.html包含验证码UI
|
|
||||||
- [ ] app.html版本号已更新
|
|
||||||
- [ ] app.js包含withCredentials配置
|
|
||||||
- [ ] app.js包含验证码逻辑
|
|
||||||
- [ ] 浏览器缓存已清除
|
|
||||||
|
|
||||||
### Nginx检查
|
|
||||||
- [ ] location /api包含proxy_set_header Cookie
|
|
||||||
- [ ] location /api包含proxy_pass_header Set-Cookie
|
|
||||||
- [ ] nginx -t 测试通过
|
|
||||||
- [ ] nginx已重新加载
|
|
||||||
|
|
||||||
### 功能测试
|
|
||||||
- [ ] 第1-2次登录失败不显示验证码
|
|
||||||
- [ ] 第3次登录失败显示验证码
|
|
||||||
- [ ] 验证码图片可以正常显示
|
|
||||||
- [ ] 点击验证码可以刷新
|
|
||||||
- [ ] 输入正确验证码可以通过验证
|
|
||||||
- [ ] 输入错误验证码提示错误
|
|
||||||
- [ ] 管理员登录也受验证码保护
|
|
||||||
- [ ] 登录成功后验证码自动隐藏
|
|
||||||
|
|
||||||
### API测试
|
|
||||||
- [ ] GET /api/captcha 返回SVG图片
|
|
||||||
- [ ] GET /api/captcha 返回Set-Cookie响应头
|
|
||||||
- [ ] POST /api/login 接收captcha参数
|
|
||||||
- [ ] POST /api/login 验证验证码
|
|
||||||
- [ ] POST /api/login 携带Cookie请求头
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎓 技术要点总结
|
|
||||||
|
|
||||||
### Session管理
|
|
||||||
```javascript
|
|
||||||
// 关键配置
|
|
||||||
session({
|
|
||||||
secret: 'your-secret',
|
|
||||||
resave: false,
|
|
||||||
saveUninitialized: true, // ⚠️ 必须为true
|
|
||||||
cookie: {
|
|
||||||
sameSite: 'lax', // ⚠️ 必须设置
|
|
||||||
httpOnly: true,
|
|
||||||
maxAge: 10 * 60 * 1000
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### Axios配置
|
|
||||||
```javascript
|
|
||||||
// 全局配置
|
|
||||||
axios.defaults.withCredentials = true; // ⚠️ 必须设置
|
|
||||||
```
|
|
||||||
|
|
||||||
### Nginx配置
|
|
||||||
```nginx
|
|
||||||
location /api {
|
|
||||||
# ... 其他配置 ...
|
|
||||||
|
|
||||||
# ⚠️ 以下两行必须添加
|
|
||||||
proxy_set_header Cookie $http_cookie;
|
|
||||||
proxy_pass_header Set-Cookie;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 验证码生成
|
|
||||||
```javascript
|
|
||||||
const svgCaptcha = require('svg-captcha');
|
|
||||||
|
|
||||||
const captcha = svgCaptcha.create({
|
|
||||||
size: 4, // 4位数字
|
|
||||||
noise: 2, // 干扰线
|
|
||||||
color: true, // 彩色
|
|
||||||
charPreset: '0123456789' // 只用数字
|
|
||||||
});
|
|
||||||
|
|
||||||
req.session.captcha = captcha.text.toLowerCase();
|
|
||||||
req.session.captchaTime = Date.now();
|
|
||||||
```
|
|
||||||
|
|
||||||
### 验证码验证
|
|
||||||
```javascript
|
|
||||||
// 检查是否需要验证码
|
|
||||||
const needCaptcha = ipFailures >= 2 || usernameFailures >= 2;
|
|
||||||
|
|
||||||
if (needCaptcha) {
|
|
||||||
// 验证验证码
|
|
||||||
const sessionCaptcha = req.session.captcha;
|
|
||||||
const captchaTime = req.session.captchaTime;
|
|
||||||
|
|
||||||
// 检查过期(5分钟)
|
|
||||||
if (Date.now() - captchaTime > 5 * 60 * 1000) {
|
|
||||||
return res.status(400).json({
|
|
||||||
success: false,
|
|
||||||
message: '验证码已过期'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 验证是否匹配
|
|
||||||
if (captcha.toLowerCase() !== sessionCaptcha) {
|
|
||||||
return res.status(400).json({
|
|
||||||
success: false,
|
|
||||||
message: '验证码错误'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔐 安全注意事项
|
|
||||||
|
|
||||||
1. **SESSION_SECRET**: 生产环境必须设置强随机值
|
|
||||||
2. **COOKIE_SECURE**: HTTPS环境必须设置为true
|
|
||||||
3. **ALLOWED_ORIGINS**: 必须配置CORS白名单
|
|
||||||
4. **JWT_SECRET**: 必须设置强随机值
|
|
||||||
5. **私人令牌**: 不要泄露到公开仓库
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**文档版本**: v1.0
|
|
||||||
**最后更新**: 2025-11-21
|
|
||||||
**作者**: Claude Code
|
|
||||||
**状态**: ✅ 代码已完成并推送 | ⚠️ 生产环境待修复
|
|
||||||
171
更新说明_验证码功能.txt
171
更新说明_验证码功能.txt
@@ -1,171 +0,0 @@
|
|||||||
====================================
|
|
||||||
玩玩云 - 登录验证码功能更新说明
|
|
||||||
====================================
|
|
||||||
|
|
||||||
更新时间:2025年11月21日
|
|
||||||
版本:v1.1.0
|
|
||||||
|
|
||||||
一、功能概述
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
为"玩玩云"云存储系统添加了登录验证码功能,显著提升了系统的安全性。
|
|
||||||
|
|
||||||
核心特性:
|
|
||||||
✅ 密码输错2次后自动显示验证码
|
|
||||||
✅ 前台和后台登录均支持
|
|
||||||
✅ 验证码可点击刷新
|
|
||||||
✅ 基于IP和用户名双重防护
|
|
||||||
✅ 失败5次封锁30分钟
|
|
||||||
|
|
||||||
二、使用方法
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
1. 正常登录流程:
|
|
||||||
- 输入用户名和密码
|
|
||||||
- 点击"登录"按钮
|
|
||||||
- 如果密码正确,直接登录成功
|
|
||||||
|
|
||||||
2. 触发验证码流程:
|
|
||||||
- 第1次密码错误:提示"用户名或密码错误"
|
|
||||||
- 第2次密码错误:提示"用户名或密码错误"
|
|
||||||
- 第3次尝试:自动显示验证码输入框
|
|
||||||
- 输入验证码和密码
|
|
||||||
- 点击"登录"按钮
|
|
||||||
|
|
||||||
3. 验证码操作:
|
|
||||||
- 看不清?点击图片刷新验证码
|
|
||||||
- 验证码是4位纯数字
|
|
||||||
- 验证码有效期5分钟
|
|
||||||
|
|
||||||
三、技术实现
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
后端改动:
|
|
||||||
1. 安装依赖:svg-captcha, express-session
|
|
||||||
2. 新增API:GET /api/captcha (生成验证码)
|
|
||||||
3. 修改API:POST /api/login (验证码验证)
|
|
||||||
4. 增强防爆破机制
|
|
||||||
|
|
||||||
前端改动:
|
|
||||||
1. 添加验证码显示区域
|
|
||||||
2. 添加验证码输入框
|
|
||||||
3. 实现自动触发逻辑
|
|
||||||
4. 支持点击刷新
|
|
||||||
|
|
||||||
四、文件清单
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
修改的文件:
|
|
||||||
backend/server.js - 后端主文件
|
|
||||||
backend/package.json - 依赖配置
|
|
||||||
frontend/app.html - 前端页面
|
|
||||||
frontend/app.js - 前端逻辑
|
|
||||||
|
|
||||||
新增的文件:
|
|
||||||
CAPTCHA_FEATURE.md - 详细功能文档
|
|
||||||
CAPTCHA_README.md - 快速开始指南
|
|
||||||
test_captcha.sh - 测试脚本
|
|
||||||
更新说明_验证码功能.txt - 本文件
|
|
||||||
|
|
||||||
五、启动说明
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
1. 安装依赖(如果尚未安装):
|
|
||||||
cd backend
|
|
||||||
npm install
|
|
||||||
|
|
||||||
2. 启动后端服务:
|
|
||||||
cd backend
|
|
||||||
node server.js
|
|
||||||
|
|
||||||
3. 访问系统:
|
|
||||||
打开浏览器访问 http://localhost:40001
|
|
||||||
|
|
||||||
六、测试方法
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
方法1:浏览器手动测试
|
|
||||||
1. 访问登录页面
|
|
||||||
2. 输入任意用户名和错误密码
|
|
||||||
3. 连续点击"登录"按钮2次
|
|
||||||
4. 第3次尝试时应该看到验证码
|
|
||||||
|
|
||||||
方法2:自动化测试脚本
|
|
||||||
./test_captcha.sh
|
|
||||||
|
|
||||||
七、配置调整(可选)
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
1. 修改验证码触发次数:
|
|
||||||
编辑 backend/server.js 第683行附近
|
|
||||||
const needCaptcha = ipFailures >= 2 || usernameFailures >= 2;
|
|
||||||
修改 >= 2 为你想要的次数
|
|
||||||
|
|
||||||
2. 修改防爆破参数:
|
|
||||||
编辑 backend/server.js 第394行附近
|
|
||||||
const loginLimiter = new RateLimiter({
|
|
||||||
maxAttempts: 5, // 最大失败次数
|
|
||||||
windowMs: 15 * 60 * 1000, // 15分钟
|
|
||||||
blockDuration: 30 * 60 * 1000 // 封锁30分钟
|
|
||||||
});
|
|
||||||
|
|
||||||
3. 设置Session密钥(生产环境推荐):
|
|
||||||
编辑 backend/.env 文件
|
|
||||||
SESSION_SECRET=your-random-secret-key
|
|
||||||
|
|
||||||
八、安全建议
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
✅ 已实现的安全措施:
|
|
||||||
- 验证码采用SVG格式,防止OCR识别
|
|
||||||
- 验证码存储在服务器端Session
|
|
||||||
- 验证码有5分钟有效期
|
|
||||||
- 基于IP和用户名双重防护
|
|
||||||
- 失败5次自动封锁30分钟
|
|
||||||
|
|
||||||
🔒 建议的额外措施:
|
|
||||||
- 在生产环境设置强随机SESSION_SECRET
|
|
||||||
- 启用HTTPS并设置COOKIE_SECURE=true
|
|
||||||
- 定期检查登录日志
|
|
||||||
- 考虑添加登录通知功能
|
|
||||||
|
|
||||||
九、故障排查
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
问题1:验证码不显示
|
|
||||||
解决:
|
|
||||||
- 确认后端服务已启动
|
|
||||||
- 检查浏览器控制台错误
|
|
||||||
- 确认已输错密码至少2次
|
|
||||||
|
|
||||||
问题2:验证码一直错误
|
|
||||||
解决:
|
|
||||||
- 刷新验证码重试
|
|
||||||
- 检查浏览器是否禁用Cookie
|
|
||||||
- 清除浏览器缓存
|
|
||||||
|
|
||||||
问题3:验证码API 500错误
|
|
||||||
解决:
|
|
||||||
- 检查依赖是否安装:npm list svg-captcha express-session
|
|
||||||
- 重新安装:npm install
|
|
||||||
- 查看后端日志
|
|
||||||
|
|
||||||
十、技术支持
|
|
||||||
----------------------------------
|
|
||||||
|
|
||||||
详细文档:
|
|
||||||
- CAPTCHA_FEATURE.md - 完整功能说明和技术文档
|
|
||||||
- CAPTCHA_README.md - 快速入门指南
|
|
||||||
|
|
||||||
测试工具:
|
|
||||||
- test_captcha.sh - 自动化测试脚本
|
|
||||||
|
|
||||||
遇到问题:
|
|
||||||
1. 查看后端日志
|
|
||||||
2. 检查浏览器控制台
|
|
||||||
3. 运行测试脚本
|
|
||||||
4. 查看详细文档
|
|
||||||
|
|
||||||
====================================
|
|
||||||
更新完成!享受更安全的云存储体验!
|
|
||||||
====================================
|
|
||||||
Reference in New Issue
Block a user