Comment utiliser le nœud pour générer un code de vérification

Cet article vous explique comment utiliser le nœud pour générer des codes de vérification. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos

La sécurité du réseau est toujours un sujet important. Par exemple, lorsque vous constatez que quelqu'un demande de manière malveillante l'interface d'enregistrement par courrier électronique de votre site Web, vous pouvez alors envisager d'ajouter un code de vérification sur le site Web. serveur à améliorer Concernant la sécurité du site Web, cet article expliquera comment utiliser Node pour implémenter un code de vérification.

Partie front-end

L'affichage front-end est le suivant :

Notez que lorsque l'utilisateur clique sur l'image, une nouvelle image doit être actualisée, car le navigateur mettra en cache la même image, la situation de mise en cache doit donc être traitée ici. Ici, j'utilise pour ajouter l'horodatage actuel à l'adresse de l'image pour atteindre l'objectif d'actualisation. Le code est le suivant :

partie html

  <p>
    <input>
    <img  alt="Comment utiliser le nœud pour générer un code de vérification" >
  </p>

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

partie backend

Tout d'abord, installez le module gd-bmp avec npm :npm i gd-bmp --save
Il s'agit d'une bibliothèque graphique d'application efficace et 100% js qui prend en charge le dessin de points, lignes, courbes, rectangles, cercles, etc. L'adresse est la suivante :
https://github. com/zengming00...

Le code back-end est le suivant :

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>La fonction makeCapcha est utilisée pour générer le code de vérification. Parce que le format de l'image est bmp, la réponse. le type d'en-tête est défini sur <code>image/bmp</code> Enfin, via <code>res.end(img.getFileData())</code> Renvoyez l'image générée au client. </p><p class="post-topheader custom- pt0">Recommandations associées : </p><p class="post-topheader custom- pt0"><a href="http://www.php.cn/js-tutorial-406881.html" target="_blank" title="关于TypeScript在node项目中的实践分析">Analyse pratique de TypeScript dans les projets de nœuds</a><br></p><div></div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!