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 相关文章推荐
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
Node.js + express基本用法教程
Mar 14 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
Prototype框架详解
2015/11/25 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
jquery 手势密码插件
2017/03/17 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
python飞机大战游戏实例讲解
2020/12/04 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
给国外客户的邀请函
2014/01/30 职场文书
善意的谎言事例
2014/02/15 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
音乐教师个人总结
2015/02/06 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
我的收音机情缘
2022/04/05 无线电
Pandas 数据编码的十种方法
2022/04/20 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js