Node crée un code de vérification d'image lors de la connexion

Cette fois, je vais vous apporter le code de vérification d'image lorsque node crée une image de connexion. Quelles sont les précautions à prendre pour que node crée un code de vérification d'image lors de la connexion Voici un cas pratique, jetons un coup d'oeil.

Pour implémenter le code de vérification graphique ici, j'utilise le module svg-captcha dans node, qui peut prendre en charge tous les caractères et chiffres. Il est pris en charge par toutes les plateformes et est très simple à utiliser.

1. Installez

cnpm i svg-captcha --save

2. Importez

var svgCaptcha = require('svg-captcha');

3 là où il est utilisé.Obtenez le code de vérification

3-1 Installercookie-parser, la fonction est d'enregistrer la session obtenue dans un cookie pour faciliter la vérification de l'accès frontal

cnpm i cookie-parser --save

3-2 Utilisez cookie-parser

const cookieParase = require('cookie-parser');
app.use(cookieParase());

pour utiliser des cookies dans le projet

3-3 Obtenez le code de vérification

// 获取验证码
 getCaptcha(req, res, next){
  var captcha = svgCaptcha.create({ 
   // 翻转颜色 
   inverse: false, 
   // 字体大小 
   fontSize: 36, 
   // 噪声线条数 
   noise: 2, 
   // 宽度 
   width: 80, 
   // 高度 
   height: 30, 
  }); 
  // 保存到session,忽略大小写 
  req.session = captcha.text.toLowerCase(); 
  console.log(req.session); //0xtg 生成的验证码
  //保存到cookie 方便前端调用验证
  res.cookie('captcha', req.session); 
  res.setHeader('Content-Type', 'image/svg+xml');
  res.write(String(captcha.data));
  res.end();
 },

Faites ceci C'est juste implémente la fonction de génération de code de vérification, alors qu'en est-il de l'accès ?

4. Écrire le routage en arrière-plan

// 获取验证码
router.get('/api/getCaptcha', function(req, res, next) {
 return api.getCaptcha(req, res, next);
})

Lorsque le front-end appelle l'interface /api/getCaptcha, les informations du code de vérification sont renvoyées au format SVG

5. Accès frontal

<img src="/api/getCaptcha" alt="captcha" >

Mais maintenant, nous avons à nouveau besoin lorsque vous cliquez sur ce code de vérification. sera actualisé

6. Implémentez l'actualisation du code de vérification des clics

Modifiez le résultat du code de vérification tout à l'heure, ajoutez-y une étiquette externe et liez-le à un événement de clic. J'ai utilisé vue ici, c'est donc @click, et la même chose s'applique aux autres frameworks

<a href="#" rel="external nofollow" @click="editCaptcha">
  <img src="/api/getCaptcha" alt="" ref="imgYzm">
</a>

Événement de cliceditCaptcha

editCaptcha () {
  this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random()
},

Dans. de cette façon, l'actualisation du code de vérification des clics est réalisée. Le problème

7. Code de vérification de la vérification frontale

Nous venons de recevoir le code de vérification en arrière-plan, mais comment. le vérifier sur le front-end ?

N'oubliez pas que nous avons installé cookie-parser en 3-2 et enregistré la session générée dans un cookie en 3-3. Ici, notre front-end peut obtenir la valeur du code de vérification en accédant à ce cookie.

Pourquoi doit-il être enregistré dans les cookies ? Parce que la session générée par le backend n'est pas accessible par le frontend, si nous attendons pour y accéder, il n'y a aucune sécurité du tout, nous enregistrons donc une copie dans un cookie pour l'accès au frontend.

let captcha = document.cookie.split('=')[1]
  if(this.yzm != captcha){
   return this.$message.warning('验证码错误')
  }

Je n'entrerai pas dans les détails de la saisie frontale finale du code de vérification du compte et du mot de passe pour la vérification de la connexion, etc. L’idée spécifique est la suivante.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez des classes dans ES6 pour imiter Vue pour créer une liaison bidirectionnelle

vue.js+ element- Créer une arborescence de menu dans l'interface utilisateur

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!