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

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. CCRepeatForever和CCDelayTime

    有限次执行一组动作和无限次执行一组动作 void ActionRotateJerk::onEnter() { ActionsDemo::onEnter(); centerSprites(); CCFi ...

  2. Oracle某些功能实现语句处理方法

    触发器以及序列CREATE OR REPLACE TRIGGER t_MSTB_BDS_DATA BEFORE INSERT ON MSTB_BDS_DATA FOR EACH ROW DECLARE ...

  3. MySQL通过视图(或临时表)实现动态SQL(游标)

    >参考de优秀文章 写MySQL存储过程实现动态执行SQL Dynamic cursor in stored procedure MySQL通过视图(或临时表)实现动态SQL(游标). 因在实现 ...

  4. 【转】转 Linux调优方案,sysctl.conf的设置

      http://blog.sina.com.cn/s/blog_541086000100skq0.html proc/sys/net/ipv4/下各项的意义 http://blog.chinauni ...

  5. org.hibernate.HibernateException: Could not parse configuration: /hibernate.cfg.xm

    org.hibernate.HibernateException: Could not parse configuration: /hibernate.cfg.xm 检查jar包是否正确以及配置的xm ...

  6. 【转】Linux删除文件未释放空间问题处理

    linux里的文件被删除后,空间没有被释放是因为在Linux系统中,通过rm或者文件管理器删除文件将会从文件系统的目录结构上解除链接(unlink).然而如果文件是被打开的(有一个进程正在使用),那么 ...

  7. JAVA-JSP Scriptlets(JSP小脚本)

    相关资料: <21天学通Java Web开发> 结果总结: 1.<% %>可以包含多个语句,如:方法.变量.表达式.2.类型定义时,如:int.String必须注意大小写. 实 ...

  8. python学习笔记(12)--爬虫下载煎蛋网图片

    说明: 1. 这个其实是在下载漫画之前写的,比那个稍微简单点,之前忘放到博客备份了. 2. 不想说啥了,总结放到漫画那个里面吧! import urllib.request import re imp ...

  9. VBA 删除页

    怎么让word自动删除第3.6.9.12等3的倍数页‘ Sub kk1206190933() Dim wNum As Integer Dim wPag As Integer With Selectio ...

  10. [转]解决eclipse无法设置NDK问题

    参考:http://jingyan.baidu.com/album/4d58d5413000a09dd4e9c0fe.html?picindex=1  到android sdk官网下载r23版本的ad ...