js使用svg-captcha生成图片验证码

nodejs(nestjs)后端开发过程中会有一个需要生成图片验证码的功能,其能减少机器人攻击操作,这也是开发过程中比较常见的功能,这边我们通过 svg-captcha,来实现一个验证码功能,并且小小的优化一下其逻辑

首先导入对应库 svg-captcha

js 复制代码
yarn add svg-captcha

基础使用就这样了,很简单

js 复制代码
var svgCaptcha = require('svg-captcha');

const svg = svgCaptcha.create()
svg.text 文本
svg.data 图片数据
文本保存用于校验,图片数据返回给客户端,让客户端进行对比即可

这个验证码只能生成文本和图片,正常生成代码的时候我们需要给其一个随机验证码,这样我们需要保存文本信息,方便用于校验,甚至传一个自己生成的id当唯一值对比,但仍然会存在一个问题,这个验证码是没有身份信息的,随便一个人访问都要生成一个新的,那么短时间内人过多的话,会生成非常多的验证码(当然我们只保存一个自己生成的id、text正常用肯定没事,过期清理即可)

如果碰到人特别多的情况怎么办,我们直接保存几个验证码文本和图片即可,假设限定数量10个,循环利用,有效期1分钟,过期剔除换新的,用完定期清理即可,优点数量少访问快,缺点就是一段时间内会出现重复的(实际上稍微多增加几个就看不出来了,因为下次是随机的,过期也会换新的,内存峰值最大也就那样了,以假乱真)

ps:开发的世界真真假假谁有分得清呢

js 复制代码
//自己也可以根据需要添加 id 哈,这里就加入id了,只要对一个是对的那么就是对的,自己可以更加严谨点哈
type ImageCodeType = {
    text: string
    image: string
    timeStamp: number
}

private imgCodes: any[] = []
private imgClearTimeout?: NodeJS.Timeout

getVerificationCode() {
    const currentTime = new Date().getTime()
    const newCode: ImageCodeType[] = []
    this.imgCodes.forEach((item) => {
        if (currentTime - item.timeStamp < 60000) {
            newCode.push(item)
        }
    })
    let imgInfo: ImageCodeType
    if (newCode.length < 10) {
        const captchaCode = svgCaptcha.create()
        imgInfo = {
            text: captchaCode.text.toLocaleLowerCase(),
            image: captchaCode.data,
            timeStamp: new Date().getTime(),
        }
        newCode.push(imgInfo)
    } else {
        const index = Math.floor(new Date().getTime() % 10)
        imgInfo = newCode[index]
    }
    this.imgCodes = newCode

    //避免长时间占用内存,2分钟后无人使用清理
    if (this.imgClearTimeout) {
        clearTimeout(this.imgClearTimeout)
    }
    this.imgClearTimeout = setTimeout(() => {
        this.imgCodes.length = 0
        this.imgClearTimeout = void 0
    }, 120000)

    return imgInfo.image
}

校验一下,设置了id就拿到对应的再校验即可,这里就直接满足其中一个即可

js 复制代码
//我们对比一下
const code = params.verification_code.toLocaleLowerCase()
if (!this.img_code.find((e) => e.text === code)) {
    return throw '请输入正确的验证码'
}
相关推荐
程楠楠&M5 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放5 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
Roc.Chang7 小时前
macos 使用 nvm 管理 node 并自定义安装目录
macos·node.js·nvm
怕冷的火焰(~杰)9 小时前
Node基本使用
node.js
_半夏曲10 小时前
node.js、nginx、iis、tomcat针对部署方面的简述
nginx·node.js·tomcat
生椰拿铁You11 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
酷酷的威朗普16 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端李易安1 天前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
Ztiddler2 天前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
前端青山2 天前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js