php+js實現的拖動滑塊驗證碼驗證表單操作示例【附原始碼下載】
阿新 • • 發佈:2020-05-28
本文例項講述了php+js實現的拖動滑塊驗證碼驗證表單操作。分享給大家供大家參考,具體如下:
現在很多網站,比如淘寶,京東等都改用使用極驗拖動驗證碼實現登入,這種方式比傳統的驗證碼方式有更好的體驗,減少使用者輸入的錯誤,也同樣能起到防盜刷的功能。現在很多極驗都是第三方的,也很多都是收費的。今天在這裡給大家分享自己用原生php實現的一個極驗的程式碼。用原生php的好處就是以後你要巢狀到什麼框架,可以直接用核心程式碼,改一改就好了。
極驗拖動動畫圖
程式碼檔案截圖
程式碼實現
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,$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,$this->bg_height); imagecopy($this->im,$this->im_slide,$this->bg_height,$this->mark_width,$this->bg_height*2,$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,$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->mark_height); imagecopy($this->im_slide,$img_mark,$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陣列(Array)操作技巧大全》、《PHP資料結構與演算法教程》、《php程式設計演算法總結》、《PHP數學運算技巧總結》、《php字串(string)用法總結》及《php常見資料庫操作技巧彙總》
希望本文所述對大家PHP程式設計有所幫助。