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异步加载数据并添加事件示例
Aug 24 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
理解javascript闭包
Dec 15 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
解析vue中的$mount
Dec 21 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
Vant picker 多级联动操作
Nov 02 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的array_multisort()使用方法介绍
2012/05/16 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
JavaScript效率调优经验
2009/06/04 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
Python open读写文件实现脚本
2008/09/06 Python
Python random模块常用方法
2014/11/03 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python匿名函数用法实例分析
2019/08/03 Python
Python实现序列化及csv文件读取
2020/01/19 Python
.NET笔试题(20个问题)
2016/02/02 面试题
经典的班主任推荐信
2013/10/28 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
师德师风建设方案
2014/05/08 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
学习保证书
2015/01/17 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Python中else的三种使用场景
2021/06/16 Python
利用 JavaScript 构建命令行应用
2021/11/17 Javascript