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

什麼是騰訊驗證碼？它長這個樣子……👇

最近公司項目要求引入騰訊雲驗證，要求是這樣的：爲了防止別人惡意刷短信驗證碼，當用戶短期內屢次獲取驗證碼的時候，須要調用騰訊驗證碼，驗證成功後會繼續自動發送驗證碼，剛開始的我聽的一臉矇蔽，網上搜索也沒有多少相關的文章，然而如今我接通啦，發現是很簡單點事（或許就是由於太簡單了因此沒有人寫2333…）

很少BB，開始吧！

先看文檔的接口調用流程：

（文檔地址：cloud.tencent.com/document/pr…）

總共分紅幾個小步驟：

1. 後臺去騰訊雲獲取一個JS地址；
2. 後臺經過接口傳給前端；
3. 前端依據JS地址去加載驗證碼；
4. 驗證成功後會獲得一個ticket票據（就是一堆字符串），將其再傳給後臺；
5. 後臺驗證ticket，若是經過，你就會收到短信（或郵件）驗證碼了。

後臺的事不去管它，那咱們前端都須要作什麼呢？

首先在須要引入騰訊驗證碼的.vue組件內加入一個標籤👇：

<div id="TCaptcha" style="width:300px;height:40px;" ></div>複製代碼

而後當你頻繁屢次調用發送短信的接口，直到觸發了須要調用騰訊驗證碼時（這個判斷是後臺告訴你的，好比咱們項目中接口傳參的JSON中有個isShow的變量，若是等於1則要觸發騰訊雲驗證了，默認狀態下是0，就是不須要騰訊驗證。具體狀況問大家的後臺去，手動滑稽）

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

這個Js地址就是你去獲取雲驗證的方式，你須要寫一個方法，把這個Js動態添加到body標籤內👇：

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

capInit這個函數是當你將Js引入進去後纔會有的，不然報錯，因此設置一個延遲（代碼比較簡陋，能夠用promise）。

而後這個callback回調函數就是用戶驗證以後，會調用該函數，傳入json格式驗證參數。👇

//回調函數：驗證碼頁面關閉時回調
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對象，能夠設置多個參數。👇

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：驗證經過刷新（默認）
true：保持顯示，不刷新

lang：設置驗證碼語言類型

簡體中文：2052（默認）
繁體中文：1028
英文：1033

要記得及時調用capDestroy()來銷燬你建立的script標籤，不然就會出現不少個script標籤……

文檔上說的是在調用capInit()以前調用capDestroy()，可是我試了一下，很差使，最後放在了回調裏，不管驗證成功仍是用戶沒有驗證，關閉了驗證彈窗，都調用一下capDestroy()。

騰訊驗證碼PC網頁API地址：cloud.tencent.com/document/pr…

若是有問題，或者哪裏說的不對，歡迎留言討論~~