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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
javascript 写类方式之四
Jul 05 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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 编写大型网站问题集
2010/05/07 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Python写入数据到MP3文件中的方法
2015/07/10 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python中的集合介绍
2019/01/28 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
django+echart数据动态显示的例子
2019/08/12 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
在Django中实现添加user到group并查看
2019/11/18 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
称象教学反思
2014/02/03 职场文书
2014学年自我鉴定
2014/02/23 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
公证书
2019/04/17 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
Vue h函数的使用详解
2022/02/18 Vue.js