上海信息公司做网站,单页面网站 seo,wordpress 商成,一个网站的页头大概做多大文章目录 Node.js验证码#xff1a;从生成到验证的趣味之旅#x1f4dc; 引言#xff1a;为什么需要验证码#xff1f;1. 验证码的基本原理 #x1f9e0;验证码工作流程示意图 2. 技术栈准备 #x1f6e0;️3. 验证码生成详解 #x1f3a8;3.1 生成SVG验证码3.2 转换为P… 文章目录 Node.js验证码从生成到验证的趣味之旅 引言为什么需要验证码1. 验证码的基本原理 验证码工作流程示意图 2. 技术栈准备 ️3. 验证码生成详解 3.1 生成SVG验证码3.2 转换为PNG格式3.3 存储验证码信息 4. 验证码验证流程 4.1 验证步骤分解4.2 关键验证代码4.3 验证码的一次性使用 5. 检查成果生成的地址如写到img中看效果效果展示 6. 安全增强措施 ️7. 常见问题与解决方案 ❓Q1: 为什么验证码图片要转为PNGQ2: 如何防止验证码被OCR识别Q3: 为什么验证码要设置过期时间 8. 扩展思路 结语 9. 扩展思路 结语 Node.js验证码从生成到验证的趣味之旅 引言为什么需要验证码
想象一下你开了一家网红奶茶店每天有无数人排队购买。突然有人用机器人疯狂下单导致真正想喝奶茶的顾客买不到。验证码就像奶茶店的人工排队检测器确保每个请求都来自真实用户。
在Web开发中验证码CAPTCHA主要用于
✅ 防止机器人暴力破解如登录爆破✅ 保护敏感接口如查询个人信息✅ 减轻服务器压力过滤无效请求
验证码是现代Web应用中常见的安全机制它能有效防止机器人恶意攻击。今天我们就来深入探索Node.js中验证码的生成与验证过程就像一场有趣的冒险旅程
1. 验证码的基本原理
验证码(CAPTCHA)全称是Completely Automated Public Turing test to tell Computers and Humans Apart全自动区分计算机和人类的图灵测试。它的核心思想是 “创建一个人类容易识别但计算机难以识别的测试” 验证码工作流程示意图 #mermaid-svg-prqtqWqYhQtGwDZF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-prqtqWqYhQtGwDZF .error-icon{fill:#552222;}#mermaid-svg-prqtqWqYhQtGwDZF .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-prqtqWqYhQtGwDZF .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-prqtqWqYhQtGwDZF .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-prqtqWqYhQtGwDZF .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-prqtqWqYhQtGwDZF .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-prqtqWqYhQtGwDZF .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-prqtqWqYhQtGwDZF .marker{fill:#333333;stroke:#333333;}#mermaid-svg-prqtqWqYhQtGwDZF .marker.cross{stroke:#333333;}#mermaid-svg-prqtqWqYhQtGwDZF svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-prqtqWqYhQtGwDZF .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-prqtqWqYhQtGwDZF .cluster-label text{fill:#333;}#mermaid-svg-prqtqWqYhQtGwDZF .cluster-label span{color:#333;}#mermaid-svg-prqtqWqYhQtGwDZF .label text,#mermaid-svg-prqtqWqYhQtGwDZF span{fill:#333;color:#333;}#mermaid-svg-prqtqWqYhQtGwDZF .node rect,#mermaid-svg-prqtqWqYhQtGwDZF .node circle,#mermaid-svg-prqtqWqYhQtGwDZF .node ellipse,#mermaid-svg-prqtqWqYhQtGwDZF .node polygon,#mermaid-svg-prqtqWqYhQtGwDZF .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-prqtqWqYhQtGwDZF .node .label{text-align:center;}#mermaid-svg-prqtqWqYhQtGwDZF .node.clickable{cursor:pointer;}#mermaid-svg-prqtqWqYhQtGwDZF .arrowheadPath{fill:#333333;}#mermaid-svg-prqtqWqYhQtGwDZF .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-prqtqWqYhQtGwDZF .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-prqtqWqYhQtGwDZF .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-prqtqWqYhQtGwDZF .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-prqtqWqYhQtGwDZF .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-prqtqWqYhQtGwDZF .cluster text{fill:#333;}#mermaid-svg-prqtqWqYhQtGwDZF .cluster span{color:#333;}#mermaid-svg-prqtqWqYhQtGwDZF div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-prqtqWqYhQtGwDZF :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是 否 客户端请求验证码 服务器生成SVG验证码 转换为PNG图片 返回Base64编码图片 用户提交表单验证码 服务器校验验证码 验证通过? 执行业务逻辑 返回错误提示 2. 技术栈准备 ️
在我们这个例子中使用了以下关键技术
技术作用特点expressWeb框架轻量灵活处理HTTP请求svg-captcha生成SVG验证码纯JS实现无需编译sharp图像处理高性能的图片转换库express-session会话管理存储验证码文本
3. 验证码生成详解
让我们拆解代码中的验证码生成部分
3.1 生成SVG验证码
const svgCaptcha require(svg-captcha);
const sharp require(sharp);
const session require(express-session);// 配置session中间件
router.use(session({secret: stu_xpx_200701,resave: false,saveUninitialized: true,cookie: { secure: false } // 生产环境应该设置为trueHTTPS
}));// 生成验证码路由
router.get(/captcha, async (req, res) {// 创建包含4个字符的彩色验证码排除易混淆字符const captcha svgCaptcha.create({size: 4, // 4个字符ignoreChars: 0o1i, // 排除易混淆字符noise: 2, // 干扰线数量color: true // 彩色显示});// 存储验证码带1分钟过期时间req.session.captcha {text: captcha.text.toLowerCase(), // 转为小写存储expiresAt: Date.now() 60000 // 当前时间1分钟};关键点
参数值说明size4验证码包含4个字符ignoreChars‘0o1i’排除数字0、字母o、数字1、字母i等易混淆字符noise2添加2条干扰线增加识别难度colortrue使用彩色而非黑白
3.2 转换为PNG格式
为什么我们要将SVG转为PNG #mermaid-svg-MVKKiQQ8N2R5VJsA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MVKKiQQ8N2R5VJsA .error-icon{fill:#552222;}#mermaid-svg-MVKKiQQ8N2R5VJsA .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-MVKKiQQ8N2R5VJsA .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-MVKKiQQ8N2R5VJsA .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-MVKKiQQ8N2R5VJsA .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-MVKKiQQ8N2R5VJsA .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-MVKKiQQ8N2R5VJsA .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-MVKKiQQ8N2R5VJsA .marker{fill:#333333;stroke:#333333;}#mermaid-svg-MVKKiQQ8N2R5VJsA .marker.cross{stroke:#333333;}#mermaid-svg-MVKKiQQ8N2R5VJsA svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-MVKKiQQ8N2R5VJsA .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-MVKKiQQ8N2R5VJsA .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-MVKKiQQ8N2R5VJsA .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-MVKKiQQ8N2R5VJsA .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-MVKKiQQ8N2R5VJsA :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 45% 30% 25% 图片格式选择原因 兼容性 安全性 性能 使用sharp库转换 try {// 将SVG转为PNG兼容更多浏览器const pngBuffer await sharp(Buffer.from(captcha.data)).png().toBuffer();// 返回Base64编码的图片res.type(png).json({code: 0,data: data:image/png;base64,${pngBuffer.toString(base64)},msg: 验证码图片获取成功});} catch (err) {console.error(生成PNG失败:, err);res.status(500).json({ code: -1, msg: 生成验证码失败 });}技术细节
Buffer.from() 将SVG字符串转为二进制数据sharp() 进行图片格式转换toString(base64) 生成前端可直接显示的DataURL
3.3 存储验证码信息
我们不仅存储验证码文本还存储过期时间
req.session.captcha {text: captcha.text.toLowerCase(), // 验证码文本expiresAt: Date.now() 1 * 60 * 1000 // 1分钟后过期
};这种设计比单纯存储文本更安全因为它
强制验证码有时效性防止重放攻击自动清理过期验证码
4. 验证码验证流程
当用户提交表单时我们需要验证验证码
4.1 验证步骤分解 #mermaid-svg-GEfUJtfxwLwUAHo9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GEfUJtfxwLwUAHo9 .error-icon{fill:#552222;}#mermaid-svg-GEfUJtfxwLwUAHo9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-GEfUJtfxwLwUAHo9 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-GEfUJtfxwLwUAHo9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-GEfUJtfxwLwUAHo9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-GEfUJtfxwLwUAHo9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-GEfUJtfxwLwUAHo9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-GEfUJtfxwLwUAHo9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-GEfUJtfxwLwUAHo9 .marker.cross{stroke:#333333;}#mermaid-svg-GEfUJtfxwLwUAHo9 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-GEfUJtfxwLwUAHo9 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-GEfUJtfxwLwUAHo9 text.actortspan{fill:black;stroke:none;}#mermaid-svg-GEfUJtfxwLwUAHo9 .actor-line{stroke:grey;}#mermaid-svg-GEfUJtfxwLwUAHo9 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-GEfUJtfxwLwUAHo9 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-GEfUJtfxwLwUAHo9 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-GEfUJtfxwLwUAHo9 .sequenceNumber{fill:white;}#mermaid-svg-GEfUJtfxwLwUAHo9 #sequencenumber{fill:#333;}#mermaid-svg-GEfUJtfxwLwUAHo9 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-GEfUJtfxwLwUAHo9 .messageText{fill:#333;stroke:#333;}#mermaid-svg-GEfUJtfxwLwUAHo9 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-GEfUJtfxwLwUAHo9 .labelText,#mermaid-svg-GEfUJtfxwLwUAHo9 .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-GEfUJtfxwLwUAHo9 .loopText,#mermaid-svg-GEfUJtfxwLwUAHo9 .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-GEfUJtfxwLwUAHo9 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-GEfUJtfxwLwUAHo9 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-GEfUJtfxwLwUAHo9 .noteText,#mermaid-svg-GEfUJtfxwLwUAHo9 .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-GEfUJtfxwLwUAHo9 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-GEfUJtfxwLwUAHo9 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-GEfUJtfxwLwUAHo9 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-GEfUJtfxwLwUAHo9 .actorPopupMenu{position:absolute;}#mermaid-svg-GEfUJtfxwLwUAHo9 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-GEfUJtfxwLwUAHo9 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-GEfUJtfxwLwUAHo9 .actor-man circle,#mermaid-svg-GEfUJtfxwLwUAHo9 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-GEfUJtfxwLwUAHo9 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 用户 服务器 提交表单(姓名,身份证,验证码) 检查必填字段 检查验证码是否存在 检查验证码是否过期 比较验证码文本 返回验证结果 用户 服务器 4.2 关键验证代码
router.post(/query, async (req, res) {// 检查必填参数if (!req.body.studentname || !req.body.id_card || !req.body.code) {return res.status(400).json({ code: -1, msg: 缺少必要参数 });}// 验证码三重校验if (!req.session.captcha) {return res.status(400).json({ code: -1, msg: 验证码已过期 });}if (req.session.captcha.expiresAt Date.now()) {return res.status(400).json({ code: -1, msg: 验证码已过期 });}if (req.session.captcha.text ! req.body.code.toLowerCase()) {return res.status(400).json({ code: -1, msg: 验证码错误 });}// 验证通过后立即销毁验证码一次性使用delete req.session.captcha;// 验证码通过后的代码逻辑...️ 安全策略
时间过期机制1分钟后自动失效大小写无关校验统一转为小写比较一次性使用验证后立即删除session存储
4.3 验证码的一次性使用
验证通过后立即删除验证码防止重复使用
// 验证通过后删除验证码一次性使用
delete req.session.captcha;5. 检查成果
按照以上操作就可以生成一个png地址了那我们可以检查这个是否有效执行以下步骤
生成的地址如
返回地址data:image/png;base64,${pngBuffer.toString(base64)}
如
data:image/png;base64,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写到img中看效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg srcdata:image/png;base64,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 alt
/body
/html效果展示 6. 安全增强措施 ️
我们的实现已经包含了一些安全最佳实践
安全措施实现方式防护目标时效性设置1分钟过期防止暴力破解大小写不敏感统一转小写比较提升用户体验排除混淆字符ignoreChars参数减少用户识别困难一次性使用验证后立即删除防止重放攻击干扰线noise参数增加机器识别难度
7. 常见问题与解决方案 ❓
Q1: 为什么验证码图片要转为PNG
A1: SVG虽然是矢量格式但
某些老旧浏览器支持不好直接显示SVG可能暴露验证码结构PNG更通用且可以添加额外处理
Q2: 如何防止验证码被OCR识别
A2: 可以
增加更多干扰元素噪点、干扰线使用扭曲变形文字添加背景图案使用动态验证码如gif
Q3: 为什么验证码要设置过期时间
A3: 因为
防止长期有效的验证码被利用减少服务器存储压力符合安全最佳实践
8. 扩展思路
如果想进一步提升验证码系统可以考虑
行为验证码如滑动拼图、点击特定区域短信/邮件验证码多因素认证频率限制同一IP/用户限制尝试次数机器学习检测异常请求模式
结语
验证码虽小却承载着重要的安全使命。通过本文的讲解相信你已经掌握了Node.js中验证码生成与验证的核心要点。记住好的验证码应该在安全性和用户体验之间找到平衡点——既不能让机器人轻易破解也不能让真实用户感到困扰。
服务器存储压力
符合安全最佳实践
9. 扩展思路
如果想进一步提升验证码系统可以考虑
行为验证码如滑动拼图、点击特定区域短信/邮件验证码多因素认证频率限制同一IP/用户限制尝试次数机器学习检测异常请求模式
结语
验证码虽小却承载着重要的安全使命。通过本文的讲解相信你已经掌握了Node.js中验证码生成与验证的核心要点。记住好的验证码应该在安全性和用户体验之间找到平衡点——既不能让机器人轻易破解也不能让真实用户感到困扰。
现在就动手实现你自己的验证码系统吧当你看到那些五彩斑斓的扭曲字符时不妨会心一笑——这可是你和机器人之间的智慧较量呢 vs
