用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...

後端代碼以下：

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())將生成的圖片返回到客戶端。