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
NodeJs生成SVG图形验证码的更多相关文章
- ASP.NET中如何生成图形验证码
通常生成一个图形验证码主要 有3个步骤: (1)随机产生一个长度为N的随机字符串,N的值可由开发可由开发人员自行设置.该字符串可以包含数字.字母等. (2)将随机生成的字符串创建成图片,并显示. (3 ...
- Linux服务器 java生成的图片验证码乱码问题
问题:如图所示项目中生成的图形验证码不能正常显示出需要的字体 原因: linux下没有对应的字体 查找项目中使用到系统字体的地方,如下: 解决: 1. 在本地 路径 C:\Windows\Fonts ...
- SpringSceurity(3)---图形验证码功能实现
SpringSceurity(3)---图形验证码功能实现 有关springSceurity之前有写过两篇文章: 1.SpringSecurity(1)---认证+授权代码实现 2.SpringSec ...
- C#生成图形验证码
先看效果: 再上代码 public class CaptchaHelper { private static Random rand = new Random(); private static in ...
- PHP5 GD库生成图形验证码(汉字)
PHP5 GD库生成图形验证码且带有汉字的实例分享. 1,利用GD库函数生成图片,并在图片上写指定字符imagecreatetruecolor 新建一个真彩色图像imagecolorallocate ...
- PHP5生成图形验证码(有汉字)
利用PHP5中GD库生成图形验证码 类似于下面这样 1.利用GD库函数生成图片,并在图片上写指定字符 imagecreatetruecolor 新建一个真彩色图像 imagecolora ...
- Net Core 生成图形验证码
1. NetCore ZKweb 在我第一次绘制图形验证码时是采用的ZKweb的绘制库,奉上代码参考 public byte[] GetVerifyCode(out string ...
- python 生成图形验证码
文章链接:https://mp.weixin.qq.com/s/LYUBRNallHcjnhJb1R3ZBg 日常在网站使用过程中经常遇到图形验证,今天准备自己做个图形验证码,这算是个简单的功能,也适 ...
- (转)Android 之生成图形验证码
import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; impor ...
随机推荐
- java.net.DatagramPacket/java.net.DatagramSocket-UDP Socket编程
UDP 的 Java 支持 UDP 协议提供的服务不同于 TCP 协议的端到端服务,它是面向非连接的,属不可靠协议,UDP 套接字在使用前不需要进行连接.实际上,UDP 协议只实现了两个功能: 在 I ...
- Javac编译器
One Compiler http://www.oracle.com/technetwork/java/jvmls2016-wimmer-3125555.pdf Hacking the OpenJDK ...
- Python 里 and、or 的计算规则
引子: >>> print '' or 5 or 05>>> print 5 and 44>>> print '' or 5 or 0 and 4 ...
- 命令运行带参数的jar
一.打包(此处用的是eclipse) 代码如下,此如引用了某博主的代码,因忘记地址,如博主发现此文,可私信我 package com.example.Open; import java.io.File ...
- 复习,关于server.xml的一点理解
刚才在思考,我所写的一些java代码存放在了eclipse的一个workspace的目录下,这个目录下还包含我的web-project的所有html和jsp文件,以及/WEB-ROOT/WEB-INF ...
- htonl()函数学习
今天在网上看到一篇关于htonl()函数的解释,感觉有道理,贴过来大家一起学习! htonl就是把本机字节顺序转化为网络字节顺序 h---host 本地主机 to 就是to 了 n ---net 网络 ...
- wm8976 codec
root@phyCORE-AM335x:~ amixer controlsnumid=38,iface=MIXER,name='Headphone Playback Switch'numid=39,i ...
- Ext 的一些常用方法
一.Ext 1.1 Ext.isEmpty(v, allowBlank) //是否为空[链接] 1.2 Ext.isArray(v) //是否为数组集合 1.3 Ext.isPrimitive(v) ...
- JavaScrip——DOM操作(属性操作)
Attribute a.setAttribute("属性名","属性值")——设置属性 a.getSttribute("属性名")——获取属 ...
- [转]Python与设计模式
一.创建类设计模式 前言 什么样的程序员是一个好的程序员?学会很多门编程语言,就是一个好的程序员了么?事实上,学会一门编程语言不是一件很难的事,而“学会”一门编程语言是非常难的一件事.前一个“会”强调 ...