使用
svg-captcha這個包并結(jié)合后端實現(xiàn)圖形驗證碼功能梯醒。
項目地址：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, // 個數(shù)
width: 100, // 寬
height: 30, // 高
fontSize: 38, // 字體大小
color: true, // 字體顏色是否多變
noise: 1, // 干擾線幾條
background: 'red', // 背景色
});
前端實現(xiàn)
- 前端要做的工作很簡單茸习，獲取后端的接口畜隶，后端返回一個
svg的圖片數(shù)據(jù)，將其顯示在頁面上即可号胚。
// 顯示獲取的驗證碼
<div v-html="captchaSvg" />
// 獲取圖形驗證碼
getCaptcha() {
getCaptcha().then((res) => {
this.captchaSvg = res.entry
})
}
然后我們需要一個唯一的標識籽慢，將其與驗證碼一一對應上，不然猫胁，后端怎么知道這個驗證碼是誰發(fā)送的呢箱亿？
所以我們使用uuid這個庫來生成一個唯一的標識并發(fā)送給后端。
# 安裝uuid
$ npm install uuid
// 發(fā)送給后端
import { v4 as uuidv4 } from 'uuid';
let sid = uuidv4(); // ? '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
getCaptcha() {
getCaptcha({ sid }).then((res) => {
this.captchaSvg = res.entry
})
}
- 具體前端實現(xiàn)的代碼地址：-->代碼
后端實現(xiàn)
接收并緩存
當后端接收到前端發(fā)過來的請求時弃秆，首先使用
svg-captcha提供的能力生成一個svg圖片給前端届惋。然后我們需要將前端傳過來的
sid標識作為key，驗證碼作為value值保存起來菠赚，以便我們后面登錄的時候?qū)ζ湔_性做驗證脑豹。我這里的
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,
};
}
驗證圖形碼
- 當我們在調(diào)起登錄接口的時候晨缴，我們將表單中輸入的驗證碼與緩存中的驗證碼進行驗證。
- 完整后端實現(xiàn)代碼：-->地址
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;
}
}
- 至此击碗，圖形驗證碼功能基本完成筑悴。
