極驗驗證——滑塊拼圖驗證碼
阿新 • • 發佈:2019-02-20
如何使用:
首先要確認前端使用頁面,比如登陸頁面
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”,這個函式是你需要驗證碼的真正初始化程式碼:如下: