feat: 添加邮件功能第二阶段 - 注册邮箱验证

实现注册时的邮箱验证功能： - 修改注册API支持邮箱验证流程 - 新增邮箱验证API (/api/verify-email/<token>) - 新增重发验证邮件API (/api/resend-verify-email) - 新增邮箱验证状态查询API (/api/email/verify-status) 新增文件： - templates/email/register.html - 注册验证邮件模板 - templates/verify_success.html - 验证成功页面 - templates/verify_failed.html - 验证失败页面修改文件： - email_service.py - 添加发送注册验证邮件函数 - app.py - 添加邮箱验证相关API - database.py - 添加get_user_by_email函数 - app_config.py - 添加BASE_URL配置 - templates/register.html - 支持邮箱必填切换 - templates/login.html - 添加重发验证邮件功能 - templates/admin.html - 添加注册验证开关和BASE_URL设置 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-11 21:51:07 +08:00
parent 966572cc94
commit de8edcb3a6
10 changed files with 794 additions and 20 deletions
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -1215,7 +1215,7 @@
                            开启后，系统将支持邮箱验证、密码重置邮件、任务完成通知等功能
                        </div>
                    </div>
-                    <div class="form-group" style="margin-bottom: 0;">
+                    <div class="form-group" style="margin-bottom: 10px;">
                        <label style="display: flex; align-items: center; gap: 10px;">
                            <input type="checkbox" id="failoverEnabled" onchange="updateEmailSettings()" style="width: auto; max-width: none;">
                            启用故障转移
@@ -1224,6 +1224,22 @@
                            开启后，主SMTP配置发送失败时自动切换到备用配置
                        </div>
                    </div>
+                    <div class="form-group" style="margin-bottom: 10px;">
+                        <label style="display: flex; align-items: center; gap: 10px;">
+                            <input type="checkbox" id="registerVerifyEnabled" onchange="updateEmailSettings()" style="width: auto; max-width: none;">
+                            启用注册邮箱验证
+                        </label>
+                        <div style="font-size: 12px; color: #666; margin-top: 5px;">
+                            开启后，新用户注册需通过邮箱验证才能激活账号（优先级高于自动审核）
+                        </div>
+                    </div>
+                    <div class="form-group" style="margin-bottom: 0;">
+                        <label style="display: block; margin-bottom: 5px;">网站基础URL</label>
+                        <input type="text" id="baseUrl" placeholder="例如: https://example.com" style="width: 100%;" onblur="updateEmailSettings()">
+                        <div style="font-size: 12px; color: #666; margin-top: 5px;">
+                            用于生成邮件中的验证链接，留空则使用默认配置
+                        </div>
+                    </div>
                </div>

                <!-- SMTP配置列表 -->
@@ -2780,6 +2796,8 @@
                    const data = await response.json();
                    document.getElementById('emailEnabled').checked = data.enabled;
                    document.getElementById('failoverEnabled').checked = data.failover_enabled;
+                    document.getElementById('registerVerifyEnabled').checked = data.register_verify_enabled || false;
+                    document.getElementById('baseUrl').value = data.base_url || '';
                }
            } catch (error) {
                console.error('加载邮件设置失败:', error);
@@ -2794,7 +2812,9 @@
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        enabled: document.getElementById('emailEnabled').checked,
-                        failover_enabled: document.getElementById('failoverEnabled').checked
+                        failover_enabled: document.getElementById('failoverEnabled').checked,
+                        register_verify_enabled: document.getElementById('registerVerifyEnabled').checked,
+                        base_url: document.getElementById('baseUrl').value.trim()
                    })
                });

