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
mysql 查询指定日期时间内sql语句实现原理与代码
Dec 16 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
Oct 30 PHP
php 5.6版本中编写一个PHP扩展的简单示例
Jan 20 PHP
php+xml结合Ajax实现点赞功能完整实例
Jan 30 PHP
基于PHP实现等比压缩图片大小
Mar 04 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
Feb 09 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
Oct 07 PHP
php-fpm添加service服务的例子
Apr 27 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
Feb 25 PHP
PHP 实现 JSON 数据的编码和解码操作详解
Apr 22 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
May 29 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页面间传递参数实例代码
2008/06/05 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
PHP多文件上传类实例
2015/03/07 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
python列表操作实例
2015/01/14 Python
Python的装饰器使用详解
2017/06/26 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
python3将变量输入的简单实例
2020/08/19 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
幼儿园教师获奖感言
2014/03/11 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
最新离婚协议书范本
2014/08/19 职场文书
国庆节标语大全
2014/10/08 职场文书
中学总务处工作总结
2015/08/12 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis