如何使用node生成验证码

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月3日23:17:20 评论 8 views 2082字阅读6分56秒

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

前言

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

前端部分

前端显示如下:
图片描述

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

html部分

  <p id="app">
    <input type="text" placeholder="请输入验证码" style="vertical-align: text-bottom;">
    <img :src="authImgUrl" style="border: solid 1px darkgray; vertical-align: text-bottom;" @click="changeAuthImg"/>
  </p>

js部分

  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        authImgUrl: ''
      },
      created () {
        this.authImgUrl = 'http://localhost:3000/'
      },
      methods: {
        changeAuthImg () {
          this.authImgUrl = 'http://localhost:3000/' + '?' + new Date().getTime()
        }
      }
    })
  </script>

后端部分

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

后端代码如下:

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教程其它相关文章!

继续阅读
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: