Koa binding Svg-captcha implement user verification code

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_40629244/article/details/101353687

When developing user login system, often use this code to verify whether the login for the human operator to prevent people from using brute force password dictionary, svg-captcha This module is designed to do this, here to tell you about its use method.

1. Install Module

npm i svg-captcha --save

2. Introduction module

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

3. Configure Route generate two-dimensional code

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. The page code generated using a verification

<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>

 It should be noted that the preservation of the verification code system at the time of submitting the information, you need to submit verification of user code reunification with toLocaleLowerCase () were compared after case conversion.