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

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. Serviceability

    http://hg.openjdk.java.net/jdk7u/jdk7u2/hotspot/file/6259c6d3bbb7/agent/doc/clhsdb.html http://blog. ...

  2. vue 阅读一【待完结】

    初步方案:从第一个commit开始到到最近的commit,从代码的大纲开始到细节,利用思维导图. 注意: 源码阅读是一件比较枯燥的事情,要有别的东西一起做,源码只是偶尔看看,经常发呆的话,非常浪费时间 ...

  3. C++11 long long使用及输出

    相比于C++98标准,C++11整型的最大改变就是多了 long long.分为两种:long long 和unsigned long long.在C++11中,标准要求long long 整型可以在 ...

  4. Cocos2d-x stack corruption detected: aborted

    adb logcat错误 :堆栈错误,,或者访问过界...通常不太好调试:: 但是以下两种情况最最常见: 1. ]; strcpy(aa,"abcdefghijk123457890" ...

  5. C/C++预定义宏

    编译器识别预定义的 ANSI/ISO C99 C 预处理宏,Microsoft C++ 实现将提供更多宏.这些预处理器宏不带参数,并且不能重新定义. ANSI 兼容的预定义宏 __FILE__,__L ...

  6. 如何保证RabbitMQ的消息不丢失及其背后的原理

    一.消息为什么丢失 RabbitMQ默认情况下的交换机和队列以及消息是非持久化的,也就是说在服务器重启或者宕机恢复后,之前创建的交换机和队列都将不复存在,之前未消费的消息也就消失不见了.原因在于每个队 ...

  7. Linux作为路由器(一)

    前言:Linux主机可以作为路由器使用,利用路由转发功能实现不同网络内的主机能够相互通信,利用iptables的SNAT功能来实现企业内网主机访问互联网,下面做个小的实验. 实验环境:VM (1)路由 ...

  8. c++重载>>和<<

    在重载输出输入运算符的时候,只能采用全局函数的方式(因为我们不能在ostream和istream类中编写成员函数),这里才是友元函数真正的应用场景.对于输出运算符,主要负责打印对象的内容而非控制格式, ...

  9. C语言一闪而过

    头文件#include<stdlib.h> main函数system("pause");

  10. cocos2dx遇到的坑2

    记录下在cocos2dx 2.x时代遇到的问题 1.cocos2dx   retain 在onenter时,在onexit时 release 2.先结束定时器再退出界面 3.在不同帧里数据是有可能不一 ...