0

0

如何使用node生成验证码

不言

不言

发布时间:2018-07-23 11:43:52

|

1562人浏览过

|

来源于php中文网

原创

这篇文章给大家分享的内容是关于如何使用node生成验证码,有一定的参考价值,有需要的朋友可以参考一下。

前言

网络安全始终是一个重要话题,比如当你发现有人在恶意请求你的网站的邮箱注册接口,那么你可以考虑在服务端加上验证码,提高网站的安全性,本文就谈谈如何用node实现一个验证码。

前端部分

前端显示如下:
图片描述

注意一点,当用户点击图片的时候,需要刷新新的图片,因为浏览器会对同一个图片进行缓存,所以这里需要处理缓存的情况。我这里采用给图片地址加上当前时间戳来达到刷新的目的。代码如下:

html部分

  

@@##@@

js部分

  
  

后端部分

首先,npm安装gd-bmp模块:npm i gd-bmp --save
这是一个高效并且100%js应用图形库,支持画点,线,曲线,矩形,圆形等等,地址如下:
https://github.com/zengming00...

良精asp生成html网店
良精asp生成html网店

建一个网站,就像修改QQ个资料一样方便! asp生成html+ACCESS后台用户名admin密码admin888 验证码 admin良精网店购物系统是一套能够适合不同类型商品、超强灵活的多功能在线商店系统,为您提供了一个完整的在线开店解决方案。良精网店购物系统除了拥有一般网上商店系统所具有的所有功能,还拥有着其它网店系统没有的许多超强功能。多种独创的技术使得系统能满足各行业广大用户的各种各样的需

下载

后端代码如下:

var http = require('http')

var BMP24 = require('gd-bmp').BMP24

// 生成随机数
function rand (min, max) {
  return Math.random() * (max - min + 1) + min | 0 // 特殊的技巧,|0可以强制转换为整数,向下舍入
}

// 制造验证码图片
function makeCapcha() {
  let img = new BMP24(100, 40) // 长100, 高40
  // 背景颜色
  img.fillRect(0, 0, 100, 40, 0xffffff) // 白色
  // 画曲线
  var w = img.w / 2
  var h = img.h
  var color = rand(0, 0xffffff)
  var y1 = rand(-5, 5) // Y轴位置调整
  var w2 = rand(10, 15) // 数值越小频率越高
  var h3 = rand(3, 5) //数值越小幅度越大
  var bl = rand(1, 5)
  for (let i = -w; i < w; i += 0.1) {
    var y = Math.floor(h / h3 * Math.sin(i / w2) + h / 2 + y1)
    var x = Math.floor(i + w)
    for (let j = 0; j < bl; j++) {
      img.drawPoint(x, y + j, color)
    }
  }

  // 生成字符
  let p = 'ABCDEFGHKMNPQRSTUVWXYZ1234567890'
  let str = ''
  for (var i = 0; i < 4; i++) { // 生成4个字符
    str += p.charAt(Math.random() * p.length | 0)
  }
  console.log(str)

  var fonts = [BMP24.font12x24, BMP24.font16x32]
  var x = 15
  for (var i = 0; i < str.length; i++) {
    let f = fonts[Math.random() * fonts.length | 0]
    y = 8 + rand(-10, 10)
    img.drawChar(str[i], x, y, f, rand(0, 0xffffff))
    x += f.w + rand(2, 8)
  }
  return img
}

// 创建http服务器
http.createServer(function (req, res) {
  if (req.url === '/favicon.ico') {
    return res.end()
  }
  let img = makeCapcha()
  res.setHeader('Content-Type', 'image/bmp')
  res.end(img.getFileData())
}).listen(3000)

console.log('localhost:3000')

函数makeCapcha用于生成验证码,因为图片格式bmp的,所以设置响应头类型为image/bmp,最后,通过res.end(img.getFileData())将生成的图片返回到客户端。

相关推荐:

关于TypeScript在node项目中的实践分析

如何使用node生成验证码

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

43

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

35

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

204

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

9

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

8

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 7.7万人学习

【web前端】Node.js快速入门
【web前端】Node.js快速入门

共16课时 | 1.9万人学习

Node.js-前端工程化必学
Node.js-前端工程化必学

共19课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号