Heim Web-Frontend Front-End-Fragen und Antworten Nodejs implementiert Bildverifizierungscode

Nodejs implementiert Bildverifizierungscode

May 08, 2023 pm 06:14 PM

Mit der Entwicklung der Internet-Technologie werden grafische Verifizierungscodes (CAPTCHA) häufig bei der Anmeldung auf Websites, bei der Registrierung, beim Abrufen von Passwörtern und an anderen Orten verwendet, an denen die Benutzeridentität überprüft werden muss. Es stellt den Benutzern einige Fragen und Antworten, Zahlen, Buchstaben usw. grafisch zur Beurteilung dar und verhindert so, dass sich Roboter registrieren und Passwörter gewaltsam knacken. In diesem Artikel wird erläutert, wie Sie Bildverifizierungscode mithilfe von Node.js implementieren.

  1. Installationsabhängigkeiten

Es gibt viele Module von Drittanbietern in Node.js, die zum Generieren grafischer Verifizierungscodes verwendet werden können. In diesem Artikel wird das Modul svg-captcha verwendet, das eine Verifizierung generieren kann Codebilder im SVG-Format. Führen Sie den folgenden Befehl im Terminal aus, um es zu installieren: svg-captcha 模块,它可以生成 SVG 格式的验证码图片。在终端中执行以下命令安装它:

npm install svg-captcha
Nach dem Login kopieren
  1. 创建基本的项目结构

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

- app.js
- public
    - captcha.svg
Nach dem Login kopieren

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

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

const app = express()

// 其他代码
Nach dem Login kopieren
  1. 创建路由

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

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

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

  1. 添加逻辑

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

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 {
    // 验证码错误,返回错误提示
  }
})
Nach dem Login kopieren

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

  1. 启动服务器

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

node app.js
Nach dem Login kopieren

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

    Erstellen Sie die grundlegende Projektstruktur

    Erstellen Sie eine app.js-Datei und public im Der Arbeitsverzeichnisordner und der Ordner public werden zum Speichern von Verifizierungscodebildern verwendet. Das Folgende ist die Verzeichnisstruktur:

    rrreee
      Führen Sie in der Datei app.js das Modul svg-captcha ein und erstellen Sie eine Express-Instanz:
    1. rrreee
    2. Eine Route erstellen
    3. Um den Bildbestätigungscode zu implementieren, müssen Sie eine Route erstellen, um das Bestätigungscodebild zu generieren. Erstellen Sie eine Route /captcha in der Datei app.js:
    4. rrreee
    5. In dieser Route kann der Aufruf der Funktion svgCaptcha.create() generieren Anschließend werden eine zufällige Verifizierungscodezeichenfolge und das entsprechende SVG-Bild an den Client gesendet.
      1. Logik hinzufügen🎜🎜🎜Damit der generierte Bestätigungscode mit dem vom Client zurückgegebenen Bestätigungscode übereinstimmt, müssen Sie die generierte Bestätigungscode-Zeichenfolge in der Sitzung speichern und das Formular auf senden Kunde zur Überprüfung. Fügen Sie der Route die folgende Logik hinzu: 🎜rrreee🎜Speichern Sie die in der Sitzung generierte Bestätigungscodezeichenfolge in der Route /captcha und vergleichen Sie dann die Bestätigungscodezeichenfolge mit der vom Benutzer eingegebenen, wenn der Benutzer sie übermittelt Das Formular Vergleichen Sie die Verifizierungscodes. Wenn sie gleich sind, wird festgestellt, dass die Verifizierung erfolgreich war und nachfolgende Vorgänge durchgeführt werden können. 🎜
          🎜Starten Sie den Server🎜🎜🎜Nach Abschluss der obigen Schritte führen Sie den folgenden Befehl aus, um den Server zu starten: 🎜rrreee🎜Dann besuchen Sie http://localhost:3000/captcha im Browsercode> sollten Sie das generierte Bestätigungscodebild sehen können. Geben Sie den Bestätigungscode in das Anmeldeformular ein und senden Sie das Formular für spätere Vorgänge ab. 🎜🎜Zusammenfassung🎜🎜Es ist nicht schwierig, Bildverifizierungscode mit Node.js zu implementieren. Zur Vervollständigung ist lediglich ein Modul eines Drittanbieters erforderlich. Um die Sicherheit des Verifizierungscodes zu verbessern, müssen Sie jedoch auf die folgenden Punkte achten: 🎜🎜🎜Die generierte Verifizierungscode-Zeichenfolge sollte komplex genug sein und versuchen, Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen zu enthalten. 🎜🎜Die Gültigkeitsdauer des Verifizierungscodes sollte begrenzt sein, normalerweise etwa 5 Minuten, um zu verhindern, dass der Verifizierungscode von Angreifern gespeichert und während der Gültigkeitsdauer kontinuierlich versucht wird. 🎜🎜Bestätigungscodes sollten nach dem Zufallsprinzip generiert werden, um Vorhersagen und Kopieren zu vermeiden. 🎜🎜Sie sollten eine Sitzung zum Speichern der Bestätigungscodezeichenfolge verwenden und den Bestätigungscode nicht direkt im Client- oder Server-Cache speichern. 🎜🎜

    Das obige ist der detaillierte Inhalt vonNodejs implementiert Bildverifizierungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heißer Artikel

    R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
    2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    Repo: Wie man Teamkollegen wiederbelebt
    4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
    4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Mar 19, 2025 pm 03:58 PM

    In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.

    Erklären Sie das Konzept des faulen Ladens. Erklären Sie das Konzept des faulen Ladens. Mar 13, 2025 pm 07:47 PM

    Lazy Ladeverzögerung des Ladens von Inhalten bis zur Bedarf, Verbesserung der Webleistung und Benutzererfahrung durch Reduzierung der anfänglichen Ladezeiten und des Serverlasts.

    Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Mar 18, 2025 pm 01:44 PM

    Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.

    Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Mar 18, 2025 pm 01:45 PM

    In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens

    Wie funktioniert der React -Versöhnungsalgorithmus? Wie funktioniert der React -Versöhnungsalgorithmus? Mar 18, 2025 pm 01:58 PM

    Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.

    Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Mar 19, 2025 pm 04:10 PM

    In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.

    Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Mar 19, 2025 pm 03:59 PM

    Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.

    Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Mar 19, 2025 pm 04:16 PM

    Der Artikel erörtert die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten bei React, wobei sich auf Aspekte wie Vorhersehbarkeit, Leistung und Anwendungsfälle konzentriert. Es rät zu Faktoren, die bei der Auswahl zwischen ihnen berücksichtigt werden müssen.

    See all articles