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

  • 相关阅读:
    hdu 5723 Abandoned country 最小生成树 期望
    OpenJ_POJ C16G Challenge Your Template 迪杰斯特拉
    OpenJ_POJ C16D Extracurricular Sports 打表找规律
    OpenJ_POJ C16B Robot Game 打表找规律
    CCCC 成都信息工程大学游记
    UVALive 6893 The Big Painting hash
    UVALive 6889 City Park 并查集
    UVALive 6888 Ricochet Robots bfs
    UVALive 6886 Golf Bot FFT
    UVALive 6885 Flowery Trails 最短路
  • 原文地址:https://www.cnblogs.com/kakayang/p/8794546.html
Copyright © 2011-2022 走看看