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

极验拖动动画图

代码文件截图

代码实现
html文件

  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>极验滑块拖动验证码-码农社区-web视频分享网</title>
  8.     <script type="text/javascript" src="tn_code.js?v=35"></script>
  9.     <link rel="stylesheet" type="text/css" href="style.css?v=27" />
  10. <style type="text/css"></style>
  11. </head>
  12. <body style="text-align:center;">
  13. <div class="tncode" style="text-align: center;margin: 100px auto;"></div>
  14. <script type="text/javascript">
  15. $TN.onsuccess(function(){
  16. //验证通过
  17. });
  18. </script>

php文件：check.php

  1. <?php
  2. require_once dirname(__FILE__).'/TnCode.class.php';
  3. $tn  = new TnCode();
  4. if($tn->check()){
  5.         $_SESSION['tncode_check'] = 'ok';
  6.     echo "ok";
  7. }else{
  8.         $_SESSION['tncode_check'] = 'error';
  9.     echo "error";
  10. }
  11.  
  12. ?>

主要核心文件：TnCode.class.php

  1. <?php
  2. class TnCode
  3. {
  4.     var $im = null;
  5.     var $im_fullbg = null;
  6.     var $im_bg = null;
  7.     var $im_slide = null;
  8.     var $bg_width = 240;
  9.     var $bg_height = 150;
  10.     var $mark_width = 50;
  11.     var $mark_height = 50;
  12.     var $bg_num = 6;
  13.     var $_x = 0;
  14.     var $_y = 0;
  15.     //容错象素 越大体验越好，越小破解难道越高
  16.     var $_fault = 3;
  17.     function __construct(){
  18.         //ini_set('display_errors','On');
  19.         //
  20.         error_reporting(0);
  21.         if(!isset($_SESSION)){
  22.             session_start();
  23.         }
  24.     }
  25.     function make(){
  26.         $this->_init();
  27.         $this->_createSlide();
  28.         $this->_createBg();
  29.         $this->_merge();
  30.         $this->_imgout();
  31.         $this->_destroy();
  32.     }
  33.  
  34.     function check($offset=''){
  35.         if(!$_SESSION['tncode_r']){
  36.             return false;
  37.         }
  38.         if(!$offset){
  39.             $offset = $_REQUEST['tn_r'];
  40.         }
  41.         $ret = abs($_SESSION['tncode_r']-$offset)<=$this->_fault;
  42.         if($ret){
  43.             unset($_SESSION['tncode_r']);
  44.         }else{
  45.             $_SESSION['tncode_err']++;
  46.             if($_SESSION['tncode_err']>10){//错误10次必须刷新
  47.                 unset($_SESSION['tncode_r']);
  48.             }
  49.         }
  50.         return $ret;
  51.     }
  52.  
  53.     private function _init(){
  54.         $bg = mt_rand(1,$this->bg_num);
  55.         $file_bg = dirname(__FILE__).'/bg/'.$bg.'.png';
  56.         $this->im_fullbg = imagecreatefrompng($file_bg);
  57.         $this->im_bg = imagecreatetruecolor($this->bg_width, $this->bg_height);
  58.         imagecopy($this->im_bg,$this->im_fullbg,0,0,0,0,$this->bg_width, $this->bg_height);
  59.         $this->im_slide = imagecreatetruecolor($this->mark_width, $this->bg_height);
  60.         $_SESSION['tncode_r'] = $this->_x = mt_rand(50,$this->bg_width-$this->mark_width-1);
  61.         $_SESSION['tncode_err'] = 0;
  62.         $this->_y = mt_rand(0,$this->bg_height-$this->mark_height-1);
  63.     }
  64.  
  65.     private function _destroy(){
  66.         imagedestroy($this->im);
  67.         imagedestroy($this->im_fullbg);
  68.         imagedestroy($this->im_bg);
  69.         imagedestroy($this->im_slide);
  70.     }
  71.     private function _imgout(){
  72.         if(!$_GET['nowebp']&&function_exists('imagewebp')){//优先webp格式，超高压缩率
  73.             $type = 'webp';
  74.             $quality = 40;//图片质量 0-100
  75.         }else{
  76.             $type = 'png';
  77.             $quality = 7;//图片质量 0-9
  78.         }
  79.         header('Content-Type: image/'.$type);
  80.         $func = "image".$type;
  81.         $func($this->im,null,$quality);
  82.     }
  83.     private function _merge(){
  84.         $this->im = imagecreatetruecolor($this->bg_width, $this->bg_height*3);
  85.         imagecopy($this->im, $this->im_bg,0, 0 , 0, 0, $this->bg_width, $this->bg_height);
  86.         imagecopy($this->im, $this->im_slide,0, $this->bg_height , 0, 0, $this->mark_width, $this->bg_height);
  87.         imagecopy($this->im, $this->im_fullbg,0, $this->bg_height*2 , 0, 0, $this->bg_width, $this->bg_height);
  88.         imagecolortransparent($this->im,0);//
  89.     }
  90.  
  91.     private function _createBg(){
  92.         $file_mark = dirname(__FILE__).'/img/mark.png';
  93.         $im = imagecreatefrompng($file_mark);
  94.         header('Content-Type: image/png');
  95.         //imagealphablending( $im, true);
  96.         imagecolortransparent($im,0);//16777215
  97.         //imagepng($im);exit;
  98.         imagecopy($this->im_bg, $im, $this->_x, $this->_y  , 0  , 0 , $this->mark_width, $this->mark_height);
  99.         imagedestroy($im);
  100.     }
  101.  
  102.     private function _createSlide(){
  103.         $file_mark = dirname(__FILE__).'/img/mark2.png';
  104.         $img_mark = imagecreatefrompng($file_mark);
  105.         imagecopy($this->im_slide, $this->im_fullbg,0, $this->_y , $this->_x, $this->_y, $this->mark_width, $this->mark_height);
  106.         imagecopy($this->im_slide, $img_mark,0, $this->_y , 0, 0, $this->mark_width, $this->mark_height);
  107.         imagecolortransparent($this->im_slide,0);//16777215
  108.         //header('Content-Type: image/png');
  109.         //imagepng($this->im_slide);exit;
  110.         imagedestroy($img_mark);
  111.     }
  112.  
  113. }
  114. ?>

