php+js实现极验拖动滑块验证码验证源码

  [复制链接]
查看15427 | 回复89 | 2019-7-15 11:03:47 | 显示全部楼层 |阅读模式
应用场景
现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能。现在很多极验都是第三方的,也很多都是收费的。今天在这里给大家分享自己用原生php实现的一个极验的代码。用原生php的好处就是以后你要嵌套到什么框架,可以直接用核心代码,改一改就好了。

源码下载:
链接: https://pan.baidu.com/s/1bnN21CDNCDb-sO8xOaGL3A
提取码: wts5


相关课程
链接1:https://www.mano100.cn/thread-392-1-1.html
链接2:https://www.mano100.cn/thread-438-1-1.html

代码实现
html文件
  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>极验滑块拖动验证码-码农社区-web视频分享网</title>
  8.     <script type="text/javascript" src="tn_code.js?v=35"></script>
  9.     <link rel="stylesheet" type="text/css" href="style.css?v=27" />
  10. <style type="text/css"></style>
  11. </head>
  12. <body style="text-align:center;">
  13. <div class="tncode" style="text-align: center;margin: 100px auto;"></div>
  14. <script type="text/javascript">
  15. $TN.onsuccess(function(){
  16. //验证通过
  17. });
  18. </script>  
复制代码
php文件:check.php
  1. <?php
  2. require_once dirname(__FILE__).'/TnCode.class.php';
  3. $tn  = new TnCode();
  4. if($tn->check()){
  5.         $_SESSION['tncode_check'] = 'ok';
  6.     echo "ok";
  7. }else{
  8.         $_SESSION['tncode_check'] = 'error';
  9.     echo "error";
  10. }

  11. ?>
