扫码登录，获取cookies

frontend/templates/add_account.html

@@ -0,0 +1,444 @@
+{% extends "base.html" %}
+
+{% block title %}Add Account - Weibo-HotSign{% endblock %}
+
+{% block extra_css %}
+<style>
+    .tab-container {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 20px;
+        border-bottom: 2px solid #f0f0f0;
+    }
+
+    .tab {
+        padding: 10px 20px;
+        cursor: pointer;
+        border: none;
+        background: none;
+        font-size: 16px;
+        color: #666;
+        transition: all 0.3s;
+    }
+
+    .tab.active {
+        color: #6366f1;
+        border-bottom: 2px solid #6366f1;
+        margin-bottom: -2px;
+    }
+
+    .tab-content {
+        display: none;
+    }
+
+    .tab-content.active {
+        display: block;
+    }
+
+    .help-text {
+        background: #f8f9fa;
+        padding: 15px;
+        border-radius: 4px;
+        margin-top: 20px;
+        font-size: 14px;
+        color: #666;
+    }
+
+    .help-text h4 {
+        margin-top: 0;
+        color: #333;
+        font-size: 16px;
+    }
+
+    .help-text ol, .help-text ul {
+        margin: 10px 0;
+        padding-left: 20px;
+    }
+
+    .help-text li {
+        margin: 8px 0;
+        line-height: 1.6;
+    }
+
+    .help-text code {
+        background: #e9ecef;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: monospace;
+        font-size: 13px;
+    }
+
+    .method-card {
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 20px;
+        margin-bottom: 15px;
+        transition: all 0.3s;
+    }
+
+    .method-card:hover {
+        border-color: #6366f1;
+        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
+    }
+
+    .method-title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 10px;
+    }
+
+    .method-badge {
+        display: inline-block;
+        padding: 4px 12px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 500;
+        margin-left: 10px;
+    }
+
+    .badge-recommended {
+        background: #d4edda;
+        color: #155724;
+    }
+
+    .warning-box {
+        background: #fff3cd;
+        border-left: 4px solid #ffc107;
+        padding: 15px;
+        margin: 20px 0;
+        border-radius: 4px;
+    }
+
+    .warning-box h4 {
+        color: #856404;
+        margin-top: 0;
+    }
+
+    .btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    pre {
+        background: #f8f9fa;
+        padding: 10px;
+        border-radius: 4px;
+        overflow-x: auto;
+        font-size: 13px;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div style="max-width: 800px; margin: 0 auto;">
+    <h1 style="margin-bottom: 30px;">Add Weibo Account</h1>
+
+    <div class="card">
+        <div class="tab-container">
+            <button class="tab active" onclick="switchTab('guide')">获取教程</button>
+            <button class="tab" onclick="switchTab('qrcode')">扫码添加</button>
+            <button class="tab" onclick="switchTab('manual')">手动添加</button>
+        </div>
+
+        <!-- 获取教程 Tab -->
+        <div id="guide-tab" class="tab-content active">
+            <h3 style="margin-bottom: 20px;">如何获取微博 Cookie</h3>
+
+            <div class="method-card">
+                <div class="method-title">
+                    方法一：使用浏览器开发者工具
+                    <span class="method-badge badge-recommended">推荐</span>
+                </div>
+                <div class="help-text">
+                    <ol>
+                        <li>在浏览器中打开 <a href="https://weibo.com" target="_blank">https://weibo.com</a> 并登录</li>
+                        <li>按 <code>F12</code> 打开开发者工具</li>
+                        <li>切换到 <code>Network</code> (网络) 标签</li>
+                        <li>刷新页面 (<code>F5</code>)</li>
+                        <li>在请求列表中点击任意一个请求（通常是第一个）</li>
+                        <li>在右侧找到 <code>Request Headers</code> (请求头)</li>
+                        <li>找到 <code>Cookie:</code> 字段，复制整行内容</li>
+                        <li>切换到"添加账号"标签页，粘贴 Cookie</li>
+                    </ol>
+                </div>
+            </div>
+
+            <div class="warning-box">
+                <h4>⚠️ 重要提示</h4>
+                <ul>
+                    <li>Cookie 包含你的登录凭证，请妥善保管</li>
+                    <li>不要在公共场合或不信任的网站输入 Cookie</li>
+                    <li>Cookie 会被加密存储在数据库中</li>
+                    <li>如果 Cookie 失效，系统会提示你更新</li>
+                    <li>建议使用小号或测试账号，避免主账号风险</li>
+                </ul>
+            </div>
+
+            <div style="text-align: center; margin-top: 30px;">
+                <button class="btn btn-primary" onclick="switchTab('qrcode')" style="margin-right: 10px;">
+                    使用扫码添加 →
+                </button>
+                <button class="btn btn-secondary" onclick="switchTab('manual')">
+                    手动添加账号 →
+                </button>
+            </div>
+        </div>
+
+        <!-- 扫码添加 Tab -->
+        <div id="qrcode-tab" class="tab-content">
+            <h3 style="margin-bottom: 20px;">微博扫码登录</h3>
+
+            <div class="method-card">
+                <div class="method-title">
+                    扫码快速添加账号
+                    <span class="method-badge badge-recommended">推荐</span>
+                </div>
+                <div class="help-text">
+                    <p style="font-size: 16px; margin-bottom: 15px;">
+                        使用微博网页版扫码登录，安全便捷地添加账号。
+                    </p>
+                    <h4>使用步骤：</h4>
+                    <ol>
+                        <li>点击下方"生成二维码"按钮</li>
+                        <li>使用手机微博 APP 扫描二维码</li>
+                        <li>在手机上点击"确认登录"</li>
+                        <li>等待页面自动完成账号添加</li>
+                    </ol>
+                </div>
+            </div>
+
+            <div id="qr-container" style="text-align: center; margin: 40px 0;">
+                <button id="generate-qr-btn" class="btn btn-primary" style="font-size: 18px; padding: 15px 40px;">
+                    📱 生成二维码
+                </button>
+                
+                <div id="qr-display" style="display: none; margin-top: 30px;">
+                    <div style="background: white; padding: 20px; border-radius: 8px; display: inline-block; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                        <img id="qr-image" src="" alt="QR Code" style="width: 256px; height: 256px; margin-bottom: 15px;">
+                        <p style="color: #666; margin: 0;">请使用微博 APP 扫描</p>
+                        <p id="qr-timer" style="color: #999; font-size: 14px; margin-top: 10px;">有效期: 3:00</p>
+                    </div>
+                    <div id="qr-status" style="margin-top: 20px; font-size: 16px; color: #666;">
+                        等待扫码...
+                    </div>
+                </div>
+            </div>
+
+            <div class="help-text">
+                <h4>💡 说明</h4>
+                <ul>
+                    <li>使用微博网页版扫码登录接口，无需注册开放平台应用</li>
+                    <li>扫码后自动获取登录 Cookie</li>
+                    <li>Cookie 会被加密存储在数据库中</li>
+                    <li>建议使用小号或测试账号，避免主账号风险</li>
+                </ul>
+            </div>
+
+            <div class="warning-box">
+                <h4>⚠️ 注意事项</h4>
+                <ul>
+                    <li>二维码有效期 3 分钟，过期后需重新生成</li>
+                    <li>扫码后请在手机上点击"确认登录"</li>
+                    <li>如果长时间未响应，请刷新页面重试</li>
+                </ul>
+            </div>
+        </div>
+
+        <!-- 添加账号 Tab -->
+        <div id="manual-tab" class="tab-content">
+            <h3 style="margin-bottom: 20px;">手动添加账号</h3>
+            <form method="POST">
+                <input type="hidden" name="login_method" value="manual">
+                
+                <div class="form-group">
+                    <label for="weibo_user_id">Weibo User ID</label>
+                    <input type="text" id="weibo_user_id" name="weibo_user_id" required placeholder="e.g., 123456789">
+                    <small style="color: #999; display: block; margin-top: 8px;">
+                        你的微博数字 ID，可以在个人主页 URL 中找到
+                    </small>
+                </div>
+
+                <div class="form-group">
+                    <label for="cookie">Cookie</label>
+                    <textarea id="cookie" name="cookie" required placeholder="Paste your Weibo cookie here" style="min-height: 150px;"></textarea>
+                    <small style="color: #999; display: block; margin-top: 8px;">
+                        粘贴从浏览器获取的完整 Cookie 字符串。Cookie 将被加密存储。
+                    </small>
+                </div>
+
+                <div class="form-group">
+                    <label for="remark">Remark (Optional)</label>
+                    <input type="text" id="remark" name="remark" placeholder="e.g., My main account">
+                    <small style="color: #999; display: block; margin-top: 8px;">
+                        给这个账号添加备注，方便识别
+                    </small>
+                </div>
+
+                <div class="btn-group">
+                    <button type="submit" class="btn btn-primary">Add Account</button>
+                    <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Cancel</a>
+                </div>
+            </form>
+
+            <div class="help-text" style="margin-top: 30px;">
+                <h4>💡 快速提示</h4>
+                <p><strong>Weibo User ID 在哪里找？</strong></p>
+                <ol>
+                    <li>登录微博后，点击右上角头像进入个人主页</li>
+                    <li>查看浏览器地址栏，格式类似：<code>https://weibo.com/u/1234567890</code></li>
+                    <li>最后的数字 <code>1234567890</code> 就是你的 User ID</li>
+                </ol>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function switchTab(tabName) {
+    // 更新 tab 按钮状态
+    document.querySelectorAll('.tab').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    event.target.classList.add('active');
+
+    // 更新 tab 内容显示
+    document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.remove('active');
+    });
+    document.getElementById(tabName + '-tab').classList.add('active');
+}
+
+// 微博扫码登录相关代码
+let pollInterval = null;
+let timerInterval = null;
+let currentQrid = null;
+let timeLeft = 180; // 3分钟
+
+document.addEventListener('DOMContentLoaded', function() {
+    const generateBtn = document.getElementById('generate-qr-btn');
+    if (generateBtn) {
+        generateBtn.addEventListener('click', async function() {
+            try {
+                // 生成二维码
+                const response = await fetch('/api/weibo/qrcode/generate', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+                const data = await response.json();
+                
+                if (!data.success) {
+                    alert('生成二维码失败: ' + (data.error || '未知错误'));
+                    return;
+                }
+                
+                currentQrid = data.qrid;
+                const qrImage = data.qr_image;
+                
+                // 显示二维码
+                document.getElementById('qr-image').src = qrImage;
+                document.getElementById('generate-qr-btn').style.display = 'none';
+                document.getElementById('qr-display').style.display = 'block';
+                document.getElementById('qr-status').textContent = '等待扫码...';
+                
+                // 开始倒计时
+                timeLeft = 180;
+                updateTimer();
+                timerInterval = setInterval(updateTimer, 1000);
+                
+                // 开始轮询状态
+                pollInterval = setInterval(checkQRStatus, 2000);
+                
+            } catch (error) {
+                alert('生成二维码失败: ' + error.message);
+            }
+        });
+    }
+});
+
+function updateTimer() {
+    if (timeLeft <= 0) {
+        clearInterval(timerInterval);
+        clearInterval(pollInterval);
+        document.getElementById('qr-status').innerHTML = '<span style="color: #dc3545;">二维码已过期，请重新生成</span>';
+        document.getElementById('generate-qr-btn').style.display = 'inline-block';
+        document.getElementById('qr-display').style.display = 'none';
+        return;
+    }
+    
+    const minutes = Math.floor(timeLeft / 60);
+    const seconds = timeLeft % 60;
+    document.getElementById('qr-timer').textContent = 
+        `有效期: ${minutes}:${seconds.toString().padStart(2, '0')}`;
+    timeLeft--;
+}
+
+async function checkQRStatus() {
+    try {
+        const response = await fetch(`/api/weibo/qrcode/check/${currentQrid}`);
+        const data = await response.json();
+        
+        if (data.status === 'waiting') {
+            document.getElementById('qr-status').textContent = '等待扫码...';
+        } else if (data.status === 'scanned') {
+            document.getElementById('qr-status').innerHTML = 
+                '<span style="color: #ffc107;">✓ 已扫码，请在手机上确认登录</span>';
+        } else if (data.status === 'success') {
+            // 扫码成功
+            clearInterval(pollInterval);
+            clearInterval(timerInterval);
+            
+            document.getElementById('qr-status').innerHTML = 
+                '<span style="color: #28a745;">✓ 登录成功！正在添加账号...</span>';
+            
+            // 添加账号
+            const addResponse = await fetch('/api/weibo/qrcode/add-account', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ qrid: currentQrid })
+            });
+            
+            const addResult = await addResponse.json();
+            
+            if (addResult.success) {
+                document.getElementById('qr-status').innerHTML = 
+                    '<span style="color: #28a745;">✓ 账号添加成功！正在跳转...</span>';
+                setTimeout(() => {
+                    window.location.href = '/dashboard';
+                }, 1500);
+            } else {
+                document.getElementById('qr-status').innerHTML = 
+                    '<span style="color: #dc3545;">添加账号失败: ' + addResult.message + '</span>';
+            }
+            
+        } else if (data.status === 'expired') {
+            clearInterval(pollInterval);
+            clearInterval(timerInterval);
+            document.getElementById('qr-status').innerHTML = 
+                '<span style="color: #dc3545;">二维码已过期，请重新生成</span>';
+            document.getElementById('generate-qr-btn').style.display = 'inline-block';
+            document.getElementById('qr-display').style.display = 'none';
+        } else if (data.status === 'cancelled') {
+            clearInterval(pollInterval);
+            clearInterval(timerInterval);
+            document.getElementById('qr-status').innerHTML = 
+                '<span style="color: #dc3545;">已取消登录</span>';
+            document.getElementById('generate-qr-btn').style.display = 'inline-block';
+            document.getElementById('qr-display').style.display = 'none';
+        } else if (data.status === 'error') {
+            clearInterval(pollInterval);
+            clearInterval(timerInterval);
+            document.getElementById('qr-status').innerHTML = 
+                '<span style="color: #dc3545;">错误: ' + (data.error || '未知错误') + '</span>';
+        }
+        
+    } catch (error) {
+        console.error('检查二维码状态失败:', error);
+    }
+}
+</script>
+{% endblock %}