使用
svg-captcha
这个包并结合后端实现图形验证码功能。 项目地址:https://github.com/Ewall1106/mall
$ 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
$ 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;
}
}