Lassen Sie uns über das Implementierungsprinzip des PHP-Sliding-Verifizierungscodes sprechen

Mit der rasanten Entwicklung des Internets sind Verifizierungscodes zu einem wichtigen Mittel der Internetsicherheit geworden. Unter diesen ist der Schiebeverifizierungscode aufgrund seiner Einfachheit, einfachen Bedienung und hohen Sicherheit in der Praxis weit verbreitet. In diesem Artikel wird das Implementierungsprinzip des PHP-Sliding-Verifizierungscodes vorgestellt.

1. Definition und Anwendung des Gleitverifizierungscodes

Der Gleitverifizierungscode ist eine Form des Verifizierungscodes für die Mensch-Computer-Interaktion. Sein Grundprinzip besteht darin, einen Schieberegler mit bestimmten Bildern oder Grafiken auf der Benutzeroberfläche anzuzeigen Halten Sie den Schieberegler gedrückt und ziehen Sie ihn, bis der Schieberegler mit der entsprechenden Position der zu überprüfenden Verifizierungscodegrafik verbunden ist. Diese Art von Bestätigungscode wird hauptsächlich in Szenarien verwendet, die eine Benutzeridentifizierung erfordern, wie z. B. Werbung, Anmeldung, Registrierung und Kommentare.

2. Das Implementierungsprinzip des PHP-Sliding-Verifizierungscodes

Die Implementierung des PHP-Sliding-Verifizierungscodes ist hauptsächlich in zwei Teile unterteilt: Front-End-Anzeige und Back-End-Verifizierung. Die Front-End-Anzeige wird hauptsächlich durch Front-End-Technologien wie HTML, CSS und JavaScript implementiert, während die Back-End-Verifizierung auf der PHP-Sprache basiert und mithilfe des Sitzungsmechanismus implementiert wird.

1. Front-End-Code-Implementierung

(1) HTML-Code

Zunächst müssen Sie HTML-Code schreiben, um die Grundstruktur des Bestätigungscodes zu implementieren. Hier ist ein einfaches Beispiel:

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

Im obigen HTML-Code ist div.slide-verify der äußere Container des Bestätigungscodes, div.verify-img-box der Container des Bestätigungscodebilds und img.verify- img ist das Bild des Verifizierungscodes, div.verify-btn-box ist der Container des Schiebereglers und span.verify-btn ist der Schieberegler. div.verify-text ist der Eingabeaufforderungstext.

Die folgenden Dateien müssen in HTML eingeführt werden:

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

Der CSS-Code dient hauptsächlich der Implementierung des Stils und Layouts des Bestätigungscodes. Hier wird nur ein Teil des Codes angegeben:

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

Unter den oben genannten CSS-Codes geht es hauptsächlich um die Implementierung des Grundstils des Bestätigungscodes, des Stils des Schiebereglers, der Hintergrundfarbe, des Schattens usw.

(3) JavaScript-Code

JavaScript implementiert Benutzerinteraktion und Datenübermittlung. Der Hauptcode lautet wie folgt:

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

Im obigen JavaScript-Code wird die Drag-Funktion der jQuery-UI-Bibliothek hauptsächlich verwendet, um den Drag-Vorgang zu realisieren den Schieberegler und übermittelt über Ajax die Verifizierungsergebnisse.

2. Backend-Code-Implementierung

Der Hauptcode des Backends lautet wie folgt:

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

Im obigen Code wird zuerst die Kennung des Bestätigungscodes über den Sitzungsmechanismus aufgezeichnet und dann ein zufälliges Bestätigungscodezeichen generiert Geben Sie den Bestätigungscode code ein und speichern Sie ihn im Array $_SESSION. Im Slider-Verifizierungscode werden die Verifizierungsergebnisse zur Verifizierung durch Ajax an den Hintergrund übermittelt. Wenn die Überprüfung erfolgreich ist, führen Sie den entsprechenden Vorgang aus. Andernfalls wird angezeigt, dass die Überprüfung fehlgeschlagen ist.

3. Zusammenfassung

In diesem Artikel wird kurz das Implementierungsprinzip des PHP-Sliding-Verifizierungscodes vorgestellt, der hauptsächlich in zwei Teile unterteilt ist: Front-End-Anzeige und Back-End-Verifizierung. In der Front-End-Anzeige werden die Grundfunktionen des Slider-Verifizierungscodes über HTML, CSS und JavaScript implementiert; in der Back-End-Verifizierung wird der Verifizierungsvorgang des Verifizierungscodes über PHP und Sitzung implementiert. Beachten Sie, dass in praktischen Anwendungen die Sicherheit und das humanisierte Design weiter gestärkt werden müssen, um ein besseres Benutzererlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonLassen Sie uns über das Implementierungsprinzip des PHP-Sliding-Verifizierungscodes sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!