Mari kita bincangkan tentang prinsip pelaksanaan kod pengesahan gelongsor PHP

Dengan perkembangan pesat Internet, kod pengesahan telah menjadi cara penting untuk keselamatan Internet. Antaranya, kod pengesahan gelongsor telah digunakan secara meluas dalam aplikasi praktikal kerana kesederhanaan, operasi mudah dan keselamatan yang tinggi. Artikel ini akan memperkenalkan prinsip pelaksanaan kod pengesahan gelongsor PHP.

1. Definisi dan aplikasi kod pengesahan gelongsor

Kod pengesahan gelongsor ialah satu bentuk kod pengesahan interaksi manusia-komputer adalah untuk memaparkannya pada antara muka Untuk peluncur yang mengandungi gambar atau grafik tertentu, pengguna perlu menahan peluncur dan menyeretnya sehingga peluncur disambungkan ke kedudukan grafik kod pengesahan yang sepadan untuk pengesahan. Jenis kod pengesahan ini kebanyakannya digunakan dalam senario yang memerlukan pengenalan pengguna, seperti pengiklanan, log masuk, pendaftaran dan ulasan.

2. Prinsip pelaksanaan kod pengesahan gelongsor PHP

Pelaksanaan kod pengesahan gelongsor PHP terutamanya dibahagikan kepada dua bahagian: paparan bahagian hadapan dan pengesahan bahagian belakang . Paparan bahagian hadapan dilaksanakan terutamanya melalui teknologi bahagian hadapan seperti HTML, CSS dan JavaScript, manakala pengesahan bahagian belakang adalah berdasarkan bahasa PHP dan dilaksanakan menggunakan mekanisme sesi.

1. Pelaksanaan kod bahagian hadapan

(1) Kod HTML

Pertama, anda perlu menulis kod HTML untuk melaksanakan struktur asas pengesahan kod. Berikut ialah contoh mudah:

<div class="slide-verify">
    <div class="verify-img-box">
        <img src="verify.php" class="verify-img" id="verify-img">
        <div class="verify-btn-box">
            <span class="verify-btn" id="verify-btn"></span>
        </div>
    </div>
    <div class="verify-text">拖动滑块完成验证</div>
</div>

Dalam kod HTML di atas, div.slide-verify ialah bekas luar kod pengesahan dan div.verify-img-box ialah bekas kod pengesahan imej. img.verify-img ialah imej kod pengesahan, div.verify-btn-box ialah bekas peluncur dan span.verify-btn ialah peluncur. div.verify-text ialah teks gesaan.

Fail berikut perlu diperkenalkan dalam HTML:

<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="jquery.ui.touch-punch.js"></script>
<script src="verify.js"></script>
<link rel="stylesheet" href="verify.css">

(2) Kod CSS

Kod CSS terutamanya untuk melaksanakan gaya dan susun atur pengesahan kod, yang hanya diberikan di sini Sebahagian daripada kod:

.slide-verify {
    position: relative;
    width: 300px;
    height: 100px;
}
.verify-img-box {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 300px;
    height: 60px;
    border: 1px solid #ddd;
    background-color: #fafafa;
    overflow: hidden;
}
.verify-img {
    display: inline-block;
    width: 300px;
    height: 60px;
}
.verify-btn-box {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 38px;
    height: 38px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 0 3px #ddd;
    cursor: pointer;
}
.verify-btn {
    display: block;
    width: 36px;
    height: 36px;
    background-color: #34B5E5;
    border-radius: 50%;
}
.verify-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    font-size: 12px;
}

Kod CSS di atas terutamanya melaksanakan gaya asas kod pengesahan, gaya peluncur, warna latar belakang, bayang-bayang, dsb.

(3) Kod JavaScript

JavaScript melaksanakan interaksi pengguna dan penyerahan data Kod utama adalah seperti berikut:

