node实现登录图片验证码的示例代码

实现这里的图形验证码我是用的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" >

但是现在我们又有需求了,当点击这个验证码的时候，验证码会刷新

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拿到验证码的值了。

为什么要保存在cookie里？ 因为后端生成的session我们前端是访问不到的，如果等访问到的话，那还谈什么安全性可言，所以保存一份在cookie里供前端访问。

let captcha = document.cookie.split('=')[1]
  if(this.yzm != captcha){
   return this.$message.warning('验证码错误')
  }

最后的前端输入账号密码验证码做登录验证等等我就不多概述了。具体思想就是这样。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Nodejs中使用captchapng模块生成图片验证码
  • node.js WEB开发中图片验证码的实现方法
赞 (0)

相关推荐

  • Nodejs中使用captchapng模块生成图片验证码

    Nodejs项目,在做图片验证码的时候遇到了难题.Nodejs没有图片库,以后会有,但是现在没有. 网络上搜索一圈,有几个解决方案: 1.采用第三方验证码程序,有的时候,项目可能不允许: 2.使用Java或者PHP生成图片,Nodejs调用,中间采用Redies共享: 这两种方式都不太理想,好在终于找到了可以支持Nodejs图片验证码的一个库,虽然只支持数字,但是也还不错.原理是使用Base64的图片编码方式. 这个库的Gighub地址是:https://github.com/GeorgeCha

  • node.js WEB开发中图片验证码的实现方法

    用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿

  • node实现登录图片验证码的示例代码

    实现这里的图形验证码我是用的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-pa

  • Java实现动态获取图片验证码的示例代码

    本文介绍了Java实现动态获取图片验证码的示例代码,分享给大家,具体如下: import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.io.UnsupportedEncodingEx

  • Django实现登录随机验证码的示例代码

    Django实现登录随机验证码的示例代码

    登录验证码是每个网站登录时的基本标配,网上也有很多相应的文章, 但是从生成验证码到 应用到自己的网站上的全步骤,并没有看到很多, 为了节约大家的时间,我把整体步骤写下来, 即拿即用哈 1. 生成随机验证码 #_*_coding:utf-8_*_ from PIL import Image,ImageDraw,ImageFont,ImageFilter import random import math, string #字体的位置,不同版本的系统会有不同 font_path = '/Librar

  • Java web实现动态图片验证码的示例代码

    验证码 防止恶意表单注册 生成验证码图片 定义宽高 int width = 100; int height = 50; 使用BufferedImage再内存中生成图片 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); 绘制背景和边框 Graphics g = image.getGraphics(); g.setColor(Color.WHITE); g.fillRect(0, 0

  • Js逆向实现滑动验证码图片还原的示例代码

    本文列举两个例子:某象和某验的滑动验证 一.某验:aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s 未还原图像: 还原后的图: 从服务端请求来的图片是打乱后的,给用户看的时候是完整的,这个过程肯定是运行了某段js代码,将打乱的图片进行还原操作.所以我们需要找到这段js,然后还原它的代码逻辑,实现图片的还原操作,找到缺口距离,实现滑动操作. 如果你仔细观察的话,你会发现还原后的图它是canvas生成出来的 那你应该会想到,那段

  • 基于C#实现图片滑动验证码的示例代码

    基于C#实现图片滑动验证码的示例代码

    目录 图片准备 合成目标 实现 1.创建项目 2.Nuget添加ImageSharp 3.vscode打开 4.引入图片 5.生成out_bg.jpg 6.生成out_slider.png 全部代码 最后 图片准备 hole.png和slider.png为png是因为图片带有透明度. 合成目标 最终为前端生成两张图片: out_slider.png高度为344与背景图等高. 也可以打开滑动验证Demo页面,F12来观察图片. 实现 本机环境为.net 6.0.300-preview.22204.

  • vue生成随机验证码的示例代码

    vue生成随机验证码的示例代码

    本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"

  • Selenium之模拟登录铁路12306的示例代码

    最近接触了一些selenium模块的相关知识,觉得还挺有意思的,于是决定亲自尝试写一些爬虫程序来强化selenium模块(一定要多尝试.多动手.多总结).本文主要使用python爬虫来模拟登录铁路12306官网.这儿得吐槽一句,铁路12306网站的反爬机制做的还是比较好. 话不多说,下面跟小墨一起来学习如何通过爬虫来实现铁路12306的登录. 一. 验证码破解 当我们输入账号和密码后,在点击登录按钮之前,还需要对验证码进行操作.对验证码的识别,已经有相关的处理平台,我们只需要借助第三方平台即可.

  • python 模拟登录B站的示例代码

    需要将模拟的浏览器,添加到环境变量中哦.代码中用的是chrome from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by import By from selenium.webdriv

  • python通过pillow识别动态验证码的示例代码

    python通过pillow识别动态验证码的示例代码

    目录 环境配置  安装 pillow(PIL)库 识别过程 生活中,我们在登录微博,邮箱的时候,常常会碰到验证码.在工作时,如果想要爬取一些数据,也会碰到验证码的阻碍.本次试验将带领大家认识验证码的一些特性,并利用 Python 中的 pillow 库完成对验证码的破解. 环境配置 Python 2.7 Pillow 模块 有个问题就是python2.7目前只能让使用到2020年,现在再利用2.7下载好多东西都会报错,也该是时候更新到python3.7了,本文还是依赖于2.7的环境. 识别验证码

随机推荐