le nœud implémente la fonction de code de vérification d'image lors de la connexion

Cette fois, je vous apporterai un nœud pour implémenter la fonction de code de vérification d'image lors de la connexion. Quelles sont les précautions pour implémenter la fonction de code de vérification d'image lors de la connexion. Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

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

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

Ceci. De cette façon, l'actualisation du code de vérification du clic 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 faire. 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 stocké dans des 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 sur 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 :

Vue implémente la fonction de liaison de données bidirectionnelle (avec code)

ES6 imite Vue pour implémenter Fonction personnalisée de liaison bidirectionnelle

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!