$(function() {
    var startX = 0, 
        distanceX = 0, 
        sliderLeft = 0, 
        sliderWidth = $('#verify-btn').width(),
        complete = false;
    $('#verify-btn').draggable({
        containment: '.verify-img-box',//滑块的移动范围
        axis: 'x',//只能在x轴方向上滑动
        drag: function(event, ui) {//滑块拖动过程
            distanceX = ui.position.left - startX;
            ui.position.left = sliderLeft + distanceX;
            //防止滑块越界
            if (ui.position.left <= 0) {
                ui.position.left = 0;
            } else if (ui.position.left >= sliderWidth) {
                ui.position.left = sliderWidth;
            }
        },
        stop: function(event, ui) {//滑块停止拖动
            startX = ui.position.left - 0;
            sliderLeft = ui.position.left - 0;
            //完成验证
            if (sliderLeft >= (sliderWidth - 2)) {//根据自己的需求设定，这里是滑动距离要大于等于（滑块宽度-2）
                complete = true;
                //提交验证
                $.ajax({
                    type: 'POST',
                    url: 'verify.php',
                    data: {
                        verify: 'true'
                    },
                    success: function(msg) {
                        alert(msg);//验证通过，执行相应操作
                    }
                });
            } else {//重置滑块位置
                complete = false;
                $('#verify-btn').animate({left: 0}, 200);
            }
        }
    });
});

Kod JavaScript di atas terutamanya menggunakan UI jQuery. perpustakaan Fungsi seret dan lepas melaksanakan operasi seret peluncur dan menyerahkan hasil pengesahan melalui ajax.

2. Pelaksanaan kod belakang

Kod hujung belakang utama adalah seperti berikut:

session_start();
define('V_CODE', '1');//验证码标识符
if (isset($_POST['verify']) && $_POST['verify'] === 'true') {//验证操作
    //判断验证码是否正确
    if ($_SESSION[V_CODE] && intval($_SESSION[V_CODE]) === 1) {
        echo '验证通过';
    } else {
        echo '验证失败';
    }
    //验证完毕，清楚验证码
    unset($_SESSION[V_CODE]);
    exit;//结束
}
header('Content-type: image/jpeg');
$im = imagecreate(58, 30);
$bg_color = imagecolorallocate($im, mt_rand(200, 255), mt_rand(200, 255), mt_rand(200, 255));//背景色
$fc_color = imagecolorallocate($im, mt_rand(50, 200), mt_rand(50, 200), mt_rand(50, 200));//字体色
imagefill($im, 0, 0, $bg_color);
$confash_code = rand(1, 9);//验证码字符
$_SESSION[V_CODE] = $confash_code;
imagestring($im, 5, 12, 6, $confash_code, $fc_color);
for ($i = 0; $i < 150; $i++) {//干扰像素
    imagesetpixel($im, mt_rand(0, 58), mt_rand(0, 30), $fc_color);
}
for ($i = 0; $i < 3; $i++) {//干扰线
    imageline($im, mt_rand(0, 58), mt_rand(0, 30), mt_rand(0, 58), mt_rand(0, 30), $fc_color);
}
imagejpeg($im);
imagedestroy($im);

Dalam kod di atas, kod pengesahan pertama kali direkodkan melalui pengecam mekanisme sesi, dan kemudian dalam kod kod pengesahan, hasilkan watak kod pengesahan rawak dan simpannya dalam tatasusunan $_SESSION. Dalam kod pengesahan slider, hasil pengesahan diserahkan ke latar belakang untuk pengesahan melalui ajax. Jika pengesahan lulus, lakukan operasi yang sepadan, jika tidak, ia akan menggesa pengesahan gagal.

3. Ringkasan

Artikel ini memperkenalkan secara ringkas prinsip pelaksanaan kod pengesahan gelongsor PHP, yang terbahagi terutamanya kepada dua bahagian: paparan bahagian hadapan dan bahagian belakang pengesahan. Dalam paparan bahagian hadapan, fungsi asas kod pengesahan gelangsar dilaksanakan melalui HTML, CSS dan JavaScript dalam pengesahan bahagian belakang, operasi pengesahan kod pengesahan dilaksanakan melalui PHP dan sesi. Ambil perhatian bahawa dalam aplikasi praktikal, keselamatan dan reka bentuk kemanusiaan perlu diperkukuhkan lagi untuk memberikan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Mari kita bincangkan tentang prinsip pelaksanaan kod pengesahan gelongsor PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!