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 ...
随机推荐
- Serviceability
http://hg.openjdk.java.net/jdk7u/jdk7u2/hotspot/file/6259c6d3bbb7/agent/doc/clhsdb.html http://blog. ...
- vue 阅读一【待完结】
初步方案:从第一个commit开始到到最近的commit,从代码的大纲开始到细节,利用思维导图. 注意: 源码阅读是一件比较枯燥的事情,要有别的东西一起做,源码只是偶尔看看,经常发呆的话,非常浪费时间 ...
- C++11 long long使用及输出
相比于C++98标准,C++11整型的最大改变就是多了 long long.分为两种:long long 和unsigned long long.在C++11中,标准要求long long 整型可以在 ...
- Cocos2d-x stack corruption detected: aborted
adb logcat错误 :堆栈错误,,或者访问过界...通常不太好调试:: 但是以下两种情况最最常见: 1. ]; strcpy(aa,"abcdefghijk123457890" ...
- C/C++预定义宏
编译器识别预定义的 ANSI/ISO C99 C 预处理宏,Microsoft C++ 实现将提供更多宏.这些预处理器宏不带参数,并且不能重新定义. ANSI 兼容的预定义宏 __FILE__,__L ...
- 如何保证RabbitMQ的消息不丢失及其背后的原理
一.消息为什么丢失 RabbitMQ默认情况下的交换机和队列以及消息是非持久化的,也就是说在服务器重启或者宕机恢复后,之前创建的交换机和队列都将不复存在,之前未消费的消息也就消失不见了.原因在于每个队 ...
- Linux作为路由器(一)
前言:Linux主机可以作为路由器使用,利用路由转发功能实现不同网络内的主机能够相互通信,利用iptables的SNAT功能来实现企业内网主机访问互联网,下面做个小的实验. 实验环境:VM (1)路由 ...
- c++重载>>和<<
在重载输出输入运算符的时候,只能采用全局函数的方式(因为我们不能在ostream和istream类中编写成员函数),这里才是友元函数真正的应用场景.对于输出运算符,主要负责打印对象的内容而非控制格式, ...
- C语言一闪而过
头文件#include<stdlib.h> main函数system("pause");
- cocos2dx遇到的坑2
记录下在cocos2dx 2.x时代遇到的问题 1.cocos2dx retain 在onenter时,在onexit时 release 2.先结束定时器再退出界面 3.在不同帧里数据是有可能不一 ...