如何在Vue項目中引入騰訊驗證碼服務

今天就跟大家聊聊有關如何在Vue項目中引入騰訊驗證碼服務，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

步驟：

1. 后臺去騰訊云獲取一個JS地址；

2. 后臺通過接口傳給前端；

3. 前端依據JS地址去加載驗證碼；

4. 驗證成功后會得到一個ticket票據（就是一堆字符串），將其再傳給后臺；

5. 后臺驗證ticket，如果通過，你就會收到短信（或郵件）驗證碼了。

后臺的事不去管它，那我們前端都需要做什么呢？

首先在需要引入騰訊驗證碼的.vue組件內加入一個標簽:point_down:：

<div id="TCaptcha"  ></div>

然后當你頻繁多次調用發送短信的接口，直到觸發了需要調用騰訊驗證碼時（ 這個判斷是后臺告訴你的 ，比如我們項目中接口傳參的JSON中有個isShow的變量，如果等于1則要觸發騰訊云驗證了，默認狀態下是0，就是不需要騰訊驗證。具體情況問你們的后臺去，手動滑稽）

上圖是我們項目中實際的接口回調，可以看到回調中有個 Js地址 和 businessId ;

這個Js地址就是你去獲取云驗證的方式，你需要寫一個方法，把這個Js動態添加到body標簽內:point_down:：

參數src是調用獲取驗證碼接口返回數據時，將Js地址傳過來。

capInit這個函數是當你將Js引入進去后才會有的，否則報錯，所以設置一個延遲（代碼比較簡陋，可以用promise）。

然后這個callback回調函數就是 用戶驗證之后，會調用該函數，傳入json格式驗證參數。:point_down: 

//回調函數：驗證碼頁面關閉時回調
cbfn(res) {
 if (res.ret == 0) {
  // 用戶驗證成功,獲取到ticket，然后你需要將這個ticket和之前的businessId一起傳給后臺
  // 若后臺驗證成功，用戶就可以收到驗證碼了，無需你再做其他操作
  alert(res.ticket);
  capDestroy()
 }
 else {
  //用戶關閉驗證碼頁面，沒有驗證
  capDestroy() //銷毀之前創建的script標簽
 }
}

重復一遍：用戶驗證成功,獲取到ticket，然后你需要將這個ticket和之前的businessId一起傳給后臺。若后臺驗證成功，用戶就可以收到驗證碼了，無需你再做其他操作

最后再說（復制）一下 capInit(iframe_div, options) 這個函數，options是一個Json對象，可以設置多個參數。:point_down:

1. iframe_div（必填）：嵌入驗證碼 iframe 的元素。

2. options： {callback:xxx,showheader:xxx, themeColor:xxxxxx,type:"embed"}，json 格式對象

callback： 驗證碼頁面關閉回調函數。用戶驗證之后，會調用該函數，傳入json格式驗證參數。

{ret:xxx,ticket:"xxx"}

ret=0 表示用戶驗證完成，業務可以校驗 ticket；

ret=1 表示用戶未驗證驗證碼，此時沒有 ticket 參數。

參數 ticket 需要提交給業務后臺，具體填哪個字段參考后面后臺 server 開發部分。

themeColor ：設置頁面的主題色彩，值為 16 進制色彩，比如 ff572d。設置后頁面里的按鈕和圖標會變成設置的顏色

showHeader
：顯示驗證碼頁面的 header (返回和幫助，只對手機頁面有效)

false：不顯示

type ：PC 端可選選項，配置驗證碼的樣式。具體樣式表現可以查看驗證碼官網

"point"：觸發式（默認）

"embed"：嵌入式

"popup"：彈窗式

pos：設置彈框驗證碼的位置屬性，該參數只對 PC 彈框驗證碼有效

absolute: 絕對定位

fixed：相對于瀏覽器窗口的絕對定位

static：靜態定位

relative：相對定位

keepOpen：設置驗證通過頁面屬性

false：驗證通過刷新（默認）

lang：設置驗證碼語言類型

簡體中文：2052（默認）

繁體中文：1028

英文：1033

要記得及時調用capDestroy()來銷毀你創建的script標簽，否則就會出現很多個script標簽……

文檔上說的是在調用capInit()之前調用capDestroy()，但是我試了一下，不好使，最后放在了回調里，無論驗證成功還是用戶沒有驗證，關閉了驗證彈窗，都調用一下capDestroy()。

看完上述內容，你們對如何在Vue項目中引入騰訊驗證碼服務有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。