Let’s talk about the implementation principle of PHP sliding verification code

With the rapid development of the Internet, verification codes have become an important means of Internet security. Among them, sliding verification code has been widely used in practical applications due to its simplicity, easy operation, and high security. This article will introduce the implementation principle of PHP sliding verification code.

1. Definition and application of sliding verification code

Sliding verification code is a form of human-computer interaction verification code. Its basic principle is to display it on the interface A slider containing certain pictures or graphics. The user needs to hold down the slider and drag it until the slider is spliced ​​to the corresponding position of the verification code graphic for verification. This type of verification code is mostly used in scenarios that require user identification, such as advertising, login, registration, and comments.

2. The implementation principle of PHP sliding verification code

The implementation of PHP sliding verification code is mainly divided into two parts: front-end display and back-end verification. The front-end display is mainly implemented through front-end technologies such as HTML, CSS, and JavaScript, while the back-end verification is based on the PHP language and implemented using the session mechanism.

1. Front-end code implementation

(1) HTML code

First, you need to write HTML code to implement the basic structure of the verification code. Here is a simple example:

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

In the above HTML code, div.slide-verify is the outer container of the verification code, div.verify-img-box is the container of the verification code image, img. verify-img is the verification code image, div.verify-btn-box is the container of the slider, and span.verify-btn is the slider. div.verify-text is the prompt text.

The following files need to be introduced in 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 code

The CSS code is mainly used to implement the style and layout of the verification code. Only part of the code is given here. ：

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

The above CSS code mainly implements the basic style of the verification code, the style of the slider, the background color, the shadow, etc.

(3) JavaScript code

JavaScript implements user interaction and data submission. The main code is as follows:

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

The above JavaScript code mainly uses the drag and drop function of jQuery UI library The drag function realizes the drag operation of the slider and submits the verification results through ajax.

2. Backend code implementation

The main code of the backend is as follows:

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

In the above code, the identification of the verification code is first recorded through the session mechanism character, and then in the verification code code, generate a random verification code character and store it in the $_SESSION array. In the slider verification code, the verification results are submitted to the background for verification through ajax. If the verification passes, perform the corresponding operation, otherwise it prompts that the verification failed.

3. Summary

This article briefly introduces the implementation principle of PHP sliding verification code, which is mainly divided into two parts: front-end display and back-end verification. In the front-end display, the basic functions of the slider verification code are implemented through HTML, CSS and JavaScript; in the back-end verification, the verification operation of the verification code is implemented through PHP and session. Note that in practical applications, security and humanized design need to be further strengthened to provide a better user experience.

The above is the detailed content of Let’s talk about the implementation principle of PHP sliding verification code. For more information, please follow other related articles on the PHP Chinese website!