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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
JavaScript 反射学习技巧
Oct 16 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
非常实用的php验证码类
2016/05/15 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
php微信开发之关注事件
2018/06/14 PHP
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
js中数组对象去重的两种方法
2019/01/18 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python同时遍历两个list用法说明
2020/05/02 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
用python实现学生管理系统
2020/07/24 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
python中二分查找法的实现方法
2020/12/06 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
银行优秀员工事迹
2014/02/06 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
学校节能减排方案
2014/06/13 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
nginx配置限速限流基于内置模块
2022/05/02 Servers
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技