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

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图形验证码的更多相关文章

  1. ASP.NET中如何生成图形验证码

    通常生成一个图形验证码主要 有3个步骤: (1)随机产生一个长度为N的随机字符串,N的值可由开发可由开发人员自行设置.该字符串可以包含数字.字母等. (2)将随机生成的字符串创建成图片,并显示. (3 ...

  2. Linux服务器 java生成的图片验证码乱码问题

    问题:如图所示项目中生成的图形验证码不能正常显示出需要的字体 原因:  linux下没有对应的字体 查找项目中使用到系统字体的地方,如下: 解决: 1. 在本地 路径 C:\Windows\Fonts ...

  3. SpringSceurity(3)---图形验证码功能实现

    SpringSceurity(3)---图形验证码功能实现 有关springSceurity之前有写过两篇文章: 1.SpringSecurity(1)---认证+授权代码实现 2.SpringSec ...

  4. C#生成图形验证码

    先看效果: 再上代码 public class CaptchaHelper { private static Random rand = new Random(); private static in ...

  5. PHP5 GD库生成图形验证码(汉字)

    PHP5 GD库生成图形验证码且带有汉字的实例分享. 1,利用GD库函数生成图片,并在图片上写指定字符imagecreatetruecolor 新建一个真彩色图像imagecolorallocate ...

  6. PHP5生成图形验证码(有汉字)

    利用PHP5中GD库生成图形验证码 类似于下面这样 1.利用GD库函数生成图片,并在图片上写指定字符 imagecreatetruecolor   新建一个真彩色图像      imagecolora ...

  7. Net Core 生成图形验证码

    1. NetCore ZKweb       在我第一次绘制图形验证码时是采用的ZKweb的绘制库,奉上代码参考      public byte[] GetVerifyCode(out string ...

  8. python 生成图形验证码

    文章链接:https://mp.weixin.qq.com/s/LYUBRNallHcjnhJb1R3ZBg 日常在网站使用过程中经常遇到图形验证,今天准备自己做个图形验证码,这算是个简单的功能,也适 ...

  9. (转)Android 之生成图形验证码

    import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; impor ...

随机推荐

  1. ny27 水池数目

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上 ...

  2. HTML的级联Select

    系统开发中,经常遇到级联Select的状况,而级联的Select Option数据一般记录于DB,如果每次都重新写一套级联Select,工作将是繁琐滴... 一般来说,写一套级联的Select的几个步 ...

  3. cocos2d-x 3.0点击响应

    迄今为止,发现cocos2d-x 3.0最让人惊艳的地方就是更改了点击事件机制.(ps:迄今只看了点击事件这块,捂嘴笑~~~) cocos2d-x 2.0 只有CCLayer有点击事件处理,需要注册, ...

  4. 开发song-list组件;

    注意点: 1.song-list的高度是通过计算动态获取的: 2.可以直接在{{}}调用函数,来显示函数的返回值: <template> <div class="song- ...

  5. PowerShell实现基于SharePoint的网站HomePage Auto-Create Solution

    *** HomePage Auto-Create Solution Monday, January 12, 2015   PS:该项目为公司项目,我还是给他的名字屏蔽掉吧,这是我用PowerShell ...

  6. sublime 设置侧边栏颜色

    Sublime Text 2 编辑器: Ctrl+` 输入安装代码,安装package control 插件 ctrl+shift+P : Package install 为什么装不上了呢?出现了什么 ...

  7. 【Unity】状态机的状态改变及其回调

    问:怎么知道状态机发生了改变?即如何得知从一个状态切换到了另一个状态? 答:Unity使用StateMachineBehaviours类来描述状态机的行为,当状态机处于不同的状态时,会触发不同的回调. ...

  8. KafkaStream实现wordcount

    KTable应用 KTable wordCounts = textLines // Split each text line, by whitespace, into words. .flatMapV ...

  9. flv网页视频播放

    今天需要用到网页视频播放功能,找了一下,发现flowplayer很好用,写了个dome需要的同学,去下载咯 http://download.csdn.net/detail/jine515073/770 ...

  10. json拼接转义符

    //转义符替 function escapeReplace(Str) { var newStrJson = Str.replace(/\%/g, "%25"); newStrJso ...