OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

Node.JS用纯JavaScript生成图片或滑块式验证码


分享到


分类 大话编程   关键字 分享   发布 ourjs  1568199867628
注意 转载须保留原文链接,译文链接,作者译者等信息。  
有一些Node.JS图片生成类库,比如node-captcha等的类库,需要c/c++程序生成图片。跨平台部署不是很方便。这里介绍几个用纯JS实现的图片验证码生成模块。

captchapng


用纯JavaScript实现的验证码生成模块。

https://github.com/GeorgeChan/captchapng

安装简单,依赖少:

npm install captchapng

示例:

var captchapng = require('captchapng');

app.get('/sign/captcha.png', function(req, res) {
  var captchaNumber   = parseInt(Math.random() * 9000 + 1000)

  req.session.captcha = captchaNumber

  var p = new captchapng(80,20, captchaNumber); // width,height,numeric captcha
  p.color(0, 0, 0, 0);  // First color: background (red, green, blue, alpha)
  p.color(80, 80, 80, 255); // Second color: paint (red, green, blue, alpha)

  var img = p.getBase64();
  var imgbase64 = new Buffer(img,'base64');
  res.writeHead(200, {
      'Content-Type': 'image/png'
  });
  res.end(imgbase64);
})


Express + Captcha


为Express框架设计的验证码生成模块。

https://github.com/napa3um/node-captcha

安装&示例:

$ npm install captcha
Usage (for Express 4)
'use strict'

const express = require('express')
const session = require('express-session')
const bodyParser = require('body-parser')

const captchaUrl = '/captcha.jpg'
const captchaId = 'captcha'
const captchaFieldName = 'captcha'

const captcha = require('./captcha').create({ cookie: captchaId })

const app = express()
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true,
}))
app.use(bodyParser.urlencoded({ extended: false }))

app.get(captchaUrl, captcha.image())

app.get('/', (req, res) => {
    res.type('html')
    res.end(`
        <img src="${ captchaUrl }"/>
        <form action="/login" method="post">
            <input type="text" name="${ captchaFieldName }"/>
            <input type="submit"/>
        </form>
    `)
})

app.post('/login', (req, res) => {
    res.type('html')
    res.end(`
        <p>CAPTCHA VALID: ${ captcha.check(req, req.body[captchaFieldName]) }</p>
    `)
})

app.listen(8080, () => {
    console.log('server started')
})

前端滑块验证

前端生成轨迹发送到后端验证,输入简单,但是容易被破解。



https://gitee.com/LongbowEnterprise/SliderCaptcha
评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. Node.JS的竞争对手?QuickJS入门教程,使用os模块读写文件,并将JavaScript编绎成可执行文件
  2. 在嵌入式设备树莓派上编译QuickJS教程:一个C语言编写的极简JavaScript引擎
  3. Facebook发布全新JavaScript引擎Hermes:越来越像Java字节码,JS要统一全端?
  4. 让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
  5. node.js函数如何获取调用者的文件目录路径: 用callsite获取错误堆栈的每一层文件名及路径
  6. 华为鸿蒙操作系统想要取代Android几乎不太可能
  7. 在Windows平台上用命令行创建tar.gz压缩包和解压
  8. Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
  9. 树莓派ARM开发板使用TF卡启动和系统安装到EMMC启动,硬盘存储读写速度对比测试
  10. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - 大话编程
  1. 树莓派ARM开发板使用TF卡启动和系统安装到EMMC启动,硬盘存储读写速度对比测试
  2. Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
  3. 在Windows平台上用命令行创建tar.gz压缩包和解压
  4. node.js函数如何获取调用者的文件目录路径: 用callsite获取错误堆栈的每一层文件名及路径
  5. 华为鸿蒙操作系统想要取代Android几乎不太可能
  6. GO有语法缺陷,缺少泛型、public/private、三元运算符?我不喜欢 Go 语言的十个理由
  7. 微服务运维难维护?数据基础架构公司Segment宣布放弃微服务构架
  8. Redis/Python被要求更改Master/Slave程序接口名称和描述
  9. 为jquery的ajax请求添加超时timeout时间
  10. 上海行业工资排名:产品经理一骑绝尘,前端排名第二?

 关键字 - 分享
  1. Node.JS用纯JavaScript生成图片或滑块式验证码
  2. 树莓派ARM开发板使用TF卡启动和系统安装到EMMC启动,硬盘存储读写速度对比测试
  3. Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
  4. 一位自由职业者的分享:程序员怎样找兼职?
  5. 在Windows平台上用命令行创建tar.gz压缩包和解压
  6. node.js函数如何获取调用者的文件目录路径: 用callsite获取错误堆栈的每一层文件名及路径
  7. 华为鸿蒙操作系统想要取代Android几乎不太可能
  8. 我为什么不再用Compass写CSS(缺点分析)
  9. 怎样用纯HTML和CSS更改默认的上传文件按钮样式
  10. 对于现代开发来说,JavaScript就是一种垃圾语言

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号