<dt date-time='48mso8'><del dir='6hrqyyo9'></del></dt>
              1. <strike draggable='dxcb3bq'></strike>
                <tfoot draggable='c73smeli'></tfoot>
                1. <p date-time='dvdzml'><strike lang='x17feo3'></strike></p>

                  1. 文章熱詞:php,js,拖動滑塊驗證碼

                    日期:2019-07-16 08:38 by admin 2313 0 收藏
                    我要分享

                    摘要:現在很多網站,比如淘寶,京東等都改用使用極驗拖動驗證碼實現登錄,這種方式比傳統的驗證碼方式有更好的體驗,減少用戶輸入的錯誤,也同樣能起到防盜刷的功能。現在很多極驗都是第三方的,也很多都是收費的。今天在這裏給大家分享自己用原生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>極驗滑塊拖動驗證碼</title>
                        <script type="text/javascript" src="tn_code.js?v=35"></script>
                        <link rel="stylesheet" type="text/css" href="style.css?v=27" />
                    <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(){
                    //驗證通過
                    });
                    </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);
                        }
                    }
                    ?>

                    上一篇:程序員需要知道的縮寫和專業名詞

                    下一篇:排隊叫号,前10名顯示在屏幕上,用PHP如何實現


                    評論


                    WEB:
                    07月19日 11:11

                    <script src='http://www.feng-feng.com.cn/plugins/tc_prism/view/prism/prism.js' type='text/javascript'></script>

                    <link rel='stylesheet' type='text/css' href=http://www.feng-feng.com.cn/plugins/tc_prism/view/prism/prism.css'/>


                    WEB:
                    07月19日 11:07
                    @币圈小哥哥 引入這個樣式和js就好啦!

                    币圈小哥哥:
                    07月18日 11:38

                    學習了,博主的代碼高亮插件挺好的,是什麽插件

                    -->