快捷導(dǎo)航

JS使用svg-captcha生成圖片驗(yàn)證碼的示例代碼

更新時(shí)間：2024年06月16日 08:42:14 作者：剪刀石頭布啊

nodejs(nestjs)后端開發(fā)過程中會有一個(gè)需要生成圖片驗(yàn)證碼的功能,其能減少機(jī)器人攻擊操作,本文我們通過?svg-captcha,來實(shí)現(xiàn)一個(gè)驗(yàn)證碼功能,并且小小的優(yōu)化一下其邏輯,需要的朋友可以參考下

nodejs(nestjs)后端開發(fā)過程中會有一個(gè)需要生成圖片驗(yàn)證碼的功能，其能減少機(jī)器人攻擊操作，這也是開發(fā)過程中比較常見的功能，這邊我們通過 svg-captcha，來實(shí)現(xiàn)一個(gè)驗(yàn)證碼功能，并且小小的優(yōu)化一下其邏輯

首先導(dǎo)入對應(yīng)庫 svg-captcha

yarn add svg-captcha

基礎(chǔ)使用就這樣了，很簡單

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

const svg = svgCaptcha.create()
svg.text 文本
svg.data 圖片數(shù)據(jù)
文本保存用于校驗(yàn)，圖片數(shù)據(jù)返回給客戶端，讓客戶端進(jìn)行對比即可

這個(gè)驗(yàn)證碼只能生成文本和圖片，正常生成代碼的時(shí)候我們需要給其一個(gè)隨機(jī)驗(yàn)證碼，這樣我們需要保存文本信息，方便用于校驗(yàn)，甚至傳一個(gè)自己生成的id當(dāng)唯一值對比，但仍然會存在一個(gè)問題，這個(gè)驗(yàn)證碼是沒有身份信息的，隨便一個(gè)人訪問都要生成一個(gè)新的，那么短時(shí)間內(nèi)人過多的話，會生成非常多的驗(yàn)證碼(當(dāng)然我們只保存一個(gè)自己生成的id、text正常用肯定沒事，過期清理即可)

如果碰到人特別多的情況怎么辦，我們直接保存幾個(gè)驗(yàn)證碼文本和圖片即可，假設(shè)限定數(shù)量10個(gè)，循環(huán)利用，有效期1分鐘，過期剔除換新的，用完定期清理即可，優(yōu)點(diǎn)數(shù)量少訪問快，缺點(diǎn)就是一段時(shí)間內(nèi)會出現(xiàn)重復(fù)的(實(shí)際上稍微多增加幾個(gè)就看不出來了，因?yàn)橄麓问请S機(jī)的，過期也會換新的，內(nèi)存峰值最大也就那樣了，以假亂真)

ps：開發(fā)的世界真真假假誰有分得清呢

//自己也可以根據(jù)需要添加 id 哈，這里就加入id了，只要對一個(gè)是對的那么就是對的，自己可以更加嚴(yán)謹(jǐn)點(diǎn)哈
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

    //避免長時(shí)間占用內(nèi)存,2分鐘后無人使用清理
    if (this.imgClearTimeout) {
        clearTimeout(this.imgClearTimeout)
    }
    this.imgClearTimeout = setTimeout(() => {
        this.imgCodes.length = 0
        this.imgClearTimeout = void 0
    }, 120000)

    return imgInfo.image
}

校驗(yàn)一下，設(shè)置了id就拿到對應(yīng)的再校驗(yàn)即可，這里就直接滿足其中一個(gè)即可

//我們對比一下
const code = params.verification_code.toLocaleLowerCase()
if (!this.img_code.find((e) => e.text === code)) {
    return throw '請輸入正確的驗(yàn)證碼'
}

到此這篇關(guān)于JS使用svg-captcha生成圖片驗(yàn)證碼的示例代碼的文章就介紹到這了,更多相關(guān)JS svg-captcha圖片驗(yàn)證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: