極驗驗證

發送驗證碼

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

1. 加載極驗提供的 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 不需要校驗的代碼檔案。

配置好以後，重新開機服務就好了。

1. 檢視極驗文檔，體驗官方demo
2. 根據文檔中的說明，調用 

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

1. 在極驗的 

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

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

轉載于:https://www.cnblogs.com/lljun/p/11160713.html