php+js實(shí)現(xiàn)的拖動(dòng)滑塊驗(yàn)證碼驗(yàn)證表單操作示例【附源碼下載】
本文實(shí)例講述了php+js實(shí)現(xiàn)的拖動(dòng)滑塊驗(yàn)證碼驗(yàn)證表單操作。分享給大家供大家參考，具體如下：
現(xiàn)在很多網(wǎng)站，比如淘寶，京東等都改用使用極驗(yàn)拖動(dòng)驗(yàn)證碼實(shí)現(xiàn)登錄，這種方式比傳統(tǒng)的驗(yàn)證碼方式有更好的體驗(yàn)，減少用戶輸入的錯(cuò)誤，也同樣能起到防盜刷的功能。現(xiàn)在很多極驗(yàn)都是第三方的，也很多都是收費(fèi)的。今天在這里給大家分享自己用原生php實(shí)現(xiàn)的一個(gè)極驗(yàn)的代碼。用原生php的好處就是以后你要嵌套到什么框架，可以直接用核心代碼，改一改就好了。
極驗(yàn)拖動(dòng)動(dòng)畫圖
代碼文件截圖
代碼實(shí)現(xiàn)
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>極驗(yàn)滑塊拖動(dòng)驗(yàn)證碼-碼農(nóng)社區(qū)-web視頻分享網(wǎng)</title> <script type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/tn_code.js?v=35'></script> <link rel='stylesheet' type='text/css' href='http://www.hdgsjgj.cn/bcjs/style.css?v=27' rel='external nofollow' /><style type='text/css'></style></head><body style='text-align:center;'><div style='text-align: center;margin: 100px auto;'></div><script type='text/javascript'>$TN.onsuccess(function(){//驗(yàn)證通過(guò)});</script>
php文件：check.php
<?phprequire_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
<?phpclass 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; //容錯(cuò)象素 越大體驗(yàn)越好，越小破解難道越高 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){//錯(cuò)誤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’)){//優(yōu)先webp格式，超高壓縮率 $type = ’webp’; $quality = 40;//圖片質(zhì)量 0-100 }else{ $type = ’png’; $quality = 7;//圖片質(zhì)量 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); }}?>
附：完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《PHP圖形與圖片操作技巧匯總》、《PHP數(shù)組(Array)操作技巧大全》、《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計(jì)算法總結(jié)》、《PHP數(shù)學(xué)運(yùn)算技巧總結(jié)》、《php字符串(string)用法總結(jié)》及《php常見數(shù)據(jù)庫(kù)操作技巧匯總》
希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. 基于PHP做個(gè)圖片防盜鏈2. ASP.NET MVC把數(shù)據(jù)庫(kù)中枚舉項(xiàng)的數(shù)字轉(zhuǎn)換成文字3. asp.net core 認(rèn)證和授權(quán)實(shí)例詳解4. XML在語(yǔ)音合成中的應(yīng)用5. .NET中實(shí)現(xiàn)對(duì)象數(shù)據(jù)映射示例詳解6. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)7. ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁(yè)8. 如何使用ASP.NET Core 配置文件9. jscript與vbscript 操作XML元素屬性的代碼10. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)
網(wǎng)公網(wǎng)安備