一、需求

使用 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. html 常用标签及基本用法

    一个网页基本是由 结构(html) + 样式(css) + 脚本(js) 组成.学习的话 应该从最基本的标签开始, 结构清晰了, 再用css美化, 最后可以用脚本加上特效 块级 和 行类标签 特点: ...

  2. 微信小程序调研

    小程序入口 微信发现,小程序 公众号主体查看小程序 好友分享,群分享 公众号自定义菜单跳转 APP页面跳转 第三方服务 附近的小程序 扫普通链接二维码打开小程序 需要后台开启功能,开启后,用户在微信& ...

  3. 有关表单autocomplete = "off" 失效问题解决方案

    一.autocomplete介绍 autocomplete是Html5中的新属性.该属性规定输入字段是否应该启用自动完成功能.自动完成允许浏览器预测对字段的输入.当用户在字段开始键入的时候,浏览器基于 ...

  4. python计算项目净现值和内部回报率

     代码: import numpy as np from numpy import irr import warnings def project(number, period_list): rate ...

  5. linux-RHEL7.0 —— 《Linux就该这么学》阅读笔记

    目录 linux-RHEL7.0 安装部署 修改root密码 RPM(红帽软件包管理器) YUM(软件仓库) Systemd初始化进程 总结 linux命令 帮助命令 man 系统工作命令 echo ...

  6. 存储过程 psal emp.sal%type是什么意思

    psal emp.sal%type 就是指psal这个变量是引用了表emp中的sal字段的类型.如果emp表中sal的类型变了,psal这个字段的类型也会跟着变化,总之,psal和表emp中sal字段 ...

  7. JavaSE常用类之Object类

    1. hashCode方法 代码: package NeiBuLei; public class hashCode { public static void main(String[] args) { ...

  8. Spring5-IOC容器实现方式

    spring提供了两个接口实现IOC容器 (1)BeanFactory:IOC容器基本实现,是Spring内部使用的接口,不提倡开发人员使用 特点:加载配置文件时侯不会创建对象,在获取对象时才会创建对 ...

  9. 前端之HTML标签

    一:HTML简介 1.超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言. 2.本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则 ...

  10. hutool工具类常用API整理

    0.官网学习地址 https://www.hutool.cn/ 1.依赖 <dependency> <groupId>cn.hutool</groupId> < ...