So implementieren Sie den Anmeldebestätigungscode in jquery

jQuery ist eine beliebte JavaScript-Bibliothek, die viele praktische Funktionen für Webseiten und Anwendungen bietet, darunter Formularvalidierung, mobile Elemente und mehr.

CAPTCHA ist eine weit verbreitete Mensch-Maschine-Verifizierungstechnologie, mit der der Unterschied zwischen menschlichen Benutzern und automatisierten Maschinenprogrammen ermittelt werden kann. In der Anmeldeschnittstelle der Website wird der Bestätigungscode verwendet, um zu verhindern, dass Schadprogramme oder Angreifer versuchen, sich mithilfe von Brute-Force-Angriffen beim Konto anzumelden. jQuery bietet außerdem eine einfache Möglichkeit, einen Bestätigungscode zu implementieren und ihn bei der Anmeldeüberprüfung zum Formular hinzuzufügen.

Führen Sie die folgenden Schritte aus:

1. Fügen Sie die jQuery-Bibliothek zur Webseite hinzu

Stellen Sie zunächst sicher, dass die jQuery-Bibliothek in die Webseite eingebunden wurde. Sie können es einbinden, indem Sie die neueste Version von der Website jquery.com verwenden oder die Datei lokal herunterladen und auf die Webseite verlinken.

2. Erstellen Sie ein Bestätigungscode-Element.

Erstellen Sie ein Bestätigungscode-Element im Formular und fügen Sie es mithilfe der append()-Methode von jQuery zum HTML-Code des Formulars hinzu. Der Code lautet wie folgt:

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

3. Verifizierungscodebild generieren

Verwenden Sie die PHP-GD-Bibliothek, um ein Bild für den Verifizierungscode zu erstellen und es als Daten-URL in den HTML-Code einzubetten. Das Bild sollte vier zufällig generierte Zeichen wie Buchstaben und Zahlen enthalten, die diesen Bestätigungscode eindeutig identifizieren. Hier ist ein einfaches PHP-Codebeispiel:

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. Fügen Sie ein Captcha-Bild im Formular hinzu

Fügen Sie das generierte Bild mit jQuery zum Captcha-Element hinzu. Sie können die attr()-Methode von jQuery verwenden, um die Daten-URL als src-Attributwert des Elements zu übergeben und dem Bild ein Klickereignis hinzuzufügen, um einen weiteren Bestätigungscode neu zu generieren, wenn auf das Bild geklickt wird. Hier ist ein Beispiel für jQuery-Code:

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

Dieser Code verwendet einen bildrelativen URI („generate_captcha.php“) als src-Attributwert. Dieser relative URI sollte auf das PHP-Skript verweisen, das das Bild generiert, und muss im Hauptskriptverzeichnis (normalerweise im Stammverzeichnis der Website) beginnen.

5. Anmeldeformular validieren

Wenn der Benutzer das Formular absendet, werden die Formulardaten mithilfe einer AJAX POST-Anfrage zur Validierung an den Server gesendet. Während des Verifizierungsprozesses muss der Verifizierungscodewert in den an den Server gesendeten Daten mit dem zuletzt generierten Verifizierungscodewert verglichen werden. Hier ist der grundlegende Ajax-Code mit dieser Funktionalität:

$.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);  //如果登录失败提示错误信息
        }
    }
});

Diese Technologie verhindert Brute-Force-Angriffe von Bots auf die Website und identifiziert außerdem ungültige Versuche böswilliger Benutzer effektiver. Das Erkennen und Verhindern von Angriffen auf die Netzwerkinformationssicherheit durch Roboter ist ein Problem, das in der neuen Generation der Netzwerkinformationssicherheit gelöst werden muss. Bei der Verwaltung von Sicherheitslösungen für Unternehmensnetzwerke wird die Verifizierungscode-Technologie nach und nach weit verbreitet sein. Wenn Sie jQuery verwenden, können Sie die Bestätigungscode-Funktion einfach implementieren, indem Sie die oben genannten 5 Schritte ausführen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Anmeldebestätigungscode in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!