php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】


Posted in PHP onMay 27, 2020

本文实例讲述了php+js实现的拖动滑块验证码验证表单操作。分享给大家供大家参考,具体如下:

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

极验拖动动画图

php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

代码文件截图

php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

代码实现

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" rel="external nofollow" />
<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);//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 相关文章推荐
vBulletin Forum 2.3.xx SQL Injection
Oct 09 PHP
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
Nov 17 PHP
php判断终端是手机还是电脑访问网站的思路及代码
Apr 24 PHP
PHP二维数组排序的3种方法和自定义函数分享
Apr 09 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
Nov 19 PHP
PHP实现简单爬虫的方法
Jul 29 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
Feb 17 PHP
PHP实现的二分查找算法实例分析
Dec 19 PHP
PHP+iframe模拟Ajax上传文件功能示例
Jul 02 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
Sep 23 PHP
php实现快速对二维数组某一列进行组装的方法小结
Dec 04 PHP
php实现的简单多进程服务器类完整示例
Feb 01 PHP
PHP code 验证码生成类定义和简单使用示例
May 27 #PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
May 26 #PHP
tp5.1 框架数据库-数据集操作实例分析
May 26 #PHP
tp5.1 框架路由操作-URL生成实例分析
May 26 #PHP
tp5.1 框架join方法用法实例分析
May 26 #PHP
tp5.1框架数据库子查询操作实例分析
May 26 #PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
May 26 #PHP
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
菜单效果
2006/10/14 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
js运动应用实例解析
2015/12/28 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
vue-router 权限控制的示例代码
2017/09/21 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
React diff算法的实现示例
2018/04/20 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
python字典一键多值实例代码分享
2019/06/14 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python如何控制进程或者线程的个数
2020/10/16 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
法律进机关实施方案
2014/03/12 职场文书
寄语学生的话
2014/04/10 职场文书
开学第一周值周总结
2015/07/16 职场文书
校园安全教育心得体会
2016/01/15 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书