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资料toString 方法
Mar 13 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
华为慧通笔试题
2016/04/22 面试题
童装店创业计划书
2014/01/09 职场文书
部队领导证婚词
2014/01/12 职场文书
支部书记四风对照材料
2014/08/28 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技