复制代码
主要核心文件:TnCode.class.php
  1. <?php
  2. class TnCode
  3. {
  4.     var $im = null;
  5.     var $im_fullbg = null;
  6.     var $im_bg = null;
  7.     var $im_slide = null;
  8.     var $bg_width = 240;
  9.     var $bg_height = 150;
  10.     var $mark_width = 50;
  11.     var $mark_height = 50;
  12.     var $bg_num = 6;
  13.     var $_x = 0;
  14.     var $_y = 0;
  15.     //容错象素 越大体验越好,越小破解难道越高
  16.     var $_fault = 3;
  17.     function __construct(){
  18.         //ini_set('display_errors','On');
  19.         //
  20.         error_reporting(0);
  21.         if(!isset($_SESSION)){
  22.             session_start();
  23.         }
  24.     }
  25.     function make(){
  26.         $this->_init();
  27.         $this->_createSlide();
  28.         $this->_createBg();
  29.         $this->_merge();
  30.         $this->_imgout();
  31.         $this->_destroy();
  32.     }

  33.     function check($offset=''){
  34.         if(!$_SESSION['tncode_r']){
  35.             return false;
  36.         }
  37.         if(!$offset){
  38.             $offset = $_REQUEST['tn_r'];
  39.         }
  40.         $ret = abs($_SESSION['tncode_r']-$offset)<=$this->_fault;
  41.         if($ret){
  42.             unset($_SESSION['tncode_r']);
  43.         }else{
  44.             $_SESSION['tncode_err']++;
  45.             if($_SESSION['tncode_err']>10){//错误10次必须刷新
  46.                 unset($_SESSION['tncode_r']);
  47.             }
  48.         }
  49.         return $ret;
  50.     }

  51.     private function _init(){
  52.         $bg = mt_rand(1,$this->bg_num);
  53.         $file_bg = dirname(__FILE__).'/bg/'.$bg.'.png';
  54.         $this->im_fullbg = imagecreatefrompng($file_bg);
  55.         $this->im_bg = imagecreatetruecolor($this->bg_width, $this->bg_height);
  56.         imagecopy($this->im_bg,$this->im_fullbg,0,0,0,0,$this->bg_width, $this->bg_height);
  57.         $this->im_slide = imagecreatetruecolor($this->mark_width, $this->bg_height);
  58.         $_SESSION['tncode_r'] = $this->_x = mt_rand(50,$this->bg_width-$this->mark_width-1);
  59.         $_SESSION['tncode_err'] = 0;
  60.         $this->_y = mt_rand(0,$this->bg_height-$this->mark_height-1);
  61.     }

  62.     private function _destroy(){
  63.         imagedestroy($this->im);
  64.         imagedestroy($this->im_fullbg);
  65.         imagedestroy($this->im_bg);
  66.         imagedestroy($this->im_slide);
  67.     }
  68.     private function _imgout(){
  69.         if(!$_GET['nowebp']&&function_exists('imagewebp')){//优先webp格式,超高压缩率
  70.             $type = 'webp';
  71.             $quality = 40;//图片质量 0-100
  72.         }else{
  73.             $type = 'png';
  74.             $quality = 7;//图片质量 0-9
  75.         }
  76.         header('Content-Type: image/'.$type);
  77.         $func = "image".$type;
  78.         $func($this->im,null,$quality);
  79.     }
  80.     private function _merge(){
  81.         $this->im = imagecreatetruecolor($this->bg_width, $this->bg_height*3);
  82.         imagecopy($this->im, $this->im_bg,0, 0 , 0, 0, $this->bg_width, $this->bg_height);
  83.         imagecopy($this->im, $this->im_slide,0, $this->bg_height , 0, 0, $this->mark_width, $this->bg_height);
  84.         imagecopy($this->im, $this->im_fullbg,0, $this->bg_height*2 , 0, 0, $this->bg_width, $this->bg_height);
  85.         imagecolortransparent($this->im,0);//16777215
  86.     }

  87.     private function _createBg(){
  88.         $file_mark = dirname(__FILE__).'/img/mark.png';
  89.         $im = imagecreatefrompng($file_mark);
  90.         header('Content-Type: image/png');
  91.         //imagealphablending( $im, true);
  92.         imagecolortransparent($im,0);//16777215
  93.         //imagepng($im);exit;
  94.         imagecopy($this->im_bg, $im, $this->_x, $this->_y  , 0  , 0 , $this->mark_width, $this->mark_height);
  95.         imagedestroy($im);
  96.     }

  97.     private function _createSlide(){
  98.         $file_mark = dirname(__FILE__).'/img/mark2.png';
  99.         $img_mark = imagecreatefrompng($file_mark);
  100.         imagecopy($this->im_slide, $this->im_fullbg,0, $this->_y , $this->_x, $this->_y, $this->mark_width, $this->mark_height);
  101.         imagecopy($this->im_slide, $img_mark,0, $this->_y , 0, 0, $this->mark_width, $this->mark_height);
  102.         imagecolortransparent($this->im_slide,0);//16777215
  103.         //header('Content-Type: image/png');
  104.         //imagepng($this->im_slide);exit;
  105.         imagedestroy($img_mark);
  106.     }

  107. }
  108. ?>
复制代码








QQ截图20190715103107.jpg
jiyan.gif
回复

使用道具 举报

下页再停留 | 2019-7-16 08:37:52 | 显示全部楼层
强烈支持楼主ing……
回复

使用道具 举报

guiyi000 | 2019-7-16 08:43:03 | 显示全部楼层
强烈支持楼主ing……
回复

使用道具 举报

aaaaa | 2019-7-16 08:44:09 来自手机 | 显示全部楼层
支持
回复

使用道具 举报

xtboke | 2019-7-16 08:54:55 | 显示全部楼层
加油
回复

使用道具 举报

future | 2019-7-16 08:59:27 | 显示全部楼层
强烈支持楼主ing……
回复

使用道具 举报

平平淡淡 | 2019-7-16 09:11:29 | 显示全部楼层
真是难得给力的帖子啊。
回复

使用道具 举报

heihao | 2019-7-16 09:12:43 | 显示全部楼层
强烈支持楼主ing……
回复

使用道具 举报

weishuige | 2019-7-16 09:17:42 | 显示全部楼层
激动人心,无法言表!
回复

使用道具 举报

liang.zhu | 2019-7-16 09:35:43 | 显示全部楼层
真是难得给力的帖子啊。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则