node实现登录图片验证码的示例代码
实现这里的图形验证码我是用的node里svg-captcha模块,可以全部支持字符和数字,全平台支持,用起来很简单。
1.安装
pm i svg-captcha --save
2.在使用的地方导入
var svgCaptcha = require('svg-captcha');
3.获取验证码
3-1 安装 cookie-parser
,作用是将获取到的session保存到cookie,方便前端访问验证
pm 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('/api/getCaptcha', function(req, res, next) { return api.getCaptcha(req, res, next); })
当前端调用 /api/getCaptcha
这个接口的时候,返回验证码信息,是svg格式
5.前端访问
<img src="/api/getCaptcha" alt="captcha" >
但是现在我们又有需求了,当点击这个验证码的时候,验证码会刷新
6.实现点击验证码刷新
更改一下刚刚验证码的结果,给他加一个外层a标签,并给他绑定一个点击事件,我这里用了 vue
,所以是 @click
,其他框架同理.
<a href="#" rel="external nofollow" @click="editCaptcha"> <img src="/api/getCaptcha" alt="" ref="imgYzm"> </a>
点击事件 editCaptcha
editCaptcha () { this.$refs.imgYzm.src = '/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('验证码错误') }
最后的前端输入账号密码验证码做登录验证等等我就不多概述了。具体思想就是这样。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程