zoukankan      html  css  js  c++  java
  • NodeJs生成SVG图形验证码

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

    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,  //验证码长度
                     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

  • 相关阅读:
    print 参数
    note
    action标签的属性说明
    Cannot load JDBC driver class 'oracle.jdbc.driver.OracleDriver'
    润乾报表
    javax.naming.NameNotFoundException: Name ZKING is not bound in this Context 的问题
    Myeclipse2013安装svn插件
    Myeclipse2013的优化设置
    Myeclipse解析.classpath文件
    Struts
  • 原文地址:https://www.cnblogs.com/kakayang/p/8794546.html
Copyright © 2011-2022 走看看