代码下载地址

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. java 补充（final、static）

    final 固定的 final  修饰类的时候,只能作为子类继承,不能作为父类. final 定义变量时,必须给成员变量赋值.------  1.直接赋值  2.构造方法. final 修饰成员方法时 ...

  2. [RN] 全国城市列表选择 (包含定位城市、热门城市、全国城市)

    全国城市列表选择 (包含定位城市.热门城市.全国城市) 用ScrollView 实现,解决 SectionList 实现的卡顿问题 实现效果如图: 代码实现如图: 主逻辑文件 cityList.js ...

  3. tensorflow数据加载、模型训练及预测

    数据集 DNN 依赖于大量的数据.可以收集或生成数据,也可以使用可用的标准数据集.TensorFlow 支持三种主要的读取数据的方法,可以在不同的数据集中使用:本教程中用来训练建立模型的一些数据集介绍 ...

  4. Cookie、token、session的区别是什么？

    背景: 最近在总结一些容易理解混淆的概念,之前面试的时候提到过,我觉得也说不清楚,这两天项目做接口测试发现用的cookie而不是之前的token,于是总结一下,便于以后用到的时候再阅读以及分享给需要的 ...

  5. WPF 数据绑定,界面刷新的两种方法-----INotifyPropertyChanged

    .Netformwork4.0及以下版本 -------INotifyPropertyChanged 命名空间: System.ComponentModel 后台代码 public partial c ...

  6. Java 集合系列之三：Set基本操作

    1. Java Set 1. Java Set 重要观点 Java Set接口是Java Collections Framework的成员. Set不允许出现重复元素-----------无重复 Se ...

  7. Solr7.x学习（8）-使用spring-data-solr

    1.maven配置 <dependency> <groupId>org.springframework.data</groupId> <artifactId& ...

  8. c# EPPlus读取Excel里面的时间字段时，1900-01-01转成了1899-12-31

    看到一篇文章:https://bbs.csdn.net/topics/70511379,5楼的回复: 我发现EXCEL有千年虫BUG,把1900年算成闰年了,2月有29天.1900年3月1日以后就没问 ...

  9. Android.mk基础

    1.前言 Android.mk用于向编译系统描述源文件和共享库,它实际上是编译系统解析一次或多次的微小GNU makefile片段.它的语法支持将源文件分组为模块,模块是静态库.共享库或独立的可执行文 ...

  10. 读懂 ECMA 规格

    一般我们都不关心 ECMA 规范,只需要学习怎么使用就好了.但有时候遇到一些难以解释的问题/现象,就不得不看一下规范是如何要求实现的了.规范内容庞杂,理解其中的术语有利于我们快速看懂规范. Envir ...