From 1d65e97b041052ad8efb33bda336be60a812b641 Mon Sep 17 00:00:00 2001 From: yuyx <237899745@qq.com> Date: Fri, 28 Nov 2025 13:11:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B3=A8=E5=86=8C=E3=80=81=E9=87=8D?= =?UTF-8?q?=E7=BD=AE=E5=AF=86=E7=A0=81=E3=80=81=E9=87=8D=E5=8F=91=E9=AA=8C?= =?UTF-8?q?=E8=AF=81=E9=82=AE=E4=BB=B6=E6=B7=BB=E5=8A=A0=E9=AA=8C=E8=AF=81?= =?UTF-8?q?=E7=A0=81=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 后端修改： - 添加通用验证码验证函数 verifyCaptcha() - /api/register 接口添加验证码验证 - /api/password/forgot 接口添加验证码验证 - /api/resend-verification 接口添加验证码验证 前端修改： - 注册表单添加验证码输入框和图片 - 忘记密码模态框添加验证码 - 重发验证邮件区域添加验证码输入 - 添加各表单的验证码刷新方法 - 提交失败后自动刷新验证码 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- backend/server.js | 76 ++++++++++++++++++++++++++++++++++++++++++++--- frontend/app.html | 29 +++++++++++++++--- frontend/app.js | 57 +++++++++++++++++++++++++++++++---- 3 files changed, 148 insertions(+), 14 deletions(-) diff --git a/backend/server.js b/backend/server.js index d4041d7..800303d 100644 --- a/backend/server.js +++ b/backend/server.js @@ -1100,6 +1100,42 @@ function checkMailRateLimit(req, type = 'mail') { } } +// ===== 验证码验证辅助函数 ===== + +/** + * 验证验证码 + * @param {Object} req - 请求对象 + * @param {string} captcha - 用户输入的验证码 + * @returns {{valid: boolean, message?: string}} 验证结果 + */ +function verifyCaptcha(req, captcha) { + if (!captcha) { + return { valid: false, message: '请输入验证码' }; + } + + const sessionCaptcha = req.session.captcha; + const captchaTime = req.session.captchaTime; + + if (!sessionCaptcha || !captchaTime) { + return { valid: false, message: '验证码已过期，请刷新验证码' }; + } + + // 验证码有效期5分钟 + if (Date.now() - captchaTime > 5 * 60 * 1000) { + return { valid: false, message: '验证码已过期，请刷新验证码' }; + } + + if (captcha.toLowerCase() !== sessionCaptcha) { + return { valid: false, message: '验证码错误' }; + } + + // 验证通过后清除session中的验证码 + delete req.session.captcha; + delete req.session.captchaTime; + + return { valid: true }; +} + // ===== 公开API ===== // 健康检查 @@ -1164,7 +1200,8 @@ app.post('/api/register', .isLength({ min: 3, max: 20 }).withMessage('用户名长度3-20个字符') .matches(USERNAME_REGEX).withMessage('用户名仅允许中英文、数字、下划线、点和短横线'), body('email').isEmail().withMessage('邮箱格式不正确'), - body('password').isLength({ min: 6 }).withMessage('密码至少6个字符') + body('password').isLength({ min: 6 }).withMessage('密码至少6个字符'), + body('captcha').notEmpty().withMessage('请输入验证码') ], async (req, res) => { const errors = validationResult(req); @@ -1176,6 +1213,16 @@ app.post('/api/register', } try { + // 验证验证码 + const { captcha } = req.body; + const captchaResult = verifyCaptcha(req, captcha); + if (!captchaResult.valid) { + return res.status(400).json({ + success: false, + message: captchaResult.message + }); + } + checkMailRateLimit(req, 'verify'); const { username, email, password } = req.body; @@ -1263,7 +1310,8 @@ app.post('/api/resend-verification', [ body('username') .optional({ checkFalsy: true }) .isLength({ min: 3 }).withMessage('用户名格式不正确') - .matches(USERNAME_REGEX).withMessage('用户名仅允许中英文、数字、下划线、点和短横线') + .matches(USERNAME_REGEX).withMessage('用户名仅允许中英文、数字、下划线、点和短横线'), + body('captcha').notEmpty().withMessage('请输入验证码') ], async (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { @@ -1271,6 +1319,16 @@ app.post('/api/resend-verification', [ } try { + // 验证验证码 + const { captcha } = req.body; + const captchaResult = verifyCaptcha(req, captcha); + if (!captchaResult.valid) { + return res.status(400).json({ + success: false, + message: captchaResult.message + }); + } + checkMailRateLimit(req, 'verify'); const { email, username } = req.body; @@ -1332,15 +1390,25 @@ app.get('/api/verify-email', async (req, res) => { // 发起密码重置（邮件） app.post('/api/password/forgot', [ - body('email').isEmail().withMessage('邮箱格式不正确') + body('email').isEmail().withMessage('邮箱格式不正确'), + body('captcha').notEmpty().withMessage('请输入验证码') ], async (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { return res.status(400).json({ success: false, errors: errors.array() }); } - const { email } = req.body; + const { email, captcha } = req.body; try { + // 验证验证码 + const captchaResult = verifyCaptcha(req, captcha); + if (!captchaResult.valid) { + return res.status(400).json({ + success: false, + message: captchaResult.message + }); + } + checkMailRateLimit(req, 'pwd_forgot'); const smtpConfig = getSmtpConfig(); diff --git a/frontend/app.html b/frontend/app.html index 78fbc48..7410130 100644 --- a/frontend/app.html +++ b/frontend/app.html @@ -1038,7 +1038,14 @@ 点击图片刷新验证码
- 邮箱未验证？点击重发激活邮件 +
邮箱未验证？请输入验证码后重发激活邮件
+
+ + + +
@@ -1049,7 +1056,7 @@ 登录 -
+
@@ -1062,6 +1069,13 @@
+
+ +
+ + +
+
@@ -2590,7 +2604,7 @@
-
+

