nodejs使用 svg-captcha 做验证码及验证
一、需求
使用 nodejs 做后端开发,需要请求验证码,在 github 上看到了 svg-captcha 这个库,发现他是将 text 转 svg 进行返回的,安全性也有保证,不会被识别成文字。
二、基本使用
安装:
yarn add svg-captcha
1) 创建普通验证码:
const svgCaptcha = require('svg-captcha');
const cap = svgCaptcha.create();
console.log(cap);
// {data: '<svg.../svg>', text: 'abcd'}
调用 create() 之后,会返回一个对象,结构如下:{data:'',text:''}。
data:验证码 svg 图片text: 验证码字符
create()的参数如下:
size: 4 // 验证码长度ignoreChars: '0o1i' // 验证码字符中排除 0o1inoise: 1 // 干扰线条的数量color: true // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有background: '#cc9966' // 验证码图片背景颜色
示例:
2) 创建算数式验证码
const cap = svgCaptcha.createMathExpr(options)
示例:

三、在 express 中使用
在网页中使用验证码的时候,无非是请求一个 URL ,返回一个验证码图片。
1) express 中构建一个 /captcha 的路由:
const express = require('express');
const captcha = require('svg-captcha');
const router = express.Router();
router.get('/',(req,res)=>{
const cap = captcha.createMathExpr();
req.session.captcha = cap.text; // session 存储
res.type('svg'); // 响应的类型
res.send(cap.data);
});
2) 前端使用
<img
src="/captcha"
onclick={$(event.target).attr('src','/captcha?'+Math.random())}>

来源:http://zhouyi.run
nodejs使用 svg-captcha 做验证码及验证的更多相关文章
- NodeJs生成SVG图形验证码
背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求: 1)不能使用文本式的验证码,很简单就能拿到 2)所有验证逻辑 ...
- springboot security+redis+jwt+验证码 登录验证
概述 基于jwt的token认证方案 验证码 框架的搭建,可以自己根据网上搭建,或者看我博客springboot相关的博客,这边就不做介绍了.验证码生成可以利用Java第三方组件,引入 <dep ...
- flask实现验证码并验证
效果图: 点击图片.刷新页面.输入错误点击登录时都刷新验证码 实现步骤: 第一步:先定义获取验证码的接口 verificationCode.py #验证码 @api.route('/imgCode') ...
- C正则库做DNS域名验证时的性能对比
C正则库做DNS域名验证时的性能对比 本文对C的正则库regex和pcre在做域名验证的场景下做评测. 验证DNS域名的正则表达式为: "^[0-9a-zA-Z_-]+(\\.[0-9a ...
- MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html 系列 ...
- Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...
- SVG如何做圆形图片
SVG如何做圆形图片 2016年5月31日17:30:48 提到圆形图片,大家首先想到的一定是border-radius,但在SVG中这些方法很难起效,下面方法适合SVG中制作任意规则与不规则的图形. ...
- ubuntu 安装(install) pwntcha[一个做"验证码识别"的开源程序]
一.安装 1. sudo apt-get install libsdl1.2-dev libsdl1.2debian sudo apt-get install libsdl1.2-dev(比较大,10 ...
- NodeJS什么都能做,为什么还要JAVA?
这张图看起来简单而且很好理解,但没尝试过,会有很多疑问. SPA模式中,后端已供了所需的数据接口,view前端已经可以控制,为什么要多加NodeJS这一层? 多加一层,性能怎么样? 多加一层,前端的工 ...
随机推荐
- Altium Designer 开始一个项目
通常一个嵌入式开发都需要一个开发板,这就涉及到原理图设计和PCB设计等流程.目前比较主流的设计软件当属Altium Designer了,于是便向写一个关于这方面的专题,也好总结一下,省得以后忘记. A ...
- spark配置双master时一直处于standby的情况
一.情况描述 按照如下配置,使用zookeeper监听 SPARK_DAEMON_JAVA_OPTS="-Dspark.deploy.recoveryMode=ZOOKEEPER -Dspa ...
- 阿里云申请SSL证书 并部署到SpringBoot项目
前提 有一台阿里云的服务器(安装了java环境) 有已经备案的域名,并且域名绑定上面的服务器 申请SSL证书 申请教程:https://blog.csdn.net/yunweifun/article/ ...
- AgileConfig 1.6.0 发布 - 支持服务注册与发现
大家好,好久没有输出博文了,一是因为比较忙,另外一个原因是最近主要的精力是在给 AgileConfig 添加一个新的功能:服务注册与发现. 先说说为什么会添加这个功能.我自己的项目是用 Consul ...
- Java学习day18
学习了三种简单的布局结构 做了一个简单的多按键窗口 Panel无法单独存在而显示出来,需要借助一个容器,例如Frame 明天学习输入框监听和画笔
- vue 滚动条样式设置
App.vue 文件下加入下面css // 滚动条宽度 ::-webkit-scrollbar{ width: 6px; } /* 定义滚动条轨道 */ ::-webkit-scrollb ...
- 整理display:none;和visibility:hidden;和overflow:hidden;的区别
1.display:none; 这个属性隐藏元素,不占网页任何空间,彻底隐藏,消失 2.visibility:hidden; 占据空间,但是无法点击.隐藏了这个层,看不到,却能摸得着 3.over ...
- Java语言学习day36--8月11日
###10集合迭代中的转型 A:集合迭代中的转型 a:在使用集合时,我们需要注意以下几点: 集合中存储其实都是对象的地址. 集合中可以存储基本数值吗?jdk1.5版本以后可以存储了. 因为出现 ...
- jsp第二周作业
1.p39 实验2 显示当前时间,并输出上午(0-12)好,下午好(13-17),晚上好(18-23) <%@ page language="java" import=&qu ...
- 机器学习实战:用SVD压缩图像
前文我们了解了奇异值分解(SVD)的原理,今天就实战一下,用矩阵的奇异值分解对图片进行压缩. Learn by doing 我做了一个在线的图像压缩应用,大家可以感受一下. https://huggi ...