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('/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('验证码错误')
}
最后的前端输入账号密码验证码做登录验证等等我就不多概述了。具体思想就是这样。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
文章介绍了如何在Windows系统上安装和配置node-sass,并提供了一个详细的步骤指南,首先,通过命令行查看支持版本；然后,下载对应版本的node-sass安装包；接着,在npm配置文件中增加SASS_BINARY_PATH路径配置；最后,执行npmi命令完成安装2024-12-12
由于npm软件包管理器有时可能不太稳定,安装依赖包容易报错,所以就有了cnpm,这篇文章主要给大家介绍了关于cnpm安装的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-02-02
Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用，本篇文章给大家介绍nodejs的express使用教程，感兴趣的朋友参考下2015-11-11
Nodejs Playwright 2Captcha 验证码识别实现自动登陆功能
日常工作当中,为了提高工作效率,我们可能会写脚本来自动执行任务,有些网站因为需要用户登陆,所以脚本的自动登陆功能必不可少,这篇文章主要介绍了Nodejs Playwright 2Captcha 验证码识别实现自动登陆功能,需要的朋友可以参考下2024-05-05
在JavaScript里面，运行过程中的错误的类型总是被人忽略，这篇文章给大家详细介绍了如何在Node.js下自定义错误类型，对大家学习或者使用Node.js具有一定的参考借鉴价值，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-10-10
这篇文章主要介绍了nodejs+koa2 实现模仿springMVC框架,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
本篇文章主要介绍了详解使用 nvm 管理多版本 node的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了node.js中的fs.renameSync方法使用说明,本文介绍了fs.renameSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下2014-12-12
Node.js是一种对应于JavaScript运行时环境的编程语言,这篇文章主要给大家介绍了关于Linux Ubuntu升级nodejs版本的简单步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
本文主要介绍在 Express 框架中，如何使用 Session 来实现用户登录身份验证。对express session实现登录验证相关知识，感兴趣的朋友一起看看吧2017-09-09
最新评论