Comment implémenter le code de vérification de connexion dans jquery

jQuery est une bibliothèque JavaScript populaire qui offre de nombreuses fonctionnalités pratiques pour les pages Web et les applications, notamment la validation de formulaires, les éléments mobiles, etc.

CAPTCHA est une technologie de vérification homme-machine largement utilisée pour identifier la différence entre les utilisateurs humains et les programmes de machines automatisés. Dans l'interface de connexion du site Web, le code de vérification est utilisé pour empêcher les programmes malveillants ou les attaquants de tenter de se connecter au compte à l'aide d'attaques par force brute. jQuery fournit également un moyen simple d'implémenter un code de vérification et de l'ajouter au formulaire lors de la vérification de la connexion.

Effectuez les étapes suivantes :

1. Ajoutez la bibliothèque jQuery à la page Web

Tout d'abord, assurez-vous que la bibliothèque jQuery a été incluse dans la page Web. Vous pouvez l'inclure en utilisant la dernière version du site Web jquery.com, ou télécharger le fichier localement et créer un lien vers la page Web.

2. Créez un élément de code de vérification

Créez un élément de code de vérification dans le formulaire et ajoutez-le au code HTML du formulaire à l'aide de la méthode append() de jQuery. Le code est le suivant :

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

3. Générer une image de code de vérification

Utilisez la bibliothèque PHP GD pour créer une image pour le code de vérification et l'intégrer en tant qu'URL de données dans le code HTML. L'image doit inclure 4 caractères générés aléatoirement, tels que des lettres et des chiffres, qui identifient de manière unique ce code de vérification. Voici un exemple de code PHP simple :

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. Ajoutez une image captcha sous le formulaire

Ajoutez l'image générée à l'élément captcha avec jQuery. Vous pouvez utiliser la méthode attr() de jQuery pour transmettre l'URL des données comme valeur d'attribut src de l'élément et ajouter un événement de clic à l'image pour régénérer un autre code de vérification lorsque l'utilisateur clique sur l'image. Voici un exemple de code jQuery :

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

Ce code utilise un URI relatif d'image ("generate_captcha.php") comme valeur d'attribut src. Cet URI relatif doit pointer vers le script PHP qui génère l'image et doit démarrer à partir du répertoire principal du script (généralement la racine du site Web).

5. Valider le formulaire de connexion

Lorsque l'utilisateur soumet le formulaire, les données du formulaire sont envoyées au serveur pour validation à l'aide d'une requête AJAX POST. Pendant le processus de vérification, la valeur du code de vérification dans les données envoyées au serveur doit être comparée à la dernière valeur du code de vérification générée. Voici le code ajax de base avec cette fonctionnalité :

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

Cette technologie empêche les robots d'attaquer par force brute sur le site Web et identifie également plus efficacement les tentatives invalides appartenant à des utilisateurs malveillants. Identifier et empêcher les robots d'attaquer la sécurité des informations sur les réseaux est un problème qui doit être résolu dans la nouvelle génération de sécurité des informations sur les réseaux. Dans la gestion des solutions de sécurité des réseaux d'entreprise, la technologie des codes de vérification sera progressivement largement utilisée. Lorsque vous utilisez jQuery, vous pouvez facilement implémenter la fonction de code de vérification en implémentant les 5 étapes ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!