--- a/templates/email/register.html
+++ b/templates/email/register.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body style="margin: 0; padding: 0; font-family: 'Microsoft YaHei', Arial, sans-serif; background-color: #f5f5f5;">
+    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f5f5f5; padding: 30px 0;">
+        <tr>
+            <td align="center">
+                <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
+                    <!-- 头部 -->
+                    <tr>
+                        <td style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; border-radius: 10px 10px 0 0; text-align: center;">
+                            <h1 style="color: #ffffff; margin: 0; font-size: 24px;">知识管理平台</h1>
+                            <p style="color: rgba(255,255,255,0.9); margin: 10px 0 0 0; font-size: 14px;">账号注册验证</p>
+                        </td>
+                    </tr>
+
+                    <!-- 内容 -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <p style="color: #333; font-size: 16px; margin: 0 0 20px 0;">
+                                您好，<strong>{{ username }}</strong>！
+                            </p>
+                            <p style="color: #666; font-size: 14px; line-height: 1.8; margin: 0 0 25px 0;">
+                                感谢您注册知识管理平台。请点击下方按钮验证您的邮箱地址，完成账号激活。
+                            </p>
+
+                            <!-- 验证按钮 -->
+                            <table width="100%" cellpadding="0" cellspacing="0">
+                                <tr>
+                                    <td align="center" style="padding: 20px 0;">
+                                        <a href="{{ verify_url }}" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 15px 40px; border-radius: 30px; font-size: 16px; font-weight: bold;">
+                                            验证邮箱
+                                        </a>
+                                    </td>
+                                </tr>
+                            </table>
+
+                            <p style="color: #999; font-size: 12px; line-height: 1.8; margin: 25px 0 0 0;">
+                                如果按钮无法点击，请复制以下链接到浏览器打开：
+                            </p>
+                            <p style="color: #667eea; font-size: 12px; word-break: break-all; background: #f8f9fa; padding: 15px; border-radius: 5px; margin: 10px 0;">
+                                {{ verify_url }}
+                            </p>
+
+                            <div style="background: #fff3e0; border-left: 4px solid #ff9800; padding: 15px; margin: 25px 0; border-radius: 0 5px 5px 0;">
+                                <p style="color: #e65100; font-size: 13px; margin: 0;">
+                                    <strong>注意：</strong>此链接有效期为 24 小时，过期后需要重新注册。
+                                </p>
+                            </div>
+
+                            <p style="color: #999; font-size: 13px; margin: 20px 0 0 0;">
+                                如果您没有注册过账号，请忽略此邮件。
+                            </p>
+                        </td>
+                    </tr>
+
+                    <!-- 底部 -->
+                    <tr>
+                        <td style="background: #f8f9fa; padding: 20px 30px; border-radius: 0 0 10px 10px; text-align: center;">
+                            <p style="color: #999; font-size: 12px; margin: 0;">
+                                此邮件由系统自动发送，请勿直接回复。
+                            </p>
+                            <p style="color: #ccc; font-size: 11px; margin: 10px 0 0 0;">
+                                &copy; 知识管理平台
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/templates/login.html
+++ b/templates/login.html
@@ -189,7 +189,10 @@
                        <button type="button" class="captcha-refresh" onclick="refreshCaptcha()">🔄</button>
                    </div>
                </div>
-                <div class="forgot-link"><a href="#" onclick="showForgotPassword(event)">忘记密码？</a></div>
+                <div class="forgot-link">
+                    <a href="#" onclick="showForgotPassword(event)">忘记密码？</a>
+                    <span id="resendVerifyLink" style="display: none; margin-left: 16px;"><a href="#" onclick="showResendVerify(event)">重发验证邮件</a></span>
+                </div>
                <button type="submit" class="btn-login">登 录</button>
            </form>
            <div class="register-link">还没有账号？ <a href="/register">立即注册</a></div>
@@ -213,9 +216,49 @@
            </div>
        </div>
    </div>
