node实现登录图片验证码的示例代码

实现这里的图形验证码我是用的node里svg-captcha模块,可以全部支持字符和数字，全平台支持，用起来很简单。

1.安装

rush:bash;"> cnpm i svg-captcha --save

2.在使用的地方导入

rush:js;"> var svgCaptcha = require('svg-captcha');

3.获取验证码

3-1 安装 cookie-parser,作用是将获取到的session保存到cookie，方便前端访问验证

cnpm i cookie-parser --save

3-2 使用 cookie-parser

rush:js;"> const cookieParase = require('cookie-parser');

app.use(cookieParase());

这样就可以在项目里使用cookie了

3-3 获取验证码

rush:js;"> // 获取验证码 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.编写后台路由

rush:js;"> // 获取验证码 router.get('/api/getCaptcha',function(req,next) { return api.getCaptcha(req,next); })

当前端调用 /api/getCaptcha 这个接口的时候,返回验证码信息,是svg格式

5.前端访问

rush:xhtml;">

但是现在我们又有需求了,当点击这个验证码的时候，验证码会刷新

6.实现点击验证码刷新

更改一下刚刚验证码的结果，给他加一个外层a标签，并给他绑定一个点击事件,我这里用了 vue ，所以是 @click,其他框架同理.

rush:xhtml;"> nofollow" @click="editCaptcha">

点击事件 editCaptcha

rush:js;"> editCaptcha () { this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random() },

这样就实现了点击验证码刷新的问题

7.前端验证验证码

刚刚我们在后台得到了验证码，但是前端要怎么验证呢？

记得在3-2的时候我们安装了 cookie-parser ，并且在3-3里将生成的session保存在cookie里，这里我们前端就可以通过访问这个cookie拿到验证码的值了。

为什么要保存在cookie里？ 因为后端生成的session我们前端是访问不到的，如果等访问到的话，那还谈什么安全性可言，所以保存一份在cookie里供前端访问。

rush:js;"> let captcha = document.cookie.split('=')[1] if(this.yzm != captcha){ return this.$message.warning('验证码错误') }

最后的前端输入账号密码验证码做登录验证等等我就不多概述了。具体思想就是这样。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/nodejs/32707.html