一、需求

使用 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. 转Gerber和拼版

    1 Gerber 这个网上有现成的教程:(不要写网上能找到的资料-敏捷开发) AD 导出Gerber :https://jingyan.baidu.com/article/3c48dd3494181c ...

  2. (SSM框架)实现小程序图片上传(配小程序源码)

    阅读本文约"2分钟" 又是一个开源小组件啦! 因为刚好做到这个小功能,所以就整理了一下,针对微信小程序的图片(文件)上传! 原业务是针对用户反馈的图片上传.(没错,本次还提供小程序 ...

  3. CSS简单样式练习(五)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  4. EMS邮件统计

    前提条件:管理员拥有"Organization Management"权限.并且启用邮件跟踪日志. 1.统计时间段内邮件发送情况 案例任务:统计一段时间内服务器"MAIL ...

  5. FreeSql的各种工程demo上新啦

    FreeSql的各种工程demo GitHub | Gitee console,winforms nf461,vb,wpf,webapi,workerSevice,signalIR xamarinFo ...

  6. Java基础之浅谈接口

    前言 前几篇文章我们已经把Java的封装.继承.多态学习完了,现在我们开始比较便于我们实际操作的学习,虽然它也是Java基础部分,但是其实入门容易,精通很难. 我认真的给大家整理了一下这些必须学会.了 ...

  7. 申请百度翻译API

    申请百度翻译API 0x00 前期准备 百度账号 md5的相关知识 0x01 进入百度开放平台,登录你的百度账号 找到 产品服务 -> 通用翻译API 0x02 点击下面的立即使用按钮,注册成为 ...

  8. 电机三环pid控制及调试经验

    一.伺服电机的双环pid 双环pid在正常底盘运动的控制中已经足够了,但是对于双轴云台的控制来说,双环pid的云台控制的响应速度是远远不够的,所以加入了电流环的控制. 两篇大佬的文章--这是我学习pi ...

  9. Java学习day26

    进程.多任务 1.例如吃饭的时候玩手机,边上厕所边玩手机,看似是同时做多个事情,本质上我们的大脑在同一时间只做了一件事情,这就是多任务 2.道路窄的时候容易造成拥堵,可以拓宽道路,加多车道,同一个方向 ...

  10. 省掉80%配置时间,这款Mock神器免费又好用

    前端的痛苦 作为前端,最痛苦的是什么时候? 每个迭代,需求文档跟设计稿都出来了,静态页面唰唰两天就做完了.可是做前端又不是简单地把后端吐出来的数据放到页面上就完了,还有各种前端处理逻辑啊. 后端接口还 ...