聊聊php滑動驗證碼的實作原理

隨著網路的快速發展，驗證碼成為了網路安全保障的重要手段。其中，滑動驗證碼由於其簡單易懂、操作方便、安全性高等特點，在實際應用中已經得到了廣泛的應用。本文將介紹php滑動驗證碼的實作原理。

一、滑動驗證碼的定義與應用

滑動驗證碼是一種人機互動的驗證碼形式，它的基本原理是在介面上展示一張包含某些圖片或圖形的滑桿，使用者需要按住滑桿進行拖曳，直到把滑桿拼接到驗證碼圖形對應位置，以此進行驗證。此類型的驗證碼多用於廣告、登入、註冊和評論等需要使用者識別的場景。

二、php滑動驗證碼的實作原理

php滑動驗證碼的實作主要分為兩個部分：前端展示與後端驗證。其中前端展示主要透過HTML、CSS、JavaScript等前端技術實現，後端驗證則是基於php語言，並利用session機制實現。

1. 前端程式碼實作

（1）HTML程式碼

#首先，需要寫HTML程式碼，實作驗證碼的基本結構。這裡以一個簡單的實例為例：

<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>

以上HTML程式碼中，div.slide-verify是驗證碼的外層容器，div.verify-img-box是驗證碼圖片的容器，img. verify-img是驗證碼圖片，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程式碼主要是實作驗證碼的樣式與佈局，這裡只給部分程式碼：

.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程式碼中，主要是實作了驗證碼的基本樣式、滑桿的樣式、背景顏色、陰影等。

（3）JavaScript程式碼

JavaScript實作使用者互動操作與資料提交，主要程式碼如下：

$(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);
            }
        }
    });
});

以上JavaScript程式碼中，主要使用jQuery UI庫的拖拽功能實現滑桿的拖曳操作，並透過ajax提交驗證結果。

2. 後端程式碼實作

後端主程式碼如下：

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);

以上程式碼中，先透過session機制記錄驗證碼的標識符，然後在驗證碼代碼中，產生一個隨機的驗證碼字符，並將其儲存到$_SESSION數組中。在滑桿驗證程式碼中，透過ajax方式將驗證結果提交到後台進行驗證。如果驗證通過，則執行對應操作，否則提示驗證失敗。

三、總結

本文簡單介紹了php滑動驗證碼的實作原理，主要分為前端展示和後端驗證兩個部分。在前端展示中，透過HTML、CSS和JavaScript實現滑桿驗證碼的基本功能；在後端驗證中，則透過php和session實現驗證碼的驗證操作。注意，在實際應用中，需要進一步加強安全性和人性化設計，以提供更好的使用者體驗。

以上是聊聊php滑動驗證碼的實作原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！