现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。现在很多极验都是第三方的，也很多都是收费的。今天在这里给大家分享自己用原生php实现的一个极验的代码。用原生php的好处就是以后你要嵌套到什么框架，可以直接用核心代码，改一改就好了。

极验拖动动画图

代码文件截图

代码实现
html文件

<!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>极验滑块拖动验证码-码农社区-web视频分享网</title>

    <script type="text/javascript" src="tn_code.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>

php文件：check.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

{

    var $im = null;

    var $im_fullbg = null;

    var $im_bg = null;

    var $im_slide = null;

    var $bg_width = 240;

    var $bg_height = 150;

    var $mark_width = 50;

    var $mark_height = 50;

    var $bg_num = 6;

    var $_x = 0;

    var $_y = 0;

    //容错象素 越大体验越好，越小破解难道越高

    var $_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);//

    }

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

    }

}

?>

代码下载地址

http://aso.39gs.com/tncode/tncode.rar

php+js实现极验，拖动滑块验证码验证表单的更多相关文章

  1. 对极验geetest滑块验证码图片还原算法的研究

    免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...

  2. js验证表单大全

    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...

  3. 项目总结07：JS图片的上传预览和表单提交（FileReader()方法）

    JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...

  4. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  5. JS高级---案例：验证表单

    案例:验证表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. php+js实现极验滑块拖动验证码-tncode

    先上图: 演示地址:http://aso.39gs.com/tncode/index.html 相信在淘宝,斗鱼这些大网站都见到过这样的验证码了,拖动验证码比传统在移动端有更好的化验,减少用户的输入. ...

  7. Django中使用极验Geetest滑动验证码

    一,环境部署 1.创建一个django测试项目 此处省略... 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github ...

  8. 利用ajax，js以及正则表达式来验证表单递交

    <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" ...

  9. js和jq使用submit方法无法提交表单

    昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着 ...

随机推荐

  1. 【LG4397】[JLOI2014]聪明的燕姿

    [LG4397][JLOI2014]聪明的燕姿 题面 洛谷 题解 考虑到约数和函数\(\sigma = \prod (1+p_i+...+p_i^{r_i})\),直接爆搜把所有数搜出来即可. 爆搜过 ...

  2. python3 获取日期时间

    #!/usr/bin/python3 import time # 格式化成2016-- ::39形式 print (time.strftime("%Y-%m-%d %H:%M:%S" ...

  3. 【HDU6216】 A Cubic number and A Cubic Number 和 广工的加强版

    题目传送门_杭电版 题目传送门_广工版 广工版的是杭电版的加强版. 题意:判断一个质数是否是两个整数的立方差 ---- 数学题 题解: 根据立方差公式:\(a^3 - b^3 = (a - b)(a^ ...

  4. Android studio中怎么导入android.support.v4包

    Android studio中怎么导入android.support.v4包 1.File点击选择projectStructure选择对应的APP然后点击Dependencies 2.点击+号,点击第 ...

  5. Azure DevOps Server 2019 第一个补丁包（2019.0.1 RTW）

    在Azure DevOps Server 2019正式发布后的2周左右时间,微软快速发布了第一个补丁包Azure DevOps Server 2019.0.1 RTW.Azure DevOps Ser ...

  6. 记一次node节点异常排查

    一.背景 公司进行kubernetes服务重启演练,集群重启后所有服务正常,仅node2节点处于notready状态 二.排查过程 查看对应节点的详细信息,发现kubelet一直处于starting状 ...

  7. 017 使用域名访问本地项目---涉及switchhost和Nginx

    1.统一环境 我们现在访问页面使用的是:http://localhost:9001 实际开发中,会有不同的环境: 开发环境:自己的电脑 测试环境:提供给测试人员使用的环境 预发布环境:数据是和生成环境 ...

  8. 微信企业微信调试JS神器vConsole

    在js页面上放以下代码 <script src='https://cdn.bootcss.com/vConsole/3.3.2/vconsole.min.js'></script&g ...

  9. yum 多线程插件，apt多线程插件

    1.安装yum-axelget插件,默认 yum使用单线程下载,安装该插件后,会使用多线程下载. yum -y install yum-axelget 2. apt-fast安装 https://gi ...

  10. 简易版php文件上传_超详细详解

    1.php简化版的图片上传(没有各种验证) 1234 <form action="" enctype="multipart/form-data" meth ...