+    <!-- 重发验证邮件弹窗 -->
+    <div id="resendVerifyModal" class="modal-overlay" onclick="if(event.target===this)closeResendVerify()">
+        <div class="modal">
+            <div class="modal-header"><h2>重发验证邮件</h2><p>输入注册时使用的邮箱</p></div>
+            <div class="modal-body">
+                <div id="resendErrorMessage" class="message error"></div>
+                <div id="resendSuccessMessage" class="message success"></div>
+                <form id="resendVerifyForm" onsubmit="handleResendVerify(event)">
+                    <div class="form-group"><label>邮箱</label><input type="email" id="resendEmail" placeholder="请输入注册邮箱" required></div>
+                    <div class="form-group">
+                        <label>验证码</label>
+                        <div class="captcha-row">
+                            <input type="text" id="resendCaptcha" placeholder="请输入验证码" required>
+                            <img id="resendCaptchaImage" src="" alt="验证码" style="height: 36px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;" onclick="refreshResendCaptcha()" title="点击刷新">
+                            <button type="button" class="captcha-refresh" onclick="refreshResendCaptcha()">🔄</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn-secondary" onclick="closeResendVerify()">取消</button>
+                <button type="button" class="btn-primary" onclick="document.getElementById('resendVerifyForm').dispatchEvent(new Event('submit'))">发送验证邮件</button>
+            </div>
+        </div>
+    </div>
    <script>
        let captchaSession = '';
+        let resendCaptchaSession = '';
        let needCaptcha = false;
+
+        // 页面加载时检查邮箱验证是否启用
+        window.onload = async function() {
+            try {
+                const resp = await fetch('/api/email/verify-status');
+                const data = await resp.json();
+                if (data.register_verify_enabled) {
+                    document.getElementById('resendVerifyLink').style.display = 'inline';
+                }
+            } catch (e) {
+                console.log('获取邮箱验证状态失败', e);
+            }
+        };
+
        async function handleLogin(event) {
            event.preventDefault();
            const username = document.getElementById('username').value.trim();
@@ -256,7 +299,61 @@
        }
        async function generateCaptcha() { try { const response = await fetch('/api/generate_captcha', { method: 'POST', headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.session_id && data.captcha_image) { captchaSession = data.session_id; document.getElementById('captchaImage').src = data.captcha_image; } } catch (error) { console.error('生成验证码失败:', error); } }
        async function refreshCaptcha() { await generateCaptcha(); document.getElementById('captcha').value = ''; }
-        document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeForgotPassword(); });
+
+        // 重发验证邮件相关函数
+        async function showResendVerify(event) {
+            event.preventDefault();
+            document.getElementById('resendVerifyModal').classList.add('active');
+            await generateResendCaptcha();
+        }
+        function closeResendVerify() {
+            document.getElementById('resendVerifyModal').classList.remove('active');
+            document.getElementById('resendVerifyForm').reset();
+            document.getElementById('resendErrorMessage').style.display = 'none';
+            document.getElementById('resendSuccessMessage').style.display = 'none';
+        }
+        async function generateResendCaptcha() {
+            try {
+                const response = await fetch('/api/generate_captcha', { method: 'POST', headers: { 'Content-Type': 'application/json' } });
+                const data = await response.json();
+                if (data.session_id && data.captcha_image) {
+                    resendCaptchaSession = data.session_id;
+                    document.getElementById('resendCaptchaImage').src = data.captcha_image;
+                }
+            } catch (error) { console.error('生成验证码失败:', error); }
+        }
+        async function refreshResendCaptcha() { await generateResendCaptcha(); document.getElementById('resendCaptcha').value = ''; }
+        async function handleResendVerify(event) {
+            event.preventDefault();
+            const email = document.getElementById('resendEmail').value.trim();
+            const captcha = document.getElementById('resendCaptcha').value.trim();
+            const errorDiv = document.getElementById('resendErrorMessage');
+            const successDiv = document.getElementById('resendSuccessMessage');
+            errorDiv.style.display = 'none'; successDiv.style.display = 'none';
+
+            if (!email) { errorDiv.textContent = '请输入邮箱'; errorDiv.style.display = 'block'; return; }
+            if (!captcha) { errorDiv.textContent = '请输入验证码'; errorDiv.style.display = 'block'; return; }
+
+            try {
+                const response = await fetch('/api/resend-verify-email', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email, captcha_session: resendCaptchaSession, captcha })
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    successDiv.textContent = data.message || '验证邮件已发送，请查收';
+                    successDiv.style.display = 'block';
+                    setTimeout(closeResendVerify, 2000);
+                } else {
+                    errorDiv.textContent = data.error || '发送失败';
+                    errorDiv.style.display = 'block';
+                    await refreshResendCaptcha();
+                }
+            } catch (error) { errorDiv.textContent = '网络错误'; errorDiv.style.display = 'block'; }
+        }
+
+        document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { closeForgotPassword(); closeResendVerify(); } });
    </script>
 </body>
 </html>
