極驗驗證碼完整教程

你能找到這篇文章，說明你對極驗驗證已經不是完全陌生的了，所有廢話我就不多說了，直接開始表說如何使用它，不過在此之前呢，先粘貼幾個你可能會用得到的網址：

官網：http://www.geetest.com/

官方文檔：http://www.geetest.com/install/sections/idx-basic-introduction.html

github：https://github.com/GeeTeam/gt-php-sdk.git

如何使用：

首先要確認前端使用頁面，比如登陸頁面

 

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://static.geetest.com/static/tools/gt.js"></script>

　　

1.在登陸頁面訪問引入類庫：

 

如果您的網站使用https，則只需要將引入極驗庫的地方換成https協議即可，不需要更改其它地方。例如更換成以下代碼即可：

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://static.geetest.com/static/tools/gt.js"></script>

　　

2.初始化前端

下面的代碼需要在頁面加載后就執行，如果你使用jQuery，可以寫在$(function(){});內

$.ajax({
    // 獲取id，challenge，success（是否啟用failback）
    url: "../web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // 加隨機數防止緩存
    type: "get",
    dataType: "json",
    success: function (data) {
        // 使用initGeetest接口
        // 參數1：配置參數
        // 參數2：回調，回調的第一個參數驗證碼對象，之后可以使用它做appendTo之類的事件
        initGeetest({
            gt: data.gt,
            challenge: data.challenge,
            product: "popup", // 產品形式，包括：float，embed，popup。注意只對PC版驗證碼有效
            offline: !data.success // 表示用戶后台檢測極驗服務器是否宕機，與SDK配合，用戶一般不需要關注
        }, handlerPopup);
    }
});

　　

上面代碼的意思是說，頁面加載后，需要到你指定的URL地址上獲得驗證碼信息,至於上面的URL地址“../web/StartCaptchaServlet.php”里面寫了什么內容，這個我們在服務器端代碼部署會詳細說明。

但是需要說明的是，上面的代碼里有一個回調函數叫“handlerPopup”，這個函數是你需要驗證碼的真正初始化代碼：如下：

// 代碼詳細說明
var handlerPopup = function (captchaObj) {
    // 注冊提交按鈕事件，比如在登陸頁面的登陸按鈕
    $("#popup-submit").click(function () {
        // 此處省略在登陸界面中，獲取登陸數據的一些步驟
       
        // 先校驗是否點擊了驗證碼
        var validate = captchaObj.getValidate();
        if (!validate) {
            alert('請先完成驗證！');
            return;
        }
        // 提交驗證碼信息，比如登陸頁面，你需要提交登陸信息，用戶名和密碼等登陸數據
        $.ajax({
            url: "../web/VerifyLoginServlet.php", 
            type: "post",
            // dataType: "json",
            data: {
                // 用戶名和密碼等其他數據，自己獲取，不做演示
                username:username,
                password:password,
                // 驗證碼數據，這些數據不用自己獲取
                // 這是二次驗證所需的三個值
                // 當然，你也可以直接設置驗證碼單獨校驗，省略其他信息
                geetest_challenge: validate.geetest_challenge,
                geetest_validate: validate.geetest_validate,
                geetest_seccode: validate.geetest_seccode
            },
            // 這里是正確返回處理結果的處理函數
            // 假設你就返回了1，2，3
            // 當然，正常情況是返回JSON數據
            success: function (result) {
                // 1表示驗證碼驗證失敗
                if (result == "1") {
                    alert("驗證碼驗證失敗！");
                }else if (result == "2") {
                    alert("用戶名或密碼錯誤！");
                }else if (result == "3") {
                    alert("登陸成功！");
                    // 登陸成功了，可以在這里做其他處理
                }else{
                    alert("登陸錯誤！");
                }
            }
        });
    });
    // 彈出式需要綁定觸發驗證碼彈出按鈕
    // 比如在登陸頁面，這個觸發按鈕就是登陸按鈕
    captchaObj.bindOn("#popup-submit");
    
    // 將驗證碼加到id為captcha的元素里
    // 驗證碼將會在下面指定的元素中顯示出來
    captchaObj.appendTo("#popup-captcha");
    
    // 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html
};

　　

至此，前端的所有設置都寫完了，官方的說明文檔：http://www.geetest.com/install/sections/idx-client-sdk.html

 

3.服務器端部署（PHP）

 

在第一步中，我們設置了一個這樣的地址“../web/StartCaptchaServlet.php”，在這個地址里邊寫什么呢：

<?php
// 引入文件
require_once dirname(dirname(__FILE__)) . '/lib/class.geetestlib.php';
require_once dirname(dirname(__FILE__)) . '/config/config.php';
// 實例化，實例化的參數在config中配置，分別是：驗證ID 和 驗證Key，如何獲取下面會說。
$GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY);
session_start();
// 這個是用戶的標識，或者說是給極驗服務器區分的標識，如果你項目沒有預先設置，可以像下面這樣設置：
if(!isset($_SESSION['user_id'])){
	$_SESSION['user_id']=uniqid();// 生成一個唯一ID
}
$user_id = $_SESSION['user_id'];
// 或者，你就直接寫成：
// $user_id = "test";

// 生成驗證碼信息，並返回給客戶端
$status = $GtSdk->pre_process($user_id);
$_SESSION['gtserver'] = $status;
$_SESSION['user_id'] = $user_id;
echo $GtSdk->get_response_str();
?>

　　

如何獲取 驗證ID 和 驗證Key ：

1.從 驗證后台 注冊賬號
2.添加驗證，可以獲取一組當前驗證的ID/Key
3.將ID和Key分別替換到config.php文件中的captcha_id/private_key變量的值

　　

4.點擊提交按鈕之后的服務端校驗（二次驗證）

比如上面說的，用戶登錄時，你把用戶名和密碼和驗證碼信息都提交到服務器了，這個時候，你就可以做校驗了：

<?php
// 引入文件
require_once dirname(dirname(__FILE__)) . '/lib/class.geetestlib.php';
require_once dirname(dirname(__FILE__)) . '/config/config.php';
session_start();
$GtSdk = new GeetestLib(CAPTCHA_ID, PRIVATE_KEY);

// 比如你設置了一個驗證碼是否驗證通過的標識
$code_flag=false;

// 這里獲取你之前設置的user_id，傳送給極驗服務器做校驗
$user_id = $_SESSION['user_id'];
if ($_SESSION['gtserver'] == 1) {
    $result = $GtSdk->success_validate($_POST['geetest_challenge'], $_POST['geetest_validate'], $_POST['geetest_seccode'], $user_id);
    if ($result) {
        // 驗證碼驗證成功
        $code_flag=true;
    }
}else{
    if ($GtSdk->fail_validate($_POST['geetest_challenge'],$_POST['geetest_validate'],$_POST['geetest_seccode'])) {
         // 驗證碼驗證成功
        $code_flag=true;
    }
}

// 如果驗證碼驗證成功，再進行其他校驗
if($code_flag){
    // 其他驗證操作
    // 用戶名不對時，返回2，其他錯誤返回3，等等。。。。
}else{
    // 驗證碼驗證失敗，返回1，這里和上面相呼應，當然我的項目沒有簡單的返回1，而是返回了JSON數據
    echo 1;
    exit(-1);
}
?>

　　

 

好了，所有的內容都說完了，感謝你的閱讀。

本文首發地址：https://blog.plcent.com/archives/100

歡迎訪問我的博客，https://blog.plcent.com