用node生成验证码【面试+工作】

前言

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

前端部分

前端显示如下：

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

html部分

  <div 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"/>

  </div>

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/node-gd-bmp

后端代码如下：

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())将生成的图片返回到客户端。