js中的页面验证码

function refreshCaptcha() {
    fetch('/api/get-captcha')
        .then(response => response.json())
        .then(data => {
            document.getElementById('captcha-image').src = data.imageUrl;
            // 更新存储在隐藏字段中的验证码ID或密钥
            document.getElementById('captcha-key').value = data.key;
        })
        .catch(error => console.error('Error refreshing captcha:', error));
}

<img id="captcha-image" src="/api/get-captcha" alt="验证码">
<input type="text" id="captcha-input" placeholder="请输入验证码">
<button onclick="verifyCaptcha()">提交</button>

<script>
function verifyCaptcha() {
    const userInput = document.getElementById('captcha-input').value;
    fetch('/api/verify-captcha', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ captcha: userInput })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('验证成功！');
        } else {
            alert('验证码错误，请重试。');
            refreshCaptcha();
        }
    });
}

function refreshCaptcha() {
    document.getElementById('captcha-image').src = '/api/get-captcha?t=' + Date.now();
}
</script>

const express = require('express');
const session = require('express-session');
const app = express();

app.use(express.json());
app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true
}));

let currentCaptcha = '';

app.get('/api/get-captcha', (req, res) => {
    // 生成随机验证码
    currentCaptcha = generateRandomCaptcha(6);
    req.session.captcha = currentCaptcha;
    // 返回验证码图片（此处简化为返回文本，实际应返回图片）
    res.json({ imageUrl: `data:image/png;base64,${generateCaptchaImage(currentCaptcha)}` });
});

app.post('/api/verify-captcha', (req, res) => {
    const userInput = req.body.captcha;
    if (userInput === req.session.captcha) {
        res.json({ success: true });
    } else {
        res.json({ success: false });
    }
});

function generateRandomCaptcha(length) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for(let i=0; i<length; i++) result += chars.charAt(Math.floor(Math.random()*chars.length));
    return result;
}

function generateCaptchaImage(text) {
    // 实际实现应生成验证码图片并返回Base64编码
    return '...'; // 示例省略
}

app.listen(3000, () => console.log('Server running on port 3000'));