js登录验证码实现
验证码生成与验证实现
生成验证码
在服务端使用canvas或第三方库（如svg-captcha）生成图形验证码，将验证码文本存入Session或Redis。
// 使用svg-captcha示例
const svgCaptcha = require('svg-captcha');
const captcha = svgCaptcha.create();
req.session.captcha = captcha.text; // 存储验证码文本
res.type('svg');
res.send(captcha.data);前端展示
通过接口获取验证码图片并渲染到页面，通常使用<img>标签动态加载。
<img src="/api/captcha" onclick="this.src='/api/captcha?t='+Date.now()">验证码校验逻辑
服务端校验 在登录接口中比对用户输入与Session存储的验证码，需注意大小写敏感性和时效性。
app.post('/login', (req, res) => {
if (req.body.captcha !== req.session.captcha) {
return res.status(400).json({ error: '验证码错误' });
}
// 验证通过后清除Session中的验证码
delete req.session.captcha;
});安全增强措施
频率限制 使用中间件限制验证码请求频率，防止暴力破解。
const rateLimit = require('express-rate-limit');
const limiter = rateLimit({
windowMs: 15 * 60 * 1000,
max: 50
});
app.use('/api/captcha', limiter);混淆处理
在验证码图片中添加干扰线、噪点或扭曲变形，可使用canvas的绘图API实现。
ctx.strokeStyle = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
ctx.beginPath();
ctx.moveTo(0, Math.random()*height);
ctx.lineTo(width, Math.random()*height);
ctx.stroke();客户端交互优化
自动刷新机制 当验证码输入错误时，前端自动刷新验证码图片。
function refreshCaptcha() {
document.getElementById('captcha-img').src = '/api/captcha?t=' + Date.now();
}输入校验 在提交前进行本地格式校验，如长度和字符类型检查。
const captcha = document.getElementById('captcha-input').value;
if (!/^[A-Za-z0-9]{4}$/.test(captcha)) {
alert('验证码格式错误');
return false;
}
