ノードを使用して検証コードを生成する方法

この記事では、ノードを使用して検証コードを生成する方法を説明します。必要な友人はそれを参照できます。

前書き

ネットワーク セキュリティは常に重要なトピックです。たとえば、誰かが Web サイトの電子メール登録インターフェイスを悪意を持って要求していることがわかった場合は、Web サイトのセキュリティを向上させるためにサーバーに確認コードを追加することを検討できます。この記事では、ノードを使用して検証コードを実装する方法について説明します。

フロントエンド部分

フロントエンドの表示は次のとおりです:

ユーザーが画像をクリックすると、ブラウザは同じ画像をキャッシュするため、新しい画像を更新する必要があることに注意してください。ここでキャッシュの状況を処理する必要があります。ここでは、リフレッシュの目的を達成するために、イメージ アドレスに現在のタイムスタンプを追加します。コードは次のとおりです:

html パート

  <p>
    <input>
    <img  alt="ノードを使用して検証コードを生成する方法" >
  </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 --savenpm 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>これは効率的な 100% JS アプリケーション グラフィック ライブラリで、点、線、曲線、長方形、円などの描画をサポートします。アドレスは次のとおりです: </p>https://github.com/zengming00... <p class="post-topheader custom- pt0"></p>バックエンド コード<p class="post-topheader custom- pt0">rrreee<a href="http://www.php.cn/js-tutorial-406881.html" target="_blank" title="关于TypeScript在node项目中的实践分析">関数 makeCapcha 画像形式が bmp であるため、応答ヘッダーのタイプは <code>image/bmp</code> に設定されます。 最後に、<code>res.end() を渡します。 img.getFileData())</code> to 生成されたイメージがクライアントに返されます。 </a><br>関連する推奨事項: </p><div></div>ノードプロジェクトにおける TypeScript の実践的な分析🎜🎜🎜🎜🎜

以上がノードを使用して検証コードを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。