网站开发栏目,介绍前端、后台、服务器、数据库、建站工具等实用网站开发教程。
验证码作为一种人机识别手段，其主要目的就是区分正常人和机器的操作，保护业务安全。滑动验证码作为一种常见的验证方式。
滑动验证码的优势：
1.用户体验佳，用户无需识别复杂的验证码，只需轻轻一滑，秒速通过验证，更加便捷；
2.安全性高，基于强大的后台分析，结合大量的维度行为值进行对比；
3.种类多样，企业可以根据自身产品的风格，灵活定制滑动模块。
今天，帝国模板之家小编给大家分享一个js+php原始实现的弹出滑块拖动验证码。具体代码如下：
前端代码：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TnCode</title>
<script type="text/javascript" src="tn_code.min.js?v=35"></script>
<link rel="stylesheet" type="text/css" href="style.css?v=27" />
<style type="text/css">
</style>
</head>
<body style="text-align:center;">
<div class="tncode" style="text-align: center;margin: 100px auto;"></div>
<script type="text/javascript">
$TN.onsuccess(function(){
//验证通过
});
</script><div style="display: none;">
</div>
</body>
</html>
php验证代码：
<?php
require_once dirname(__FILE__).'/TnCode.class.php';
$tn = new TnCode();
if($tn->check()){
$_SESSION['tncode_check'] = 'ok';
echo "ok";
}else{
$_SESSION['tncode_check'] = 'error';
echo "error";
}
?>
验证核心代码TnCode.class.php：
<?php
class TnCode
{
protected $im = null;
protected $im_fullbg = null;
protected $im_bg = null;
protected $im_slide = null;
protected $bg_width = 240;
protected $bg_height = 150;
protected $mark_width = 50;
protected $mark_height = 50;
protected $bg_num = 6;
protected $_x = 0;
protected $_y = 0;
//容错象素 越大体验越好，越小破解难道越高
protected $_fault = 3;
function __construct(){
//ini_set('display_errors','On');
//
error_reporting(0);
if(!isset($_SESSION)){
session_start();
}
}
function make(){
$this->_init();
$this->_createSlide();
$this->_createBg();
$this->_merge();
$this->_imgout();
$this->_destroy();
}
function check($offset=''){
if(!$_SESSION['tncode_r']){
return false;
}
if(!$offset){
$offset = $_REQUEST['tn_r'];
}
$ret = abs($_SESSION['tncode_r']-$offset)<=$this->_fault;
if($ret){
unset($_SESSION['tncode_r']);
}else{
$_SESSION['tncode_err']++;
if($_SESSION['tncode_err']>10){//错误10次必须刷新
unset($_SESSION['tncode_r']);
}
}
return $ret;
}
private function _init(){
$bg = mt_rand(1,$this->bg_num);
$file_bg = dirname(__FILE__).'/bg/'.$bg.'.png';
$this->im_fullbg = imagecreatefrompng($file_bg);
$this->im_bg = imagecreatetruecolor($this->bg_width, $this->bg_height);
imagecopy($this->im_bg,$this->im_fullbg,0,0,0,0,$this->bg_width, $this->bg_height);
$this->im_slide = imagecreatetruecolor($this->mark_width, $this->bg_height);
$_SESSION['tncode_r'] = $this->_x = mt_rand(50,$this->bg_width-$this->mark_width-1);
$_SESSION['tncode_err'] = 0;
$this->_y = mt_rand(0,$this->bg_height-$this->mark_height-1);
}
private function _destroy(){
imagedestroy($this->im);
imagedestroy($this->im_fullbg);
imagedestroy($this->im_bg);
imagedestroy($this->im_slide);
}
private function _imgout(){
if(!$_GET['nowebp']&&function_exists('imagewebp')){//优先webp格式，超高压缩率
$type = 'webp';
$quality = 40;//图片质量 0-100
}else{
$type = 'png';
$quality = 7;//图片质量 0-9
}
header('Content-Type: image/'.$type);
$func = "image".$type;
$func($this->im,null,$quality);
}
private function _merge(){
$this->im = imagecreatetruecolor($this->bg_width, $this->bg_height*3);
imagecopy($this->im, $this->im_bg,0, 0 , 0, 0, $this->bg_width, $this->bg_height);
imagecopy($this->im, $this->im_slide,0, $this->bg_height , 0, 0, $this->mark_width, $this->bg_height);
imagecopy($this->im, $this->im_fullbg,0, $this->bg_height*2 , 0, 0, $this->bg_width, $this->bg_height);
imagecolortransparent($this->im,0);//16777215
}
private function _createBg(){
$file_mark = dirname(__FILE__).'/img/mark.png';
$im = imagecreatefrompng($file_mark);
header('Content-Type: image/png');
//imagealphablending( $im, true);
imagecolortransparent($im,0);//16777215
//imagepng($im);exit;
imagecopy($this->im_bg, $im, $this->_x, $this->_y , 0 , 0 , $this->mark_width, $this->mark_height);
imagedestroy($im);
}
private function _createSlide(){
$file_mark = dirname(__FILE__).'/img/mark2.png';
$img_mark = imagecreatefrompng($file_mark);
imagecopy($this->im_slide, $this->im_fullbg,0, $this->_y , $this->_x, $this->_y, $this->mark_width, $this->mark_height);
imagecopy($this->im_slide, $img_mark,0, $this->_y , 0, 0, $this->mark_width, $this->mark_height);
imagecolortransparent($this->im_slide,0);//16777215
//header('Content-Type: image/png');
//imagepng($this->im_slide);exit;
imagedestroy($img_mark);
}
}
?>
效果图如下：
以上就是PHP弹出滑块拖动验证码实现方法，大家赶紧测试一下吧，更多好用的网站功能请关注帝国模板之家。
转载请注明来源：PHP弹出滑块拖动验证码
本文永久链接地址：https://www.moyouyouw.cn/code/439.html
郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。
售价： 399 35 ℃ 0 评论
售价： 399 69 ℃ 0 评论
售价： 399 34 ℃ 0 评论
已有 位小伙伴发表了看法
欢迎 你 发表评论