首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

- Author -

下页、再停留

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP中实现图片的锐化
Oct 09 PHP
PHP XML备份Mysql数据库
May 27 PHP
php顺序查找和二分查找示例
Mar 27 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
Jun 23 PHP
php set_include_path函数设置 include_path 配置选项
Oct 30 PHP
PHP 序列化和反序列化函数实例详解
Jul 18 PHP
php调用云片网接口发送短信的实现方法
Oct 25 PHP
PHP中使用mpdf 导出PDF文件的实现方法
Oct 22 PHP
thinkPHP5框架路由常用知识点汇总
Sep 15 PHP
YII2框架中日志的配置与使用方法实例分析
Mar 18 PHP
php7 参数、整形及字符串处理机制修改实例分析
May 25 PHP
PHP8.0新功能之Match表达式的使用
Jul 19 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
证明书(326) 广播稿(323) 计划书(118) 接收函(23) 事迹材料(636) 辞职信(98) 方案(1080) 教学反思(909) 答谢词(97) 感言(394)
You might like
php4的session功能评述（二）
2006/10/09 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php计算年龄精准到年月日
2015/11/17 PHP
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
深入理解JavaScript系列（26）：设计模式之构造函数模式详解
2015/03/03 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
电脑饰品店的创业计划书
2014/01/21 职场文书
运动会稿件200字
2014/02/07 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
四风个人对照检查材料思想汇报（办公室通用版）
2014/10/07 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
十月围城观后感
2015/06/08 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
Promise静态四兄弟实现示例详解
2022/07/07 Javascript