码迷,mamicode.com
首页 > Web开发 > 详细

NodeJs生成SVG图形验证码

时间:2018-04-11 16:14:34      阅读:702      评论:0      收藏:0      [点我收藏+]

标签:account   ajax   dom   width   font   node.js   option   target   方式   

背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求:

1)不能使用文本式的验证码,很简单就能拿到

2)所有验证逻辑要在服务端进行,不然很容易被绕过

解决方法:使用svg-captcha插件在node.js中生成svg格式的验证码。

1、安装

npm install --save svg-captcha

2、使用方法

var svgCaptcha = require(‘svg-captcha‘);
var data = svgCaptcha.create({
   //options 
})
console.log(data)
//{data: ‘<svg>......</svg>‘, text: ‘fdsafasdf‘}

在express中使用

var svgCaptcha = require(‘svg-captcha‘);
var router = require(‘express‘).Router();

router.get(‘/get-img-verify‘, function (req, res) {
    console.log(req.query);
    var option = req.query;
    // 验证码,有两个属性,text是字符,data是svg代码
    var code = svgCaptcha.create(option);
    // 保存到session,忽略大小写
    req.session["randomcode"] = code.text.toLowerCase();
    // 返回数据直接放入页面元素展示即可
    res.send({
        img: code.data
    });
});

客户端获取验证码

/*
     * 获取图片验证码
     */
    getImageCode: function () {
        var _this = this;
        $("#image_code").val("");
        $.ajax({
            type:"get",
            url: "/get-img-verify",
            data: {         
                size: 6,  //验证码长度
                width: 200,
                height: 150,
                background: "#f4f3f2",//干扰线条数
                noise: 2,
                fontSize: 32,
                ignoreChars: ‘0o1i‘,   //验证码字符中排除‘0o1i‘
                color: true // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有           
            },
            dataType: ‘json‘
        }).done(function (data) {
            $(".getImageCode").html(data.img);
            $(".getImageCode").off("click").on("click", function () {
                _this.getImageCode();
            });
        });
    }                            

3、验证方法

所有的验证逻辑都要在服务端进行,不然这个验证码就没什么卵用了,所以正确的逻辑应该是,当去请求敏感接口的时候,把客户端输入的验证码连同接口需要的参数一块传给node层,在node里判断用户输入的验证码是不是跟之前存到session里的验证码一致,如果不一致,则验证不通过,直接返回数据,不请求后台;如果一致,则验证通过,再由node发起请求,去调用后台接口。

router.get(‘/cerification-codeService/send-verification-code‘, function (req, res, next) {
    var url = urlMap.useraccountserver + ‘/cerification-codeService/new-send-verification-code‘;
    var imageCode = req.query.imageCode.toLowerCase();
    var qs = req.query;
    for (let key in qs) {
        if (key === ‘imageCode‘) {
            delete qs[key];
        }
    }
    if (imageCode !== req.session["randomcode"]) {
        res.send({
            code: 4
        });
        return false;
    }
    var options = {
        url: url,
        method: ‘GET‘,
        json: true,
        qs: qs
    };

    clusterUtility.API.optionsFilter(req, options);
    request(options, function (error, response, body) {
        res.send(body);
    });
});

插件还有一些其他的配置项及API,具体可见  https://github.com/lemonce/svg-captcha

NodeJs生成SVG图形验证码

标签:account   ajax   dom   width   font   node.js   option   target   方式   

原文地址:https://www.cnblogs.com/kakayang/p/8794546.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!