appid: "xxxx"
bizState: "xxx"
randstr: "@0N2"
ret: 0 // 2 代表使用者關閉驗證彈窗
ticket: "xxxxx"

這篇文章主要講解了vue在專案中呼叫騰訊雲的滑動驗證碼的詳細教程，內容清晰明瞭，對此有興趣的小夥伴可以學習一下，相信大家閱讀完之後會有幫助。

在專案中使用滑動驗證，可以呼叫騰訊雲的元件和介面（付費專案）

步驟

1、新建專案對應 appid

在 驗證碼控制檯 中註冊 AppID 和 AppSecret。

其中的“所在網址”可以填本地開發IP地址，例如 “192.168.20.28”

注意，自己測試的話，需要先領取免費包。即在 APPID 列表裡新建驗證成功後，選擇列表 table 上面的 “領取免費包”，領取2萬次呼叫次數

2、在 index.html 中引入驗證 js 檔案

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

3、在按鈕中繫結點選事件，例項化 TencentCaptcha ，制定回撥函式

// vue 例子

// 點選按鈕，出現拼圖彈窗
<el @click="varify" > 驗證</el - button >

methods: {
 varify() {
  let appid = 'xxxxx'; // 騰訊雲控制檯中對應這個專案的 appid
  //生成一個滑塊驗證碼物件
  let captcha = new TencentCaptcha(appid, function (res) {
   // 使用者滑動結束或者關閉彈窗，騰訊返回的內容 
   console.log(res)
   if (res.ret === 0) {
    //成功，傳遞資料給後臺進行驗證
    axios.post('介面路徑', {
     Ticket: res.ticket,
     CaptchaAppId: res.appid,
     Randstr: res.randstr,
     // 其他引數
    })
     .then(
      // 後臺驗證通過，返回使用者資訊
      // 前端接收並登陸系統 
     )
     .catch(
      // 驗證失敗  
     )
   } else {
    // 提示使用者完成驗證
   }
  });
  // 滑塊顯示
  captcha.show();
 }
}

其中，騰訊返回的資料格式是這樣的：

4、線上除錯

後臺未接入騰訊雲驗證介面，也可以通過騰訊雲提供的線上除錯工具，測試驗證結果

步驟：

• 前端滑動驗證，列印返回結果
• 在工具網頁點選 “只看必填引數”，將所需內容填好，Ticket 啥的就填返回的結果
• 選擇右側 線上呼叫 -> 傳送請求