忘记密码 - 邮箱重置

请输入注册邮箱，我们会发送重置链接到您的邮箱 @@ -2599,11 +2613,18 @@

+
+ +
+ + +
+
-
diff --git a/frontend/app.js b/frontend/app.js index 42d8d88..fe454d5 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -29,8 +29,10 @@ createApp({ registerForm: { username: '', email: '', - password: '' + password: '', + captcha: '' }, + registerCaptchaUrl: '', // 验证码相关 showCaptcha: false, @@ -125,8 +127,10 @@ createApp({ // 忘记密码 showForgotPasswordModal: false, forgotPasswordForm: { - email: '' + email: '', + captcha: '' }, + forgotPasswordCaptchaUrl: '', showResetPasswordModal: false, resetPasswordForm: { token: '', @@ -134,6 +138,8 @@ createApp({ }, showResendVerify: false, resendVerifyEmail: '', + resendVerifyCaptcha: '', + resendVerifyCaptchaUrl: '', // 系统设置 systemSettings: { @@ -604,18 +610,37 @@ handleDragLeave(e) { } }, - // 刷新验证码 + // 刷新验证码（登录） refreshCaptcha() { this.captchaUrl = `${this.apiBase}/api/captcha?t=${Date.now()}`; }, + // 刷新注册验证码 + refreshRegisterCaptcha() { + this.registerCaptchaUrl = `${this.apiBase}/api/captcha?t=${Date.now()}`; + }, + + // 刷新忘记密码验证码 + refreshForgotPasswordCaptcha() { + this.forgotPasswordCaptchaUrl = `${this.apiBase}/api/captcha?t=${Date.now()}`; + }, + + // 刷新重发验证邮件验证码 + refreshResendVerifyCaptcha() { + this.resendVerifyCaptchaUrl = `${this.apiBase}/api/captcha?t=${Date.now()}`; + }, + async resendVerification() { if (!this.resendVerifyEmail) { this.showToast('error', '错误', '请输入邮箱或用户名后再重试'); return; } + if (!this.resendVerifyCaptcha) { + this.showToast('error', '错误', '请输入验证码'); + return; + } try { - const payload = {}; + const payload = { captcha: this.resendVerifyCaptcha }; if (this.resendVerifyEmail.includes('@')) { payload.email = this.resendVerifyEmail; } else { @@ -624,10 +649,17 @@ handleDragLeave(e) { const response = await axios.post(`${this.apiBase}/api/resend-verification`, payload); if (response.data.success) { this.showToast('success', '成功', '验证邮件已发送，请查收'); + this.showResendVerify = false; + this.resendVerifyEmail = ''; + this.resendVerifyCaptcha = ''; + this.resendVerifyCaptchaUrl = ''; } } catch (error) { console.error('重发验证邮件失败:', error); this.showToast('error', '错误', error.response?.data?.message || '发送失败'); + // 刷新验证码 + this.resendVerifyCaptcha = ''; + this.refreshResendVerifyCaptcha(); } }, @@ -661,8 +693,10 @@ handleDragLeave(e) { this.registerForm = { username: '', email: '', - password: '' + password: '', + captcha: '' }; + this.registerCaptchaUrl = ''; } } catch (error) { const errorData = error.response?.data; @@ -671,6 +705,9 @@ handleDragLeave(e) { } else { this.errorMessage = errorData?.message || '注册失败'; } + // 刷新验证码 + this.registerForm.captcha = ''; + this.refreshRegisterCaptcha(); } }, @@ -1881,6 +1918,10 @@ handleDragLeave(e) { this.showToast('error', '错误', '请输入注册邮箱'); return; } + if (!this.forgotPasswordForm.captcha) { + this.showToast('error', '错误', '请输入验证码'); + return; + } try { const response = await axios.post( @@ -1891,11 +1932,15 @@ handleDragLeave(e) { if (response.data.success) { this.showToast('success', '成功', '如果邮箱存在，将收到重置邮件'); this.showForgotPasswordModal = false; - this.forgotPasswordForm = { email: '' }; + this.forgotPasswordForm = { email: '', captcha: '' }; + this.forgotPasswordCaptchaUrl = ''; } } catch (error) { console.error('提交密码重置请求失败:', error); this.showToast('error', '错误', error.response?.data?.message || '提交失败'); + // 刷新验证码 + this.forgotPasswordForm.captcha = ''; + this.refreshForgotPasswordCaptcha(); } },