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 相关文章推荐
PHPlet在Windows下的安装
Oct 09 PHP
BBS(php &amp; mysql)完整版(五)
Oct 09 PHP
使用php来实现网络服务
Sep 15 PHP
一步一步学习PHP(1) php开发环境配置
Feb 15 PHP
PHP中strtotime函数使用方法详解
Nov 27 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
Nov 19 PHP
php检测图片主要颜色的方法
Jul 01 PHP
PHP面试常用算法(推荐)
Jul 22 PHP
php判断是否连接上网络的方法实例详解
Dec 14 PHP
对于Laravel 5.5核心架构的深入理解
Feb 22 PHP
phpMyAdmin通过密码漏洞留后门文件
Nov 20 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
Apr 23 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
PHP与javascript的两种交互方式
2006/10/09 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
python实现简单图片物体标注工具
2019/03/18 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Python urllib3软件包的使用说明
2020/11/18 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
市场营销专业毕业生自荐信
2013/11/02 职场文书
技术总监的工作职责
2013/11/13 职场文书
自我鉴定标准格式
2014/03/19 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
婚庆主持词大全
2015/06/30 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技