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的IE和Firefox兼容性集锦
Dec 11 Javascript
一个JS翻页效果
Jul 23 Javascript
Prototype Function对象 学习
Jul 12 Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
js微信分享实现代码
Oct 11 Javascript
js实现旋转的星空效果
Nov 01 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
mysql limit查询优化分析
2008/11/12 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
php连接mysql数据库
2017/03/21 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
php生成HTML文件的类方法
2019/10/11 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
javascript自启动函数的问题探讨
2013/10/05 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
JavaScript window.location对象
2014/11/14 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
shiro授权的实现原理
2017/09/21 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
python中遍历文件的3个方法
2014/09/02 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python处理CSV与List的转换方法
2018/04/19 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
高三自我鉴定
2013/10/23 职场文书
档案管理员岗位职责
2013/12/01 职场文书
财政局长自荐信范文
2013/12/22 职场文书
后勤主管岗位职责
2014/03/01 职场文书
中考冲刺决心书
2014/03/11 职场文书
数字化校园建设方案
2014/05/03 职场文书
求职信模板
2014/05/23 职场文书
领导离职感言
2015/08/03 职场文书
课改心得体会范文
2016/01/25 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python