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这一层? 多加一层,性能怎么样? 多加一层,前端的工 ...
随机推荐
- css中几个重要概念
替换元素与非替换元素 替换元素:是指浏览器根据元素的标签和属性来决定元素的具体内容. 例如"<img src="xx.jpg">浏览器会根据标签的src属性的 ...
- 《css揭秘》读书笔记
第一章 引言 css编码技巧 在引言中,作者提到使用em与inherit来实现css代码的简洁与可维护性.但是根据本司机两年的开发经验来看,在实际开发中很少来使用em这个单位.如何用以及何时去使用,还 ...
- 用纯CSS实现优雅的tab页
说明 又是一个练手的小玩意儿,本身没什么技术含量,就是几个不常用的CSS3特性的结合而已. 要点 Label标签的for属性 单选框的:checked伪类 CSS的加号[+]选择器 效果图 原理 通常 ...
- 获取bootstrap模态框点击的对应项(e.relatedTarget.dataset)
//获取绑定的自定义属性值<ul> <li data-toggle="modal" data-index="电表1111" data-targ ...
- Java报错:Failed to execute goal org.eclipse.jetty:jetty-maven-plugin:9.4.26.v20200117:run (default-cli) on project ssm-mybatis-plus: Failure
修改一下端口就好了,不要用80端口. <plugin> <groupId>org.eclipse.jetty</groupId> <!--嵌入式Jetty的M ...
- win2008升级mysql5.7.20步骤总结
环境: 系统:红帽5.5 旧版mysql:5.5 新版mysql:5.7.20 前期准备: 1.备份旧版mysql数据,不知道data目录在哪可以在my.ini配置文件里面查看datadir指定的目录 ...
- 01 | 堆、栈、RAII:C++里该如何管理资源?(极客时间笔记)
基本概念 堆,英文是 heap,在内存管理的语境下,指的是动态分配内存的区域.这个堆跟数据结构里的堆不是一回事.这里的内存,被分配之后需要手工释放,否则,就会造成内存泄漏. C++ 标准里一个相关概念 ...
- Vmware虚拟机三种网络模式详解(转载)
原文来自http://note.youdao.com/share/web/file.html?id=236896997b6ffbaa8e0d92eacd13abbf&type=note 由于l ...
- STL空间配置器源码分析(四)bitmap_allocator
一.摘要 bitmap_allocator是STL空间分配器的其中一种,它采用内存池策略,最多存储64条空闲链表(freelist,实际是一块空间连续的内存区,后面也称为超级块),每条空闲链表存储的内 ...
- innodb源码解析 - mem0_.c - 基本内存管理
The basic element of the memory management is called a memoryheap. A memory heap is conceptually ast ...