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 八进制转义字符(8进制)
Apr 08 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
Augularjs-起步详解
Jul 08 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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中的加密功能
2006/10/09 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
高中自我鉴定
2013/12/20 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
个人工作表现评语
2014/04/30 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
化妆品促销活动总结
2015/05/07 职场文书
商场广播稿范文
2015/08/19 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
Python中22个万用公式的小结
2021/07/21 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers