您好,登录后才能下订单哦!
今天小编给大家分享一下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滑动验证码的实现原理是什么”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。