--- a/templates/register.html
+++ b/templates/register.html
@@ -173,9 +173,9 @@
            </div>

            <div class="form-group">
-                <label for="email">邮箱</label>
+                <label for="email">邮箱 <span id="emailRequired" style="color: #d63031; display: none;">*</span></label>
                <input type="email" id="email" name="email">
-                <small>选填，用于接收审核通知</small>
+                <small id="emailHint">选填，用于接收审核通知</small>
            </div>
            <div class="form-group">
                <label for="captcha">验证码</label>
@@ -196,7 +196,29 @@

    <script>
        let captchaSession = '';
-        window.onload = function() { generateCaptcha(); };
+        let emailVerifyEnabled = false;
+
+        window.onload = async function() {
+            await generateCaptcha();
+            await checkEmailVerifyStatus();
+        };
+
+        async function checkEmailVerifyStatus() {
+            try {
+                const resp = await fetch('/api/email/verify-status');
+                const data = await resp.json();
+                emailVerifyEnabled = data.register_verify_enabled;
+
+                if (emailVerifyEnabled) {
+                    document.getElementById('emailRequired').style.display = 'inline';
+                    document.getElementById('email').required = true;
+                    document.getElementById('emailHint').textContent = '必填，用于账号验证';
+                }
+            } catch (e) {
+                console.log('获取邮箱验证状态失败', e);
+            }
+        }
+
        async function handleRegister(event) {
            event.preventDefault();

@@ -229,6 +251,20 @@
                return;
            }

+            // 邮箱验证启用时必填
+            if (emailVerifyEnabled && !email) {
+                errorDiv.textContent = '请填写邮箱地址用于账号验证';
+                errorDiv.style.display = 'block';
+                return;
+            }
+
+            // 邮箱格式验证
+            if (email && !email.includes('@')) {
+                errorDiv.textContent = '邮箱格式不正确';
+                errorDiv.style.display = 'block';
+                return;
+            }
+
            try {
                const response = await fetch('/api/register', {
                    method: 'POST',
@@ -241,7 +277,12 @@
                const data = await response.json();

                if (response.ok) {
-                    successDiv.textContent = data.message || '注册成功，请等待管理员审核';
+                    // 根据是否需要邮箱验证显示不同的消息
+                    if (data.need_verify) {
+                        successDiv.innerHTML = data.message + '<br><small style="color: #666;">请检查您的邮箱（包括垃圾邮件文件夹）</small>';
+                    } else {
+                        successDiv.textContent = data.message || '注册成功，请等待管理员审核';
+                    }
                    successDiv.style.display = 'block';

                    // 清空表单
@@ -254,12 +295,14 @@
                } else {
                    errorDiv.textContent = data.error || '注册失败';
                    errorDiv.style.display = 'block';
+                    refreshCaptcha();
                }
            } catch (error) {
                errorDiv.textContent = '网络错误，请稍后重试';
                errorDiv.style.display = 'block';
            }
        }
+
        async function generateCaptcha() {
            const resp = await fetch('/api/generate_captcha', {method: 'POST', headers: {'Content-Type': 'application/json'}});
            const data = await resp.json();
@@ -268,6 +311,7 @@
                document.getElementById('captchaImage').src = data.captcha_image;
            }
        }
