Koa结合Svg-captcha实现用户验证码登录

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_40629244/article/details/101353687

在开发用户登录系统时，经常要用验证码验证登录是否为人为的操作，以防止有人用密码字典暴力破解，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() 进行大小写转换后进行对比。