什么是騰訊驗(yàn)證碼？它長這個(gè)樣子……:point_down:

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

不多BB，開始吧！

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

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

總共分成幾個(gè)小步驟：

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

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

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

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

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

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

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

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

capInit這個(gè)函數(shù)是當(dāng)你將Js引入進(jìn)去后才會(huì)有的，否則報(bào)錯(cuò)，所以設(shè)置一個(gè)延遲（代碼比較簡陋，可以用promise）。

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

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

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

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

1. iframe_div（必填）：嵌入驗(yàn)證碼 iframe 的元素。

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

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

{ret:xxx,ticket:"xxx"}

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

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

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

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

showHeader
：顯示驗(yàn)證碼頁面的 header (返回和幫助，只對(duì)手機(jī)頁面有效)

false：不顯示

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

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

"embed"：嵌入式

"popup"：彈窗式

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

absolute: 絕對(duì)定位

fixed：相對(duì)于瀏覽器窗口的絕對(duì)定位

static：靜態(tài)定位

relative：相對(duì)定位

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

false：驗(yàn)證通過刷新（默認(rèn)）

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

簡體中文：2052（默認(rèn)）

繁體中文：1028

英文：1033

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

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

總結(jié)

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

最新評(píng)論