極驗驗證

發送驗證碼

1. 點擊獲取驗證碼，發送請求 獲取人機驗證碼（極驗 API1），獲取用來初始化驗證碼的參數
2. 調用極驗的 JavaScript SDK 提供的 API，通過上一步得到的數據初始化驗證碼
3. 用戶通過人機交互驗證之后，極驗會給你返回一些驗證的結果數據，然后調用你的 獲取短信驗證碼 (極驗 API2） 接口，如果正確，短信就可以發出去了
4. 按鈕倒計時效果

下面是具體實現步驟：

1. 點擊獲取驗證碼按鈕，發送請求，獲取用來初始化驗證碼的參數

handleSendCode () { const { mobile } = this.form axios({ method: 'GET', url: `http://ttapi.research.itcast.cn/mp/v1_0/captchas/${mobile}` }).then(res => { const { data } = res.data }) }

請求結果數據如下：

{ "message": "xxx", "data": { "success": "xxx", "gt": "xxx", "challenge": "xxx", new_captcha: "xxx" } } 

 

2. 加載極驗提供的 JavaScript SDK 到項目中

• 極驗 JavaScript SDK 文件地址

將 gt.js 文件下載到項目的 src/vendor 目錄中，然后在 src/views/login/index.vue 中加載該文件。

小提示：我們建議把沒有提供 npm 包的第三方內容都放到項目的 src/vendor 目錄中

... # gt.js 會提供一個全局函數 initGeetest import '@/vendor/gt.js' ... 

 

一個小插曲：當你在項目中引入 gt.js 模塊之后你會發現在終端中輸出很多（400+）語法格式錯誤，這是因為 ESLint 也把 gt.js 當作我們自己寫的 JavaScript 文件去進行代碼格式檢查了。

極驗雖然是一個第三方文件，但是該文件是我們手動下載到項目中（非npm模塊）去加載使用的，所以 ESLint 也會檢查該文件的代碼規則，在這里是沒有必要的，代碼格式檢查應該主要針對我們的代碼文件，解決方法就是在項目的根目錄創建一個文件 .eslintignore並寫入以下內容：

src/vendor/gt.js

 

.eslintignore 文件類似於 .gitignore，它的作用是手動配置 ESLint 不需要校驗的代碼文件。

配置好以后，重啟服務就好了。

3. 查看極驗文檔，體驗官方demo
4. 根據文檔中的說明，調用 initGeetest 函數初始化極驗驗證碼

handleSendCode () { const { mobile } = this.form axios({ method: 'GET', url: `http://ttapi.research.itcast.cn/mp/v1_0/captchas/${mobile}` }).then(res => { const { data } = res.data window.initGeetest({ // 以下配置參數來自服務端 SDK gt: data.gt, challenge: data.challenge, offline: !data.success, new_captcha: data.new_captcha, product: 'bind' // 隱藏，直接彈出式 }, (captchaObj) => { this.captchaObj = captchaObj captchaObj.onReady(function () { // 驗證碼ready之后才能調用verify方法顯示驗證碼 captchaObj.verify() }).onSuccess(function () { // 人機交互驗證通過 console.log(captchaObj.getValidate()) }).onError(function () { // your code }) }) }) } 

 

5. 在極驗的 onSuccess 回調函數中，將調用 captchaObj.getValidate() 獲取到的結果參數作為發送短信驗證碼接口的請求參數發出獲取短信驗證碼請求

handleSendCode () { const { mobile } = this.form axios({ method: 'GET', url: `http://ttapi.research.itcast.cn/mp/v1_0/captchas/${mobile}` }).then(res => { const { data } = res.data window.initGeetest({ // 以下配置參數來自服務端 SDK gt: data.gt, challenge: data.challenge, offline: !data.success, new_captcha: data.new_captcha, product: 'bind' // 隱藏，直接彈出式 }, (captchaObj) => { captchaObj.onReady(function () { // 驗證碼ready之后才能調用verify方法顯示驗證碼 captchaObj.verify() }).onSuccess(function () { // 人機交互驗證通過 const { geetest_challenge: challenge, geetest_seccode: seccode, geetest_validate: validate } = captchaObj.getValidate() axios({ method: 'GET', url: `http://ttapi.research.itcast.cn/mp/v1_0/sms/codes/${mobile}`, params: { challenge, validate, seccode } }).then(res => { console.log(res.data) // 開啟倒計時效果 }) }).onError(function () { // your code }) }) }) }

6. 不出意外的話，你應該可以收到短信驗證碼了。