聊聊php滑动验证码的实现原理

2023-05-14 19:05:41 验证码聊聊滑动

随着互联网的迅速发展，验证码成为了互联网安全保障的重要手段。其中，滑动验证码由于其简单易懂、操作方便、安全性高等特点，在实际应用中已经得到了广泛的应用。本文将介绍PHP滑动验证码的实现原理。

一、滑动验证码的定义与应用

滑动验证码是一种人机交互的验证码形式，它的基本原理是在界面上展示一张包含某些图片或图形的滑块，用户需要按住滑块进行拖动，直到把滑块拼接到验证码图形相应位置，以此进行验证。该类型的验证码多用于广告、登录、注册和评论等需要用户身份识别的场景。

二、php滑动验证码的实现原理

php滑动验证码的实现主要分为两个部分：前端展示与后端验证。其中前端展示主要通过html、CSS、javascript等前端技术实现，后端验证则是基于php语言，并利用session机制实现。

前端代码实现

（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提交验证结果。

后端代码实现

后端主要代码如下所示：

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滑动验证码的实现原理的详细内容，更多请关注其它相关文章！

相关文章