nodejs使用svg-captcha实现验证码功能

svg-captcha通过cookies实现验证码校验功能

在package.json文件中添加svg-captcha

"dependencies": {
    ……
    "svg-captcha": "*"
  }

通过npm install命令安装svg-captcha模块

创建svg-captcha

const code = require("svg-captcha");
function createCode() {
    return code.create({
        size: 4,                //字符个数
        ignoreChars: "0o1iIl",  //忽略o和0，i和1和l等相似字符
        noise: 2,               //干扰线条数量
        color: true,            //字体颜色与背景色不通
        background: "#fff",     //背景色
        fontSize: 60,           //字体大小
        height: 50,             //高度
    });

}

在前端添加验证码

<input maxlength="4"  id="captcha" name="captcha" required>
<img src="/captcha" id="cap_pic" onclick="change_capacha()">

<script>
     function change_capacha() {
        document.getElementById('cap_pic').src = '/captcha?' + Math.random();
    }
</script>

captacha一般随着用户名、密码，放置在一个form中，cap_pic则是验证码图片。onclick函数实现了点击后更换验证码的功能。注意其在/captcha url后面加了一个随机数，如果不加则浏览器认为访问的是同一页面，不会刷新。

在后端进行验证码校验

添加/captcha路径，返回验证码图片。将所有的字符都转换成小写，即可忽略大小写。

router.get('/captcha', function (req, res, next) {
    let captcha = createCode();
    req.session.captcha = captcha.text.toLowerCase();
    //保存到cookie 方便前端调用验证
    res.cookie('captcha', req.session.captcha);
    res.setHeader('Content-Type', 'image/svg+xml');
    res.write(String(captcha.data));
    res.end();
});

将正确的验证码保存在cookies中，再与用户提交的验证码做比较。

capt = req.body.captcha.toLowerCase()
if (capt != req.cookies.captcha) {
    ……
}