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

<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 
};