+
        async function refreshCaptcha() { await generateCaptcha(); document.getElementById('captcha').value = ''; }
    </script>
 </body>
--- a/templates/verify_failed.html
+++ b/templates/verify_failed.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>验证失败 - 知识管理平台</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Microsoft YaHei', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .card {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+            padding: 50px 40px;
+            text-align: center;
+            max-width: 450px;
+            width: 100%;
+        }
+        .icon {
+            width: 80px;
+            height: 80px;
+            background: linear-gradient(135deg, #e74c3c, #c0392b);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 25px;
+        }
+        .icon svg {
+            width: 40px;
+            height: 40px;
+            fill: white;
+        }
+        h1 {
+            color: #e74c3c;
+            font-size: 28px;
+            margin-bottom: 15px;
+        }
+        p {
+            color: #666;
+            font-size: 16px;
+            line-height: 1.8;
+            margin-bottom: 20px;
+        }
+        .error-reason {
+            background: #fff5f5;
+            border: 1px solid #fed7d7;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 30px;
+            color: #c53030;
+            font-size: 14px;
+        }
+        .btn {
+            display: inline-block;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            text-decoration: none;
+            padding: 15px 35px;
+            border-radius: 30px;
+            font-size: 16px;
+            font-weight: bold;
+            margin: 5px;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+        }
+        .btn-secondary {
+            background: #f0f0f0;
+            color: #666;
+        }
+        .btn-secondary:hover {
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+        }
+        .actions {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <div class="icon">
+            <svg viewBox="0 0 24 24">
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+            </svg>
+        </div>
+        <h1>验证失败</h1>
+        <p>
+            很抱歉，邮箱验证未能成功。
+        </p>
+        <div class="error-reason">
+            {{ error_message }}
+        </div>
+        <div class="actions">
+            <a href="/register" class="btn">重新注册</a>
+            <a href="/login" class="btn btn-secondary">返回登录</a>
+        </div>
+    </div>
+</body>
+</html>
--- a/templates/verify_success.html
+++ b/templates/verify_success.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>邮箱验证成功 - 知识管理平台</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Microsoft YaHei', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .card {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+            padding: 50px 40px;
+            text-align: center;
+            max-width: 450px;
+            width: 100%;
+        }
+        .icon {
+            width: 80px;
+            height: 80px;
+            background: linear-gradient(135deg, #27ae60, #2ecc71);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 25px;
+        }
+        .icon svg {
+            width: 40px;
+            height: 40px;
+            fill: white;
+        }
+        h1 {
+            color: #27ae60;
+            font-size: 28px;
+            margin-bottom: 15px;
+        }
+        p {
+            color: #666;
+            font-size: 16px;
+            line-height: 1.8;
+            margin-bottom: 30px;
+        }
+        .btn {
+            display: inline-block;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            text-decoration: none;
+            padding: 15px 40px;
+            border-radius: 30px;
+            font-size: 16px;
+            font-weight: bold;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+        }
+        .countdown {
+            color: #999;
+            font-size: 14px;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <div class="icon">
+            <svg viewBox="0 0 24 24">
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+            </svg>
+        </div>
+        <h1>验证成功</h1>
+        <p>
+            您的邮箱已验证成功！<br>
+            账号已激活，现在可以登录使用了。
+        </p>
+        <a href="/login" class="btn">立即登录</a>
+        <p class="countdown">
+            <span id="seconds">5</span> 秒后自动跳转到登录页面...
+        </p>
+    </div>
+
+    <script>
+        let seconds = 5;
+        const countdown = setInterval(() => {
+            seconds--;
+            document.getElementById('seconds').textContent = seconds;
+            if (seconds <= 0) {
+                clearInterval(countdown);
+                window.location.href = '/login';
+            }
+        }, 1000);
+    </script>
+</body>
+</html>