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也可以?成Shell Script
Oct 09 PHP
php 设计模式之 单例模式
Dec 19 PHP
一个PHP分页类的代码
May 18 PHP
php实现多张图片上传加水印技巧
Apr 18 PHP
php使用百度ping服务代码实例
Jun 19 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
Nov 03 PHP
PHP使用curl模拟post上传及接收文件的方法
Mar 04 PHP
php根据用户名和手机号查询是否存在手机号码
Feb 16 PHP
PHP命名空间namespace的定义方法详解
Mar 29 PHP
PHP正则表达式笔记与实例详解
May 09 PHP
Yii框架操作cookie与session的方法实例详解
Sep 04 PHP
php 使用 __call实现重载功能示例
Nov 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 开发工具
2006/12/06 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python龙贝格法求积分实例
2020/02/29 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python文件操作基础流程解析
2020/03/19 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
如何编写python的daemon程序
2021/01/07 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
中学自我评价
2014/01/31 职场文书
洗车工岗位职责
2014/03/15 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript