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

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

步驟：

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

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

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

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

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

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

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

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

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

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

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

參數(shù)src是調(diào)用獲取驗證碼接口返回數(shù)據(jù)時，將Js地址傳過來。

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

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

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

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

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

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

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

callback： 驗證碼頁面關閉回調(diào)函數(shù)。用戶驗證之后，會調(diào)用該函數(shù)，傳入json格式驗證參數(shù)。

{ret:xxx,ticket:"xxx"}

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

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

參數(shù) ticket 需要提交給業(yè)務后臺，具體填哪個字段參考后面后臺 server 開發(fā)部分。

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

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

false：不顯示

type ：PC 端可選選項，配置驗證碼的樣式。具體樣式表現(xiàn)可以查看驗證碼官網(wǎng)

"point"：觸發(fā)式（默認）

"embed"：嵌入式

"popup"：彈窗式

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

absolute: 絕對定位

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

static：靜態(tài)定位

relative：相對定位

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

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

lang：設置驗證碼語言類型

簡體中文：2052（默認）

繁體中文：1028

英文：1033

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

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

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