Heim > Web-Frontend > js-Tutorial > Hauptteil

So generieren Sie mithilfe des Knotens einen Bestätigungscode

不言
Freigeben: 2018-07-23 11:43:52
Original
1286 Leute haben es durchsucht

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:
So generieren Sie mithilfe des Knotens einen Bestätigungscode

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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="//m.sbmmt.com/js-tutorial-406881.html" target="_blank" title="关于TypeScript在node项目中的实践分析"></a><br></p><div></div>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!