ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptを使用して画像検証コード機能を実装するにはどうすればよいですか?

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

王林オリジナル: 2023-10-20 11:54:161088ブラウズ

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

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

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

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

準備作業

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

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

HTML 構造

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

<!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 を使用して検証コードを検証します。サーバーから返された検証結果に従って、対応するプロンプトボックスをポップアップ表示できます。

30cc37545279625d84b3ab43870a53242cacc6d41bbb37262a98f745aa00fbf0 を 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 パスは、フロントエンドコードは、実際の状況に応じて変更できます。

概要

この記事では、JavaScript とサーバー側の連携により、検証コードの更新やユーザー入力の検証など、簡単な画像検証コード関数を実装します。実際のニーズに応じてコードを変更および拡張して、検証コードのセキュリティと使いやすさを向上させることができます。

最後に、確認コードはあくまで簡易的な確認方法であり、ロボットや悪意のあるプログラムによるアクセスを完全に防ぐことはできない点に注意してください。実際のアプリケーションでは、IP 制限、ユーザー行動分析などの他のセキュリティ戦略を組み合わせて、Web サイトのセキュリティを向上させることもできます。

以上がJavaScriptを使用して画像検証コード機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html 接口 JS 异步

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript を使用して、Web ページの上部にある固定ナビゲーションバーのグラデーション表示効果を実現するにはどうすればよいですか?次の記事：JavaScript を使用して、Web ページの上部にある固定ナビゲーションバーのグラデーション表示効果を実現するにはどうすればよいですか?

続きを見る