Parlons du principe de mise en œuvre du code de vérification glissant PHP

Avec le développement rapide d'Internet, les codes de vérification sont devenus un moyen important de sécurité sur Internet. Parmi eux, le code de vérification glissant a été largement utilisé dans des applications pratiques en raison de sa simplicité, de sa facilité d’utilisation et de sa haute sécurité. Cet article présentera le principe d'implémentation du code de vérification glissante PHP.

1. Définition et application du code de vérification coulissant

Le code de vérification coulissant est une forme de code de vérification d'interaction homme-machine. Son principe de base est d'afficher un curseur contenant certaines images ou graphiques sur l'interface. maintenez le curseur enfoncé et faites-le glisser jusqu'à ce que le curseur soit épissé à la position correspondante du graphique du code de vérification à vérifier. Ce type de code de vérification est principalement utilisé dans des scénarios nécessitant une identification de l'utilisateur, tels que la publicité, la connexion, l'inscription et les commentaires.

2. Le principe de mise en œuvre du code de vérification glissante PHP

La mise en œuvre du code de vérification glissante PHP est principalement divisée en deux parties : l'affichage frontal et la vérification back-end. L'affichage frontal est principalement implémenté via des technologies frontales telles que HTML, CSS et JavaScript, tandis que la vérification back-end est basée sur le langage PHP et implémentée à l'aide du mécanisme de session.

1. Implémentation du code frontal

(1) Code HTML

Tout d'abord, vous devez écrire du code HTML pour implémenter la structure de base du code de vérification. Voici un exemple simple :

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

Dans le code HTML ci-dessus, div.slide-verify est le conteneur externe du code de vérification, div.verify-img-box est le conteneur de l'image du code de vérification et img.verify- img est l'image du code de vérification, div.verify-btn-box est le conteneur du curseur et span.verify-btn est le curseur. div.verify-text est le texte d'invite.

Les fichiers suivants doivent être introduits en 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) Code CSS

Le code CSS sert principalement à implémenter le style et la mise en page du code de vérification. Seule une partie du code est donnée ici :

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

Parmi. les codes CSS ci-dessus, il s'agit principalement d'implémenter le style de base du code de vérification, le style du curseur, la couleur d'arrière-plan, l'ombre, etc.

(3) Code JavaScript

JavaScript implémente l'interaction utilisateur et la soumission des données. Le code principal est le suivant :

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

Dans le code JavaScript ci-dessus, la fonction glisser de la bibliothèque jQuery UI est principalement utilisée pour réaliser l'opération de glissement de le curseur, et via Ajax soumet les résultats de la vérification.

2. Implémentation du code backend

Le code principal du backend est le suivant :

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

Dans le code ci-dessus, l'identifiant du code de vérification est d'abord enregistré via le mécanisme de session, puis un caractère de code de vérification aléatoire est généré dans le code de vérification code et stockez-le dans le tableau $_SESSION. Dans le code de vérification du curseur, les résultats de la vérification sont soumis en arrière-plan pour vérification via ajax. Si la vérification réussit, effectuez l'opération correspondante, sinon cela vous indiquera que la vérification a échoué.

3. Résumé

Cet article présente brièvement le principe de mise en œuvre du code de vérification glissante PHP, qui est principalement divisé en deux parties : l'affichage front-end et la vérification back-end. Dans l'affichage frontal, les fonctions de base du code de vérification du curseur sont implémentées via HTML, CSS et JavaScript ; dans la vérification back-end, l'opération de vérification du code de vérification est implémentée via PHP et la session. Notez que dans les applications pratiques, la sécurité et la conception humanisée doivent être encore renforcées pour offrir une meilleure expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!