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

越陌度阡

发布于 2020-11-26 14:53:42

1.5K0

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/09/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

验证码

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