jqueryでログイン確認コードを実装する方法

jQuery は、フォーム検証、モバイル要素などを含む、Web ページやアプリケーションに多くの便利な機能を提供する人気の JavaScript ライブラリです。

CAPTCHA は、人間のユーザーと自動機械プログラムの違いを識別するために広く使用されている人間と機械の検証テクノロジです。 Web サイトのログイン インターフェイスでは、悪意のあるプログラムや攻撃者がブルート フォース攻撃を使用してアカウントにログインしようとするのを防ぐために検証コードが使用されます。 jQuery は、ログイン検証を実行するときに検証コードを実装してフォームに追加する簡単な方法も提供します。

次の手順を実行します。

1. jQuery ライブラリを Web ページに追加する

まず、jQuery ライブラリが Web ページに含まれていることを確認します。ウェブページ。 jquery.com Web サイトから最新バージョンを使用してこのファイルを含めることも、ファイルをローカルにダウンロードして Web ページにリンクすることもできます。

2. 検証コード要素の作成

フォーム内に検証コード要素を作成し、jQuery の append() メソッドを使用してフォームの HTML コードに追加します。コードは次のとおりです:

<div id="captcha"></div>

3. 検証コード画像の生成

PHP GD ライブラリを使用して検証コードの画像を作成し、それをデータ URL として HTML コードに埋め込みます。画像には、この確認コードを一意に識別する文字や数字など、ランダムに生成された 4 つの文字が含まれている必要があります。簡単な PHP コードの例を次に示します。

session_start();  //开始会话，用于存储验证码
$chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';  //所有可用字符
$length = 4;  //验证码字符数
$str = '';  //生成的验证码字符串
for ($i = 0; $i < $length; $i++) {
    $str .= $chars[mt_rand(0, strlen($chars) - 1)];
}
$_SESSION[&#39;captcha&#39;] = $str;   //将验证码保存到会话中供以后验证使用
$im = imagecreatetruecolor(140, 60);  //创建140 x 60像素的图像
$bg_color = imagecolorallocate($im, 255, 255, 255);  //白色背景
imagefill($im, 0, 0, $bg_color);  //填充背景色
$font_color = imagecolorallocate($im, 0, 0, 0);   //文本颜色
imagettftext($im, 30, 0, 10, 45, $font_color, &#39;arial.ttf&#39;, $str);  //向图像中添加验证码
header(&#39;Content-type: image/png&#39;);  //设置响应类型为PNG图像
imagepng($im);  //将图像输出到浏览器
imagedestroy($im);  //销毁图像资源

4. キャプチャ画像をフォームに追加します

生成された画像を jQuery を使用してキャプチャ要素に追加します。 jQuery の attr() メソッドを使用して、要素の src 属性値としてデータ URL を渡し、画像にクリック イベントを追加して、画像がクリックされたときに別の検証コードを再生成できます。次に、jQuery コードの例を示します。

$(&#39;#captcha&#39;).html(&#39;<img src="generate_captcha.php" alt="captcha" />');  //将验证码添加到元素中
$('#captcha img').click(function () {  //单击事件
    $(this).attr('src', 'generate_captcha.php');  //刷新验证码图像
});

このコードでは、画像の相対 URI (「generate_captcha.php」) を src 属性値として使用します。この相対 URI は、イメージを生成する PHP スクリプトを指す必要があり、メイン スクリプト ディレクトリ (通常は Web サイトのルート) から開始する必要があります。

5. ログイン フォームの検証

ユーザーがフォームを送信すると、AJAX POST リクエストを使用してフォーム データが検証のためにサーバーに送信されます。検証プロセス中に、サーバーに送信されたデータ内の検証コード値を、最後に生成された検証コード値と比較する必要があります。この機能を備えた基本的な Ajax コードは次のとおりです。

$.ajax({
    url: 'validate_login.php',
    type: 'POST',
    data: {
        username: $('#username').val(),
        password: $('#password').val(),
        captcha: $('#captcha input').val()   //获取用户输入的验证码
    },
    success: function (data) {
        if (data.redirect) {
            window.location.replace(data.redirect); //如果登录成功跳转到主页
        } else {
            alert(data.message);  //如果登录失败提示错误信息
        }
    }
});

このテクノロジーは、ボットによるサイトへのブルート フォース攻撃を防ぎ、悪意のあるユーザーによる無効な試みをより効果的に識別します。ネットワーク情報セキュリティに対するロボットの攻撃を特定して防止することは、新世代のネットワーク情報セキュリティにおいて解決しなければならない問題です。エンタープライズ ネットワーク セキュリティ ソリューションの管理において、検証コード テクノロジは徐々に広く使用されるようになります。 jQueryを利用する場合、上記5つの手順を実施することで簡単に認証コード機能を実装することができます。

以上がjqueryでログイン確認コードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。