php滑動驗(yàn)證碼的實(shí)現(xiàn)原理是什么

今天小編給大家分享一下php滑動驗(yàn)證碼的實(shí)現(xiàn)原理是什么的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、滑動驗(yàn)證碼的定義與應(yīng)用

滑動驗(yàn)證碼是一種人機(jī)交互的驗(yàn)證碼形式，它的基本原理是在界面上展示一張包含某些圖片或圖形的滑塊，用戶需要按住滑塊進(jìn)行拖動，直到把滑塊拼接到驗(yàn)證碼圖形相應(yīng)位置，以此進(jìn)行驗(yàn)證。該類型的驗(yàn)證碼多用于廣告、登錄、注冊和評論等需要用戶身份識別的場景。

二、php滑動驗(yàn)證碼的實(shí)現(xiàn)原理

php滑動驗(yàn)證碼的實(shí)現(xiàn)主要分為兩個部分：前端展示與后端驗(yàn)證。其中前端展示主要通過HTML、CSS、JavaScript等前端技術(shù)實(shí)現(xiàn)，后端驗(yàn)證則是基于php語言，并利用session機(jī)制實(shí)現(xiàn)。

1. 前端代碼實(shí)現(xiàn)

（1）HTML代碼

首先，需要編寫HTML代碼，實(shí)現(xiàn)驗(yàn)證碼的基本結(jié)構(gòu)。這里以一個簡單的實(shí)例為例：

<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">拖動滑塊完成驗(yàn)證</div>
</div>

以上HTML代碼中，div.slide-verify是驗(yàn)證碼的外層容器，div.verify-img-box是驗(yàn)證碼圖片的容器，img.verify-img是驗(yàn)證碼圖片，div.verify-btn-box是滑塊的容器，span.verify-btn是滑塊。div.verify-text為提示文字。

在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）CSS代碼

CSS代碼主要是實(shí)現(xiàn)驗(yàn)證碼的樣式與布局，這里只給出部分代碼：

.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;
}

以上CSS代碼中，主要是實(shí)現(xiàn)了驗(yàn)證碼的基本樣式、滑塊的樣式、背景顏色、陰影等。

（3）JavaScript代碼

JavaScript實(shí)現(xiàn)用戶交互操作和數(shù)據(jù)提交，主要代碼如下：

$(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;
            //完成驗(yàn)證
            if (sliderLeft >= (sliderWidth - 2)) {//根據(jù)自己的需求設(shè)定，這里是滑動距離要大于等于（滑塊寬度-2）
                complete = true;
                //提交驗(yàn)證
                $.ajax({
                    type: 'POST',
                    url: 'verify.php',
                    data: {
                        verify: 'true'
                    },
                    success: function(msg) {
                        alert(msg);//驗(yàn)證通過，執(zhí)行相應(yīng)操作
                    }
                });
            } else {//重置滑塊位置
                complete = false;
                $('#verify-btn').animate({left: 0}, 200);
            }
        }
    });
});

以上JavaScript代碼中，主要是使用jQuery UI庫的拖拽功能實(shí)現(xiàn)滑塊的拖動操作，并通過ajax提交驗(yàn)證結(jié)果。

2. 后端代碼實(shí)現(xiàn)

后端主要代碼如下所示：

session_start();
define('V_CODE', '1');//驗(yàn)證碼標(biāo)識符
if (isset($_POST['verify']) && $_POST['verify'] === 'true') {//驗(yàn)證操作
    //判斷驗(yàn)證碼是否正確
    if ($_SESSION[V_CODE] && intval($_SESSION[V_CODE]) === 1) {
        echo '驗(yàn)證通過';
    } else {
        echo '驗(yàn)證失敗';
    }
    //驗(yàn)證完畢，清楚驗(yàn)證碼
    unset($_SESSION[V_CODE]);
    exit;//結(jié)束
}
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);//驗(yàn)證碼字符
$_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);

以上代碼中，首先通過session機(jī)制記錄驗(yàn)證碼的標(biāo)識符，然后在驗(yàn)證碼代碼中，生成一個隨機(jī)的驗(yàn)證碼字符，并將其存儲到$_SESSION數(shù)組中。在滑塊驗(yàn)證代碼中，通過ajax方式將驗(yàn)證結(jié)果提交到后臺進(jìn)行驗(yàn)證。如果驗(yàn)證通過，則執(zhí)行相應(yīng)操作，否則提示驗(yàn)證失敗。

以上就是“php滑動驗(yàn)證碼的實(shí)現(xiàn)原理是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。