首頁 > web前端 > js教程 > 主體

如何使用node產生驗證碼

不言
發布: 2018-07-23 11:43:52
原創
1316 人瀏覽過

這篇文章給大家分享的內容是關於如何使用node產生驗證碼,有一定的參考價值,有需要的朋友可以參考一下。

前言

網路安全始終是一個重要話題,例如當你發現有人在惡意請求你的網站的郵箱註冊接口,那麼你可以考慮在服務端加上驗證碼,提高網站的安全性,本文就來談談如何用node實作一個驗證碼。

前端部分

前端顯示如下:
如何使用node產生驗證碼

#注意一點,當使用者點擊圖片的時候,需要刷新新的圖片,因為瀏覽器會對同一個圖片進行緩存,所以這裡需要處理快取的情況。我這裡採用給圖片地址加上當前時間戳記來達到刷新的目的。程式碼如下:

html部分

  <p>
    <input>
    <img  alt="如何使用node產生驗證碼" >
  </p>
登入後複製

js部分

  <script></script>
  <script>
    new Vue({
      el: &#39;#app&#39;,
      data: {
        authImgUrl: &#39;&#39;
      },
      created () {
        this.authImgUrl = &#39;http://localhost:3000/&#39;
      },
      methods: {
        changeAuthImg () {
          this.authImgUrl = &#39;http://localhost:3000/&#39; + &#39;?&#39; + 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 <p>函數makeCapcha用來產生驗證碼,因為圖片格式bmp的,所以設定回應頭類型為<code>image/ bmp</code>,最後,透過<code>res.end(img.getFileData())</code>將產生的圖片傳回客戶端。 </p><p class="post-topheader custom- pt0">相關推薦:</p><p class="post-topheader custom- pt0"><a href="http://www.php.cn/js-tutorial-406881.html" target="_blank" title="关于TypeScript在node项目中的实践分析">關於TypeScript在node專案中的實作分析</a><br></p><div></div>
登入後複製

以上是如何使用node產生驗證碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板