前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Node实现图形验证码

Node实现图形验证码

作者头像
Ewall
发布2020-11-12 11:02:36
1.5K0
发布2020-11-12 11:02:36
举报
文章被收录于专栏:vue学习

使用 svg-captcha 这个包并结合后端实现图形验证码功能。 项目地址:https://github.com/Ewall1106/mall

基本使用

代码语言:javascript
复制
$ npm install svg-captcha --save
  • 官方文档中的基本使用示例:
代码语言:javascript
复制
const svgCaptcha = require('svg-captcha');

const captcha = svgCaptcha.create();
console.log(captcha);
  • 我们还可以进行一些简单的选项配置。
代码语言:javascript
复制
// svgCaptcha.create(<OPTIONS>)
// eg:
svgCaptcha.create({
  size: 4, // 个数
  width: 100, // 宽
  height: 30, // 高
  fontSize: 38, // 字体大小
  color: true, // 字体颜色是否多变
  noise: 1, // 干扰线几条
  background: 'red', // 背景色
});

前端实现

  • 前端要做的工作很简单,获取后端的接口,后端返回一个 svg 的图片数据,将其显示在页面上即可。
代码语言:javascript
复制
// 显示获取的验证码
<div v-html="captchaSvg" />

// 获取图形验证码
getCaptcha() {
  getCaptcha().then((res) => {
    this.captchaSvg = res.entry
  })
}
  • 然后我们需要一个唯一的标识,将其与验证码一一对应上,不然,后端怎么知道这个验证码是谁发送的呢?
  • 所以我们使用uuid这个库来生成一个唯一的标识并发送给后端。
代码语言:javascript
复制
# 安装uuid
$ npm install uuid
代码语言:javascript
复制
// 发送给后端
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 缓存中,你也可以用其它方式将其保存下来。
代码语言:javascript
复制
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,
  };
}

验证图形码

  • 当我们在调起登录接口的时候,我们将表单中输入的验证码与缓存中的验证码进行验证。
  • 完整后端实现代码:-->地址
代码语言:javascript
复制
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;
  }
}
  • 至此,图形验证码功能基本完成。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基本使用
  • 前端实现
  • 后端实现
    • 接收并缓存
      • 验证图形码
      相关产品与服务
      验证码
      腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档