JavaScriptを使用して画像検証コード機能を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScriptを使用して画像検証コード機能を実装するにはどうすればよいですか?

王林

リリース： 2023-10-20 11:54:16

オリジナル

1086 人が閲覧しました

如何使用 JavaScript 实现图片验证码功能？

JavaScript を使用して画像検証コード機能を実装するにはどうすればよいですか?

ネットワーク技術の継続的な発展に伴い、Web サイトのセキュリティの重要性がますます高まっています。登録やログインなどの操作では、ユーザーの通常の操作を保証し、ロボットや悪意のあるプログラムによるアクセスを防ぐために、グラフィカル検証コードがよく使用されます。グラフィカル検証コードは、ランダムに生成された検証コード画像を表示し、操作を完了するために正しい検証コードを入力することをユーザーに要求する検証方法です。

この記事では、JavaScript を使用して画像検証コード機能を実装する方法と、具体的なコード例を紹介します。

準備作業

コードを書き始める前に、次の資料を準備する必要があります。

さまざまな文字を含む確認コード画像
ユーザーが入力した確認コードが正しいかどうかを確認するために使用されるサーバーサイド API

HTML 構造

まず、検証コードと検証コードを入力するためのテキストボックスを表示するには、ファイルに <img> タグを追加する必要があります。

<!DOCTYPE html>
<html>
<head>
  <title>图片验证码示例</title>
</head>
<body>
  <img id="captchaImage" src="captcha.jpg" alt="验证码">
  <input type="text" id="captchaInput" placeholder="请输入验证码">
  <button id="verifyButton">验证</button>

  <script src="captcha.js"></script>
</body>
</html>

ログイン後にコピー

JavaScript コード

次に、検証コードの生成と検証機能を実装するための JavaScript コードを記述します。

// 获取页面元素
const captchaImg = document.getElementById('captchaImage');
const captchaInput = document.getElementById('captchaInput');
const verifyButton = document.getElementById('verifyButton');

// 点击验证码图片刷新验证码
captchaImg.addEventListener('click', function() {
  refreshCaptcha();
});

// 点击验证按钮进行验证码校验
verifyButton.addEventListener('click', function() {
  verifyCaptcha();
});

// 刷新验证码
function refreshCaptcha() {
  // 使用服务器端 API 获取新的验证码图片
  // 并更新验证码图片的 src 属性
  captchaImg.src = 'new_captcha.jpg';
}

// 校验验证码
function verifyCaptcha() {
  const userInput = captchaInput.value;

  // 使用服务器端 API 验证用户输入的验证码是否正确
  fetch('/verify-captcha', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ captcha: userInput })
  })
  .then(response => response.json())
  .then(data => {
    if (data.result === 'success') {
      alert('验证码正确');
    } else {
      alert('验证码错误');
    }
  })
  .catch(error => {
    console.error('验证码校验失败', error);
  });
}

ログイン後にコピー

上記のコードでは、フェッチ関数を使用して非同期リクエストを送信し、サーバーが提供する API を使用して検証コードを検証します。サーバーから返された検証結果に従って、対応するプロンプトボックスをポップアップ表示できます。

<script src="captcha.js"></script> を HTML ファイルの最後に配置して、JavaScript コードが必ず HTML ファイルの最後に実行されるようにしてください。ページの読み込みが完了しました。

サーバー側の実装

サーバー側の実装は、言語とフレームワークによって異なります。通常、サーバーは、ユーザーが入力した検証コードを受け取り、検証し、検証結果を返す API インターフェイスを提供します。

以下は、単純な Node.js サーバー側サンプルコードです。

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

// 解析 application/json
app.use(bodyParser.json());

// 校验验证码
app.post('/verify-captcha', (req, res) => {
  const userInput = req.body.captcha;

  // 进行验证码校验
  if (userInput === 'correct_code') {
    res.json({ result: 'success' });
  } else {
    res.json({ result: 'failure' });
  }
});

const port = 3000;
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

ログイン後にコピー

上記のコードの /verify-captcha パスは、フロントエンドコードは、実際の状況に応じて変更できます。