一、需求

使用 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' // 验证码字符中排除 0o1i
  • noise: 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 做验证码及验证的更多相关文章

  1. NodeJs生成SVG图形验证码

    背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求: 1)不能使用文本式的验证码,很简单就能拿到 2)所有验证逻辑 ...

  2. springboot security+redis+jwt+验证码 登录验证

    概述 基于jwt的token认证方案 验证码 框架的搭建,可以自己根据网上搭建,或者看我博客springboot相关的博客,这边就不做介绍了.验证码生成可以利用Java第三方组件,引入 <dep ...

  3. flask实现验证码并验证

    效果图: 点击图片.刷新页面.输入错误点击登录时都刷新验证码 实现步骤: 第一步:先定义获取验证码的接口 verificationCode.py #验证码 @api.route('/imgCode') ...

  4. C正则库做DNS域名验证时的性能对比

    C正则库做DNS域名验证时的性能对比   本文对C的正则库regex和pcre在做域名验证的场景下做评测. 验证DNS域名的正则表达式为: "^[0-9a-zA-Z_-]+(\\.[0-9a ...

  5. MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证

    Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html 系列 ...

  6. Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  7. SVG如何做圆形图片

    SVG如何做圆形图片 2016年5月31日17:30:48 提到圆形图片,大家首先想到的一定是border-radius,但在SVG中这些方法很难起效,下面方法适合SVG中制作任意规则与不规则的图形. ...

  8. ubuntu 安装(install) pwntcha[一个做"验证码识别"的开源程序]

    一.安装 1. sudo apt-get install libsdl1.2-dev libsdl1.2debian sudo apt-get install libsdl1.2-dev(比较大,10 ...

  9. NodeJS什么都能做,为什么还要JAVA?

    这张图看起来简单而且很好理解,但没尝试过,会有很多疑问. SPA模式中,后端已供了所需的数据接口,view前端已经可以控制,为什么要多加NodeJS这一层? 多加一层,性能怎么样? 多加一层,前端的工 ...

随机推荐

  1. 前馈控制+PID

    参考来源: 北京交通大学 硕士学位论文 基于脉冲串控制的含位置反馈和前馈补偿的位置控制算法的研究  赵旺升

  2. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  3. 如何制作icon-font小图标

    1.首先可以去iconfont.cn阿里巴巴矢量字体库中下载你想要的图标(选择格式为SNG格式). 2.打开iconmoon这个网站(这个样子的),然后点击右上角那个Iconfont App如下图: ...

  4. 浏览器默认解析文档模式IE7

    背景:实习期间开发了一套页面,兼容到IE8+,可是在给产品体验时,他的QQ浏览器默认解析到了文档模式IE7,出现了页面的兼容性问题.问题排查:QQ浏览器目前有两个模式,极速模式和兼容模式,其中极速模式 ...

  5. 一块小饼干(Cookie)的故事-上篇

    cookie 如果非要用汉语理解的话应该是 一段小型文本文件,由网景的创始人之一的卢 蒙特利在93年发明. 上篇是熟悉一下注册的大致流程,下篇熟悉登录流程以及真正的Cookie 实现基本的注册功能 我 ...

  6. 给大家补充一个结构体的例子:下面TwoNumber就是一个形式上的结构体

    给大家补充一个结构体的例子:下面TwoNumber就是一个形式上的结构体: class TwoNumber {     int num1;     int num2; } public class T ...

  7. Power App用到的一些函数

    1.Filter([表名],查询条件&&查询条件),会返回一张表: 2.Search([表名], "值", "字段名"),会返回一张表: 3.L ...

  8. Protoc安装

    系统:linux 记住,千万别混乱版本,一般protoc可执行文件在/usr/local/bin/或/usr/bin/下 个人这里使用3.13版本示例,下面两部分命令可以写入shell脚本,记住执行要 ...

  9. 学习打卡——Mybatis—Plus

    今天看完了Mybatis-Plus的视频,在某些方面来看MP确实简化了很多操作,比如自动生成代码等等.学习过程的代码实例也到同步到了gitee和github

  10. Java学习day4

    今天学习了String以及StringBuider 其中较为重点的除了用法以外,还有,String对象以""方式给出的字符串,只要字符序列相同(即顺序和大小写)无论在代码中重复几次 ...