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, //验证码长度 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
- 上一篇 »Python3实现生成验证码图片
- 下一篇 »[Python]random生成随机6位验证码