Comment faire fonctionner le nœud pour implémenter le code de vérification de l'image de connexion

Cette fois, je vais vous montrer comment utiliser le nœud pour réaliser l'image de connexion code de vérification, quelles sont les précautions pour faire fonctionner le nœud pour réaliser le code de vérification de l'image de connexion, ce qui suit est un cas pratique, regardons ensemble Jetez un oeil.

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();
 },

Cela implémente uniquement la fonction de génération de codes 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 :

Comment utiliser le code source de vue pour analyser le mécanisme d'événement

Comment utiliser JS pour obtenir le ville et situation géographique de l'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!