在开发用户登录系统时,经常要用验证码验证登录是否为人为的操作,以防止有人用密码字典暴力破解,svg-captcha这个模块就是专门用来干这个的,下面给大家介绍一下它的使用方法。
1. 安装模块;
npm i svg-captcha --save
2. 引入模块;
const svgCaptcha = require('svg-captcha');
3. 配置路由生成二维码;
router.get('/code', async (ctx) => {
// 生成加法形式的验证码
// var captcha = svgCaptcha.createMathExpr({
// fontSize:50,
// width:120,
// height:34,
// background:'#cc9966'
// });
// 生成验证码
var captcha = svgCaptcha.create({
size: 4,
fontSize: 50,
width: 120,
height: 34,
background: '#cc9966'
});
// 保存生成的验证码结果
ctx.session.code = captcha.text
// 设置响应头
ctx.response.type = 'image/svg+xml';
ctx.body = captcha.data;
});
4. 页面中使用生成的验证码;
<span class="block input-icon input-icon-right">
<!-- 用户输入验证码 -->
<input type="text" id="code" class="form-control" name="code" placeholder="验证码"/>
<!-- 系统生成的二维码 -->
<img id="codeImg" src="{{__ROOT__}}/admin/login/code">
</span>
需要注意的是,在登录提交时信息时,需要将用户提交的验证码与系统保存的验证码统一用 toLocaleLowerCase() 进行大小写转换后进行对比。