如何在Vue專案中引入騰訊驗證碼服務

Va007發表於2018-04-02
Vue

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

如何在Vue專案中引入騰訊驗證碼服務

最近公司專案要求引入騰訊雲驗證，要求是這樣的：為了防止別人惡意刷簡訊驗證碼，當使用者短時間內多次獲取驗證碼的時候，需要呼叫騰訊驗證碼，驗證成功後會繼續自動傳送驗證碼，剛開始的我聽的一臉矇蔽，網上搜尋也沒有多少相關的文章，然而現在我接通啦，發現是很簡單點事（或許就是因為太簡單了所以沒有人寫2333…）

不多BB，開始吧！

先看文件的介面呼叫流程：

如何在Vue專案中引入騰訊驗證碼服務

（文件地址：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，就是不需要騰訊驗證。具體情況問你們的後臺去，手動滑稽）

如何在Vue專案中引入騰訊驗證碼服務

上圖是我們專案中實際的介面回撥，可以看到回撥中有個Js地址和businessId;

這個Js地址就是你去獲取雲驗證的方式，你需要寫一個方法，把這個Js動態新增到body標籤內?：

如何在Vue專案中引入騰訊驗證碼服務

引數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…

如果有問題，或者哪裡說的不對，歡迎留言討論~~


相關文章