極驗 基礎使用 vue項

項目要求要用B站那種滑塊驗證，爲了方便我就找到了極驗，其實也不方便，反正不管咋說人家就是搞安全驗證啥的，咋也比我這種搬磚的要有含量吧，反正現在也有時間，就搞搞。

1 安裝 PHP SDK

使用命令從Github導入完整項目

git clone https://github.com/GeeTeam/gt3-php-sdk.git

從極驗管理後臺獲取您的公鑰（id）和私鑰（key）, 並在代碼中配置。配置文件路徑如下：/config/config.php

導入class.geetestlib.php文件到你的項目中

如果選擇PC端部署，則將CAPTCHA_ID和PRIVATE_KEY後面的字符串替換成自己在後臺註冊的ID和Key。
如果在移動端部署，則將MOBILE_CAPTCHA_ID和MOBILE_PRIVATE_KEY後面的字符串替換成自己在後臺註冊的ID和Key。

以上是後端乾的活，我就照貓畫虎。

2 客戶端安裝使用

引入初始化函數 gt.js文件存放於服務端SDK中
注： 行爲驗證要求初始化在業務頁面加載時同時初始化，否則驗證無法讀取用戶在業務頁面操作的行爲數據，會導致驗證策略失效。
01 gt.js 下載地址
02 將gt.js放到vue項目中src - vendor -gt.js目錄中
03 然後再我們使用的頁面中引用gt.js

import '@/vendor /gt.js'

ajax({
    url: "API1接口 後端給的接口 ",
    type: "get",
    dataType: "json",
    success: function (data) {
        //請檢測data的數據結構， 保證data.gt, data.challenge, data.success有值
        initGeetest({
            // 以下配置參數來自服務端 SDK
            gt: data.gt,
            challenge: data.challenge,
            offline: !data.success,
            new_captcha: true
             product: "bind" //彈出方式 
        }, function (captchaObj) {
            // 這裏可以調用驗證實例 captchaObj 的實例方法
            captchaObj
              .onReady(function() {
                //驗證碼ready之後才能調用verify方法顯示驗證碼
                  captchaObj.verify(); //顯示驗證碼
              })
              .onSuccess(function() {
                //成功操作，這個就看我們的項目需求，
                比如我們驗證成功，就根據手機號，進行驗證碼驗證，就可以直接進行驗證
              })
              .onError(function() {
                //那這個就是我們更正常了，
              });
        })
    }
})

彈出框就這樣OK了，來吧讓我們快樂的搬磚吧。