Nodejs implementiert Bildverifizierungscode

PHPz
Freigeben: 2023-05-08 18:14:37
Original
1368 Leute haben es durchsucht

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 Modulsvg-captchaverwendet, 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 eineapp.js-Datei undpublic im Der Arbeitsverzeichnisordnerund der Ordnerpublicwerden zum Speichern von Verifizierungscodebildern verwendet. Das Folgende ist die Verzeichnisstruktur:

    rrreee
      Führen Sie in der Datei app.jsdas Modul svg-captchaein und erstellen Sie eine Express-Instanz:
    1. rrreee
      1. Eine Route erstellen
      2. Um den Bildbestätigungscode zu implementieren, müssen Sie eine Route erstellen, um das Bestätigungscodebild zu generieren. Erstellen Sie eine Route/captchain der Dateiapp.js:
      3. rrreee
      4. In dieser Route kann der Aufruf der FunktionsvgCaptcha.create()generieren Anschließend werden eine zufällige Verifizierungscodezeichenfolge und das entsprechende SVG-Bild an den Client gesendet.
        1. Logik hinzufügenDamit 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: rrreeeSpeichern Sie die in der Sitzung generierte Bestätigungscodezeichenfolge in der Route /captchaund 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 ServerNach Abschluss der obigen Schritte führen Sie den folgenden Befehl aus, um den Server zu starten: rrreeeDann 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. ZusammenfassungEs 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!

      Quelle:php.cn
      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
      Neueste Artikel des Autors
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!