So generieren Sie mithilfe des Knotens einen Bestätigungscode

In diesem Artikel erfahren Sie, wie Sie den Knoten zum Generieren von Bestätigungscodes verwenden. Freunde in Not können sich darauf beziehen.

Vorwort

Netzwerksicherheit ist immer ein wichtiges Thema. Wenn Sie beispielsweise feststellen, dass jemand in böswilliger Absicht die E-Mail-Registrierungsoberfläche Ihrer Website anfordert, können Sie darüber nachdenken, einen Bestätigungscode hinzuzufügen Server zur Verbesserung In Bezug auf die Website-Sicherheit wird in diesem Artikel erläutert, wie der Knoten zum Implementieren eines Bestätigungscodes verwendet wird.

Frontend-Teil

Die Frontend-Anzeige sieht wie folgt aus:

Beachten Sie, dass, wenn der Benutzer auf das Bild klickt, Ein neues Bild muss aktualisiert werden, weil Der Browser speichert dasselbe Bild zwischen, daher muss die Caching-Situation hier behandelt werden. Hier füge ich den aktuellen Zeitstempel zur Bildadresse hinzu, um den Zweck der Aktualisierung zu erreichen. Der Code lautet wie folgt:

HTML-Teil

  <p>
    <input>
    <img  alt="So generieren Sie mithilfe des Knotens einen Bestätigungscode" >
  </p>

js-Teil

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

Backend-Teil

Zuerst installiert npm das GD-BMP-Modul: npm i gd-bmp --save
Dies ist eine effiziente und 100 % JS-Anwendungsgrafikbibliothek, die das Zeichnen von Punkten, Linien, Kurven, Rechtecken, Kreisen usw. unterstützt. Die Adresse lautet wie folgt:
https://github.com/zengming00.. .

Der Backend-Code lautet wie folgt:

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>Die Funktion makeCapcha wird zum Generieren des Bestätigungscodes verwendet. Da das Bildformat BMP ist, ist der Antwortheadertyp auf <code>image/bmp</code> festgelegt. Abschließend wird das generierte Bild an den Client zurückgegeben. <code>res.end(img.getFileData())</code></p>Verwandte Empfehlungen: <p class="post-topheader custom- pt0"></p><p class="post-topheader custom- pt0">Praktische Analyse von TypeScript in Knotenprojekten<a href="http://www.php.cn/js-tutorial-406881.html" target="_blank" title="关于TypeScript在node项目中的实践分析"></a><br></p><div></div>

Das obige ist der detaillierte Inhalt vonSo generieren Sie mithilfe des Knotens einen Bestätigungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!