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


Posted in Javascript onApril 20, 2018

实现这里的图形验证码我是用的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" >

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

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

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拿到验证码的值了。

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
js微信支付实现代码
Dec 22 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
jquery编写日期选择器
Mar 16 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
vue项目中api接口管理总结
Apr 20 #Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 #jQuery
js Element Traversal规范中的元素遍历方法
Apr 19 #Javascript
关于vue中的ajax请求和axios包问题
Apr 19 #Javascript
详解vue 数据传递的方法
Apr 19 #Javascript
Vue 去除路径中的#号
Apr 19 #Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python中几种导入模块的方式总结
2017/04/27 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
css3 矩阵的使用详解
2018/03/20 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
50道外企软件测试面试题
2014/08/18 面试题
一个大学生十年的职业规划
2014/01/17 职场文书
英文商务邀请信
2014/01/22 职场文书
企业读书活动总结
2014/06/30 职场文书
2014年采购工作总结
2014/11/20 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android