这次给大家带来node实现登录时图片验证码功能，node实现登录时图片验证码功能的注意事项有哪些，下面就是实战案例，一起来看一下。
实现这里的图形验证码我是用的node里svg-captcha模块,可以全部支持字符和数字，全平台支持，用起来很简单。
1.安装
cnpm i svg-captcha --save
登录后复制
2.在使用的地方导入
var svgCaptcha = require('svg-captcha');
登录后复制
3.获取验证码
3-1 安装 cookie-parser ,作用是将获取到的session保存到cookie，方便前端访问验证
cnpm i cookie-parser –save
3-2 使用 cookie-parser
const cookieParase = require('cookie-parser');app.use(cookieParase());
登录后复制
这样就可以在项目里使用cookie了
3-3 获取验证码
// 获取验证码 getCaptcha(req, res, next){ var captcha = svgCaptcha.create({ // 翻转颜色 inverse: false, // 字体大小 fontSize: 36, // 噪声线条数 noise: 2, // 宽度 width: 80, // 高度 height: 30, }); // 保存到session,忽略大小写 req.session = captcha.text.toLowerCase(); console.log(req.session); //0xtg 生成的验证码 //保存到cookie 方便前端调用验证 res.cookie('captcha', req.session); res.setHeader('Content-Type', 'image/svg+xml'); res.write(String(captcha.data)); res.end(); },
登录后复制
做到这只是实现了生成验证码的功能，那么要访问呢？
4.编写后台路由
// 获取验证码router.get('https://www.php.cn/api/getCaptcha', function(req, res, next) { return api.getCaptcha(req, res, next);})
登录后复制
当前端调用 https://www.php.cn/api/getCaptcha 这个接口的时候,返回验证码信息,是svg格式
5.前端访问
登录后复制
但是现在我们又有需求了,当点击这个验证码的时候，验证码会刷新
6.实现点击验证码刷新
更改一下刚刚验证码的结果，给他加一个外层a标签，并给他绑定一个点击事件,我这里用了 vue ，所以是 @click ,其他框架同理.
登录后复制
点击事件 editCaptcha
editCaptcha () { this.$refs.imgYzm.src = 'https://www.php.cn/api/getCaptcha?d='+Math.random()},
登录后复制
这样就实现了点击验证码刷新的问题
7.前端验证验证码
刚刚我们在后台得到了验证码，但是前端要怎么验证呢？
记得在3-2的时候我们安装了 cookie-parser ，并且在3-3里将生成的session保存在cookie里，这里我们前端就可以通过访问这个cookie拿到验证码的值了。
为什么要保存在cookie里？ 因为后端生成的session我们前端是访问不到的，如果等访问到的话，那还谈什么安全性可言，所以保存一份在cookie里供前端访问。
let captcha = document.cookie.split('=')[1] if(this.yzm != captcha){ return this.$message.warning('验证码错误') }
登录后复制
最后的前端输入账号密码验证码做登录验证等等我就不多概述了。具体思想就是这样。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Vue实现双向数据绑定功能（附代码）
ES6仿Vue实现双向绑定功能
以上就是node实现登录时图片验证码功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2766870.html
