Node实现图形验证码

更新日期: 2020-10-28阅读: 1.8k标签: node
使用 svg-captcha 这个包并结合后端实现图形验证码功能。项目地址:https://github.com/Ewall1106/mall

基本使用

在我们项目中安装 svg-captcha 包。

$ npm install svg-captcha --save

官方文档中的基本使用示例:

const svgCaptcha = require('svg-captcha');

const captcha = svgCaptcha.create();
console.log(captcha);

我们还可以进行一些简单的选项配置。

// svgCaptcha.create(<OPTIONS>)
// eg:
svgCaptcha.create({
  size: 4, // 个数
  width: 100, // 宽
  height: 30, // 高
  fontSize: 38, // 字体大小
  color: true, // 字体颜色是否多变
  noise: 1, // 干扰线几条
  background: 'red', // 背景色
});

前端实现

前端要做的工作很简单,获取后端的接口,后端返回一个 svg 的图片数据,将其显示在页面上即可。

// 显示获取的验证码
<div v-html="captchaSvg" />

// 获取图形验证码
getCaptcha() {
  getCaptcha().then((res) => {
    this.captchaSvg = res.entry
  })
}

然后我们需要一个唯一的标识,将其与验证码一一对应上,不然,后端怎么知道这个验证码是谁发送的呢?

所以我们使用uuid这个库来生成一个唯一的标识并发送给后端。

# 安装uuid
$ npm install uuid
// 发送给后端
import { v4 as uuidv4 } from 'uuid';

let sid = uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

getCaptcha() {
  getCaptcha({ sid }).then((res) => {
    this.captchaSvg = res.entry
  })
}


后端实现

接收并缓存

当后端接收到前端发过来的请求时,首先使用 svg-captcha 提供的能力生成一个 svg 图片给前端。

然后我们需要将前端传过来的 sid标识 作为 key,验证码 作为 value 值保存起来,以便我们后面登录的时候对其正确性做验证。

我这里的 setValue 方法是将图形码 key-value 保存在了 redis 缓存中,你也可以用其它方式将其保存下来。

async getCaptcha(ctx) {
  const captcha = svgCaptcha.create({
    width: 100,
    height: 30,
    fontSize: 38,
    color: false,
  });

  // 缓存key-value 并设置缓存有效期为10分钟
  setValue(sid, captcha.text, 10 * 60);

  ctx.body = {
    code: 200,
    entry: captcha.data,
  };
}

验证图形码

当我们在调起登录接口的时候,我们将表单中输入的验证码与缓存中的验证码进行验证。

async login(ctx, next) {
  const { username, password, captcha, sid } = ctx.request.body;
  // 通过唯一标识符sid来获取缓存中图形验证码
  const value = await getValue(sid);
  if (!value) {
    ctx.body = {
      code: 400,
      message: '图形验证码已过期,请点击图片刷新',
    };
    return;
  }
  if (captcha.toLowerCase() !== value.toLowerCase()) {
    ctx.body = {
      code: 400,
      message: '请输入正确的验证码',
    };
    return;
  }
}

至此,图形验证码功能基本完成。

链接: https://fly63.com/article/detial/9895

关于 Node.js 里 ES6 Modules 的一次更新说明

关于 Node.js 里 ES6 Modules 的一次更新说明,总结来说:CommonJS 与 ES6 Modules 之间的关键不同在于代码什么时候知道一个模块的结构和使用它。

用node.js开发一个可交互的命令行应用

在这个教程中,我们会开发一个命令行应用,它可以接收一个 CSV 格式的用户信息文件,教程的内容大纲:“Hello,World”,处理命令行参数,运行时的用户输入,异步网络会话,美化控制台的输出,封装成 shell 命令,JavaScript 之外

Node启动https服务器

首先你需要生成https证书,可以去付费的网站购买或者找一些免费的网站,可能会是key或者crt或者pem结尾的。不同格式之间可以通过OpenSSL转换

nodejs 异步转同步

nodej项目在微信环境开发,nodejs的异步特效,会导致请求没有完成就执行下面的代码,出现错误。经过多方查找,可以使用async模块来异步转同步,只有前一个function执行callback,下一个才会执行。

基于node服务器的大文件(G级)上传

3G的大文件分1500个2M二进度文件,通post方法发送给node服务,服务器全部接收到文件后,进组装生成你上文件。

为什么要把 JavaScript 放到服务器端上运行?

JavaScript比C的开发门槛要低,尽管服务器端JavaScript存在已经很多年了,但是后端部分一直没有市场,JavaScript在浏览器中有广泛的事件驱动方面的应用,考虑到高性能、符合事件驱动、没有历史包袱这3个主要原因,JavaScript成为了Node的实现语言。

了解node.js事件循环

node.js的第一个基本论点是I / O的性能消耗是很昂贵。因此,使用当前编程技术的最大浪费来自于等待I / O完成。有几种方法可以处理性能影响

Node.js 应用:Koa2 使用 JWT 进行鉴权

在前后端分离的开发中,通过 Restful API 进行数据交互时,如果没有对 API 进行保护,那么别人就可以很容易地获取并调用这些 API 进行操作。那么服务器端要如何进行鉴权呢?

Node.js 前端开发指南

我们经常跟Node.js打交道,即使你是一名前端开发人员 -- npm脚本,webpack配置,gulp任务,程序打包 或 运行测试等。即使你真的不需要深入理解这些任务,但有时候你会感到困惑,会因为缺少Node.js的一些核心概念而以非常奇怪的方式来编码。

happypack提升项目构建速度

运行在 Node.js 之上的 Webpack 是单线程模型的,也就是说 Webpack 需要处理的任务需要一件件挨着做,不能多个事情一起做。happypack把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!