Nodejs implémente le code de vérification d'image

Avec le développement de la technologie Internet, les codes de vérification graphiques (CAPTCHA) sont largement utilisés lors de la connexion à un site Web, de l'enregistrement, de la récupération de mots de passe et à d'autres endroits où l'identité de l'utilisateur doit être vérifiée. Il affiche graphiquement des questions et réponses, des chiffres, des lettres, etc. pour que les utilisateurs puissent les juger, empêchant ainsi les robots d'enregistrer et de déchiffrer violemment les mots de passe. Cet article explique comment implémenter le code de vérification d'image à l'aide de Node.js.

1. Dépendances d'installation

Il existe de nombreux modules tiers dans Node.js qui peuvent être utilisés pour générer des codes de vérification graphiques. utilisez le module svg -captcha, qui peut générer des images de code de vérification au format SVG. Exécutez la commande suivante dans le terminal pour l'installer : svg-captcha 模块，它可以生成 SVG 格式的验证码图片。在终端中执行以下命令安装它：

npm install svg-captcha

2. 创建基本的项目结构

在工作目录下创建一个 app.js 文件和 public 文件夹，public 文件夹用来存放验证码图片。以下是目录结构：

- app.js
- public
    - captcha.svg

在 app.js 文件中，引入 svg-captcha 模块并创建一个 Express 实例：

const express = require('express')
const svgCaptcha = require('svg-captcha')

const app = express()

// 其他代码

3. 创建路由

为了实现图片验证码，需要创建一个路由来生成验证码图片。在 app.js 文件中创建一个路由 /captcha：

app.get('/captcha', (req, res) => {
  const captcha = svgCaptcha.create()
  res.type('svg')
  res.status(200)
  res.send(captcha.data)
})

在这个路由中，调用 svgCaptcha.create() 函数可以生成一个随机的验证码字符串和对应的 SVG 图片，然后将其发送给客户端。

4. 添加逻辑

为了使生成的验证码与客户端返回的验证码相匹配，需要将生成的验证码字符串保存在会话中，并在客户端提交表单时进行验证。在路由中添加以下逻辑：

app.get('/captcha', (req, res) => {
  const captcha = svgCaptcha.create()
  req.session.captcha = captcha.text
  res.type('svg')
  res.status(200)
  res.send(captcha.data)
})

app.post('/login', (req, res) => {
  const { username, password, captcha } = req.body
  const expectedCaptcha = req.session.captcha
  if (expectedCaptcha === captcha) {
    // 验证码正确，进行登录操作
  } else {
    // 验证码错误，返回错误提示
  }
})

在 /captcha 路由中将生成的验证码字符串保存在会话中，然后在用户提交表单时将该验证码字符串与用户输入的验证码进行比对，如果相同则判断验证成功，进行后续操作。

5. 启动服务器

完成以上步骤后，执行以下命令来启动服务器：

node app.js

然后在浏览器中访问 http://localhost:3000/captcharrreee

Créer une structure de projet de base

Créer un app.js et dossier public Le dossier public est utilisé pour stocker les images du code de vérification. Voici la structure des répertoires :

rrreee
Dans le fichier app.js, introduisez le module svg-captcha et créez une instance Express : # 🎜🎜# rrreee
3. Create route
4. Afin d'implémenter le code de vérification d'image, vous devez créer une route pour générer le code de vérification image. Créez une route /captcha dans le fichier app.js :
5. rrreee
Dans cette route, appelez svgCaptcha.create() peut générer une chaîne de code de vérification aléatoire et l'image SVG correspondante, puis l'envoyer au client. <li><ol start="4"></ol></li>Ajouter une logique
#🎜🎜##🎜🎜#Afin de faire correspondre le code de vérification généré avec le code de vérification renvoyé par le client, la vérification générée le code doit être La chaîne du code de vérification est enregistrée dans la session et est vérifiée lorsque le client soumet le formulaire. Ajoutez la logique suivante dans la route : #🎜🎜#rrreee#🎜🎜# Enregistrez la chaîne de code de vérification générée dans la session dans la route /captcha, puis enregistrez le code de vérification lorsque l'utilisateur soumet le formulaire La chaîne est comparée au code de vérification saisi par l'utilisateur. S'ils sont identiques, la vérification est réussie et les opérations suivantes sont effectuées. #🎜🎜#
#🎜🎜#Démarrer le serveur#🎜🎜##🎜🎜##🎜🎜#Après avoir terminé les étapes ci-dessus, exécutez la commande suivante pour démarrer le serveur : #🎜🎜# rrreee#🎜🎜 #Ensuite, visitez http://localhost:3000/captcha dans le navigateur, et vous devriez pouvoir voir l'image du code de vérification généré. Entrez le code de vérification dans le formulaire de connexion et soumettez le formulaire pour les opérations ultérieures. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Il n'est pas difficile d'implémenter un code de vérification d'image à l'aide de Node.js, cela ne nécessite qu'un module tiers pour le compléter. Cependant, afin d'améliorer la sécurité du code de vérification, vous devez faire attention aux points suivants : #🎜🎜##🎜🎜##🎜🎜#La chaîne du code de vérification générée doit être suffisamment complexe et essayer de contenir des majuscules et lettres minuscules, chiffres et caractères spéciaux. #🎜🎜##🎜🎜#La période de validité du code de vérification doit être limitée, généralement environ 5 minutes, pour empêcher le code de vérification d'être enregistré par des attaquants et d'essayer en continu pendant la période de validité. #🎜🎜##🎜🎜#Les codes de vérification doivent être générés de manière aléatoire pour éviter la prédiction et la copie. #🎜🎜##🎜🎜#Vous devez utiliser une session pour enregistrer la chaîne du code de vérification et ne pas stocker le code de vérification directement dans le cache du client ou du serveur. #🎜🎜##🎜🎜#

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!