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 相关文章推荐
php注入实例
Oct 09 PHP
session 的生命周期是多长
Oct 09 PHP
为IP查询添加GOOGLE地图功能的代码
Aug 08 PHP
解析php dirname()与__FILE__常量的应用
Jun 24 PHP
解析php通过cookies获取远程网页的指定代码
Jun 25 PHP
php中的ini配置原理详解
Oct 14 PHP
Yii2中datetime类的使用
Dec 17 PHP
YII框架批量插入数据的方法
Mar 18 PHP
详解Yii2.0使用AR联表查询实例
Jun 16 PHP
wordpress自定义标签云与随机获取标签的方法详解
Mar 22 PHP
Swoole 5将移除自动添加Event::wait()特性详解
Jul 10 PHP
Thinkphp极验滑动验证码实现步骤解析
Nov 24 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
国内咖啡文化
2021/03/03 咖啡文化
php header()函数使用说明
2008/07/10 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
8个必备的PHP功能开发
2015/10/02 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python添加模块搜索路径方法
2017/09/11 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
学历公证委托书
2014/04/09 职场文书
爱护公物演讲稿
2014/09/09 职场文书
银行给客户的感谢信
2015/01/23 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
python实现简单的井字棋
2021/05/26 Python
如何正确理解python装饰器
2021/06/15 Python
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
在 Python 中利用 Pool 进行多线程
2022/04/24 Python