cari
Rumahpembangunan bahagian belakangmasalah PHPMari 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>
    <div>
        <img  class="verify-img lazy" src="/static/imghwm/default1.png" data-src="verify.php" alt="Mari kita bincangkan tentang prinsip pelaksanaan kod pengesahan gelongsor PHP" >
        <div>
            <span></span>
        </div>
    </div>
    <div>拖动滑块完成验证</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></script>
<script></script>
<script></script>
<link>

(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 = 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.

  1. 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 <p>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. </p><p><strong>3. Ringkasan</strong></p><p>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. </p>

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!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Asid vs pangkalan data asas: perbezaan dan bila menggunakan setiap.Asid vs pangkalan data asas: perbezaan dan bila menggunakan setiap.Mar 26, 2025 pm 04:19 PM

Artikel ini membandingkan model pangkalan data asid dan asas, memperincikan ciri -ciri mereka dan kes penggunaan yang sesuai. Asid mengutamakan integriti data dan konsistensi, sesuai untuk aplikasi kewangan dan e-dagang, sementara asas memberi tumpuan kepada ketersediaan dan

PHP Secure File Muat naik: Mencegah kelemahan berkaitan fail.PHP Secure File Muat naik: Mencegah kelemahan berkaitan fail.Mar 26, 2025 pm 04:18 PM

Artikel ini membincangkan mendapatkan muat naik fail PHP untuk mengelakkan kelemahan seperti suntikan kod. Ia memberi tumpuan kepada pengesahan jenis fail, penyimpanan selamat, dan pengendalian ralat untuk meningkatkan keselamatan aplikasi.

Pengesahan Input PHP: Amalan Terbaik.Pengesahan Input PHP: Amalan Terbaik.Mar 26, 2025 pm 04:17 PM

Artikel membincangkan amalan terbaik untuk pengesahan input PHP untuk meningkatkan keselamatan, memberi tumpuan kepada teknik seperti menggunakan fungsi terbina dalam, pendekatan putih, dan pengesahan sisi pelayan.

PHP API Kadar Mengehadkan: Strategi Pelaksanaan.PHP API Kadar Mengehadkan: Strategi Pelaksanaan.Mar 26, 2025 pm 04:16 PM

Artikel ini membincangkan strategi untuk melaksanakan kadar API yang mengehadkan PHP, termasuk algoritma seperti baldi token dan baldi bocor, dan menggunakan perpustakaan seperti simfoni/kadar-limiter. Ia juga meliputi pemantauan, had kadar penyesuaian secara dinamik, dan tangan

PHP Kata Laluan Hashing: password_hash dan password_verify.PHP Kata Laluan Hashing: password_hash dan password_verify.Mar 26, 2025 pm 04:15 PM

Artikel ini membincangkan manfaat menggunakan password_hash dan password_verify dalam php untuk mendapatkan kata laluan. Hujah utama ialah fungsi ini meningkatkan perlindungan kata laluan melalui penjanaan garam automatik, algoritma hashing yang kuat, dan secur

OWASP Top 10 PHP: Huraikan dan mengurangkan kelemahan umum.OWASP Top 10 PHP: Huraikan dan mengurangkan kelemahan umum.Mar 26, 2025 pm 04:13 PM

Artikel ini membincangkan kelemahan OWASP 10 dalam strategi PHP dan mitigasi. Isu -isu utama termasuk suntikan, pengesahan yang rosak, dan XSS, dengan alat yang disyorkan untuk memantau dan mendapatkan aplikasi PHP.

Pencegahan PHP XSS: Bagaimana Melindungi Terhadap XSS.Pencegahan PHP XSS: Bagaimana Melindungi Terhadap XSS.Mar 26, 2025 pm 04:12 PM

Artikel ini membincangkan strategi untuk mencegah serangan XSS di PHP, memberi tumpuan kepada sanitisasi input, pengekodan output, dan menggunakan perpustakaan dan kerangka kerja yang meningkatkan keselamatan.

PHP Interface vs Kelas Abstrak: Bila Menggunakan Setiap.PHP Interface vs Kelas Abstrak: Bila Menggunakan Setiap.Mar 26, 2025 pm 04:11 PM

Artikel ini membincangkan penggunaan antara muka dan kelas abstrak dalam PHP, memberi tumpuan kepada masa untuk menggunakan setiap. Antara muka menentukan kontrak tanpa pelaksanaan, sesuai untuk kelas yang tidak berkaitan dan warisan berganda. Kelas Abstrak Memberi Funct Biasa

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft