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

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. java.net.DatagramPacket/java.net.DatagramSocket-UDP Socket编程

    UDP 的 Java 支持 UDP 协议提供的服务不同于 TCP 协议的端到端服务,它是面向非连接的,属不可靠协议,UDP 套接字在使用前不需要进行连接.实际上,UDP 协议只实现了两个功能: 在 I ...

  2. Javac编译器

    One Compiler http://www.oracle.com/technetwork/java/jvmls2016-wimmer-3125555.pdf Hacking the OpenJDK ...

  3. Python 里 and、or 的计算规则

    引子: >>> print '' or 5 or 05>>> print 5 and 44>>> print '' or 5 or 0 and 4 ...

  4. 命令运行带参数的jar

    一.打包(此处用的是eclipse) 代码如下,此如引用了某博主的代码,因忘记地址,如博主发现此文,可私信我 package com.example.Open; import java.io.File ...

  5. 复习,关于server.xml的一点理解

    刚才在思考,我所写的一些java代码存放在了eclipse的一个workspace的目录下,这个目录下还包含我的web-project的所有html和jsp文件,以及/WEB-ROOT/WEB-INF ...

  6. htonl()函数学习

    今天在网上看到一篇关于htonl()函数的解释,感觉有道理,贴过来大家一起学习! htonl就是把本机字节顺序转化为网络字节顺序 h---host 本地主机 to 就是to 了 n ---net 网络 ...

  7. wm8976 codec

    root@phyCORE-AM335x:~ amixer controlsnumid=38,iface=MIXER,name='Headphone Playback Switch'numid=39,i ...

  8. Ext 的一些常用方法

    一.Ext 1.1 Ext.isEmpty(v, allowBlank) //是否为空[链接] 1.2 Ext.isArray(v) //是否为数组集合 1.3 Ext.isPrimitive(v) ...

  9. JavaScrip——DOM操作(属性操作)

    Attribute a.setAttribute("属性名","属性值")——设置属性 a.getSttribute("属性名")——获取属 ...

  10. [转]Python与设计模式

    一.创建类设计模式 前言 什么样的程序员是一个好的程序员?学会很多门编程语言,就是一个好的程序员了么?事实上,学会一门编程语言不是一件很难的事,而“学会”一门编程语言是非常难的一件事.前一个“会”强调 ...