帝国模板之家为广大用户提供专业、一站式建站服务。

网站开发

网站开发栏目,介绍前端、后台、服务器、数据库、建站工具等实用网站开发教程。

当前位置:首页 > 教程 > 网站开发 > 正文

PHP弹出滑块拖动验证码

帝国模板之家 2020-09-07 网站开发 评论

验证码作为一种人机识别手段,其主要目的就是区分正常人和机器的操作,保护业务安全。滑动验证码作为一种常见的验证方式。

滑动验证码的优势:

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弹出滑块拖动验证码实现方法,大家赶紧测试一下吧,更多好用的网站功能请关注帝国模板之家

不要总是怀疑别人,真诚地接受别人的意见,其实是聪明人的选择。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言