Bagaimana untuk melaksanakan kod pengesahan log masuk dalam jquery

jQuery ialah perpustakaan JavaScript popular yang menyediakan banyak ciri mudah untuk halaman web dan aplikasi, termasuk pengesahan borang, elemen mudah alih dan banyak lagi.

CAPTCHA ialah teknologi pengesahan mesin manusia yang digunakan secara meluas yang digunakan untuk mengenal pasti perbezaan antara pengguna manusia dan program mesin automatik. Dalam antara muka log masuk tapak web, kod pengesahan digunakan untuk menghalang program berniat jahat atau penyerang daripada cuba log masuk ke akaun menggunakan serangan kekerasan. jQuery juga menyediakan cara mudah untuk melaksanakan kod pengesahan dan menambahkannya pada borang semasa melakukan pengesahan log masuk.

Lakukan langkah berikut:

1. Tambah pustaka jQuery pada halaman web

Pertama, pastikan perpustakaan jQuery telah dimasukkan ke dalam web muka surat. Anda boleh memasukkannya dengan menggunakan versi terkini dari tapak web jquery.com, atau memuat turun fail secara setempat dan memaut ke halaman web.

2. Buat elemen kod pengesahan

Buat elemen kod pengesahan dalam borang dan tambahkannya pada kod HTML borang menggunakan kaedah append() jQuery. Kodnya adalah seperti berikut:

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

3. Jana imej kod pengesahan

Gunakan pustaka PHP GD untuk mencipta imej bagi kod pengesahan dan gunakannya sebagai URL data membenamkan kod HTML. Imej harus mengandungi 4 aksara yang dijana secara rawak, seperti huruf dan nombor, yang mengenal pasti kod pengesahan ini secara unik. Berikut ialah contoh kod PHP mudah:

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. Tambah imej CAPTCHA pada borang

Tambah imej yang dijana pada elemen CAPTCHA dengan jQuery. Anda boleh menggunakan kaedah attr() jQuery untuk menghantar URL data sebagai nilai atribut src elemen dan menambah peristiwa klik pada imej untuk menjana semula kod pengesahan lain apabila imej diklik. Berikut ialah contoh kod jQuery:

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

Kod ini menggunakan URI relatif imej ("generate_captcha.php") sebagai nilai atribut src. URI relatif ini harus menunjuk kepada skrip PHP yang menjana imej, dan mesti bermula dari direktori skrip utama (biasanya akar tapak web).

5. Sahkan Borang Log Masuk

Apabila pengguna menyerahkan borang, permintaan AJAX POST digunakan untuk menghantar data borang ke pelayan untuk pengesahan. Semasa proses pengesahan, nilai kod pengesahan dalam data yang dihantar ke pelayan mesti dibandingkan dengan nilai kod pengesahan yang terakhir dijana. Berikut ialah kod ajax asas dengan fungsi ini:

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

Teknik ini menghalang bot daripada serangan kekerasan di tapak dan juga mengenal pasti percubaan tidak sah kepunyaan pengguna berniat jahat dengan lebih berkesan. Mengenal pasti dan menghalang robot daripada menyerang keselamatan maklumat rangkaian adalah masalah yang mesti diselesaikan dalam generasi baharu keselamatan maklumat rangkaian. Dalam mengurus penyelesaian keselamatan rangkaian perusahaan, teknologi kod pengesahan secara beransur-ansur akan digunakan secara meluas. Apabila menggunakan jQuery, anda boleh melaksanakan fungsi kod pengesahan dengan mudah dengan melaksanakan 5 langkah di atas.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kod pengesahan log masuk dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!