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 相关文章推荐
用户的详细注册和判断
Oct 09 PHP
cache_lite试用
Feb 14 PHP
第七章 php自定义函数实现代码
Dec 30 PHP
用php实现选择排序的解决方法
May 04 PHP
php函数serialize()与unserialize()用法实例
Nov 06 PHP
php检索或者复制远程文件的方法
Mar 13 PHP
浅析php设计模式之数据对象映射模式
Mar 03 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
Jun 13 PHP
php用户密码加密算法分析【Discuz加密算法】
Oct 12 PHP
php微信公众平台示例代码分析(二)
Dec 06 PHP
PHP单例模式与工厂模式详解
Aug 29 PHP
一文搞懂php的垃圾回收机制
Jun 18 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文件操作的详解
2013/06/05 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
php根据年月获取季度的方法
2014/03/31 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python自动化生成IOS的图标
2018/11/13 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
学Python 3的理由和必要性
2019/11/19 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
实习教师自我鉴定
2013/12/09 职场文书
商务会议邀请函
2014/01/09 职场文书
高中运动会前导词
2015/07/20 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
golang实现浏览器导出excel文件功能
2022/03/25 Golang