1. 程式人生 > >極驗驗證——滑塊拼圖驗證碼

極驗驗證——滑塊拼圖驗證碼

如何使用:

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

1 2 <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協議即可,不需要更改其它地方。例如更換成以下程式碼即可:

1 2 <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(){});內

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $.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”,這個函式是你需要驗證碼的真正初始化程式碼:如下: