什么是騰訊驗證碼？它長這個樣子……:point_down:

最近公司項目要求引入騰訊云驗證，要求是這樣的： 為了防止別人惡意刷短信驗證碼，當(dāng)用戶短時間內(nèi)多次獲取驗證碼的時候，需要調(diào)用騰訊驗證碼，驗證成功后會繼續(xù)自動發(fā)送驗證碼 ，剛開始的我聽的一臉蒙蔽，網(wǎng)上搜索也沒有多少相關(guān)的文章，然而現(xiàn)在我接通啦，發(fā)現(xiàn)是很簡單點事（或許就是因為太簡單了所以沒有人寫2333…）

不多BB，開始吧！

先看文檔的接口調(diào)用流程：

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

總共分成幾個小步驟：

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

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

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

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

然后當(dāng)你頻繁多次調(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ù)是當(dāng)你將Js引入進去后才會有的，否則報錯，所以設(shè)置一個延遲（代碼比較簡陋，可以用promise）。

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

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

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

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

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

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

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

{ret:xxx,ticket:"xxx"}

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

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

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

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

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

false：不顯示

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

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

"embed"：嵌入式

"popup"：彈窗式

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

absolute: 絕對定位

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

static：靜態(tài)定位

relative：相對定位

keepOpen：設(shè)置驗證通過頁面屬性

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

lang：設(shè)置驗證碼語言類型

簡體中文：2052（默認）

繁體中文：1028

英文：1033

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

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

總結(jié)

以上所述是小編給大家介紹的在Vue項目中引入騰訊驗證碼服務(wù)的教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論