Maison > interface Web > js tutoriel > le corps du texte

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

不言
Libérer: 2018-07-23 11:43:52
original
1317 Les gens l'ont consulté

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 :
Comment utiliser le nœud pour générer un code de vérification

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal