快捷導(dǎo)航

vue如何在項(xiàng)目中調(diào)用騰訊云的滑動(dòng)驗(yàn)證碼

更新時(shí)間：2020年07月15日 11:33:12 作者：將臣

這篇文章主要介紹了vue如何在項(xiàng)目中調(diào)用騰訊云的滑動(dòng)驗(yàn)證碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在項(xiàng)目中使用滑動(dòng)驗(yàn)證，可以調(diào)用騰訊云的組件和接口（付費(fèi)項(xiàng)目）

導(dǎo)言

首先看看官方的步驟教學(xué)：

https://cloud.tencent.com/document/product/1110/36839

其中，前端涉及到的是“步驟3：客戶端接入”，里面介紹了兩種接入方法：“快速接入”和“定制接入”。

項(xiàng)目是原生HTML 或者 jQuery 開(kāi)發(fā)，那么可以使用“快速接入”。

項(xiàng)目使用 vue、react 等框架開(kāi)發(fā)，則需要使用“定制接入”。

步驟

1、新建項(xiàng)目對(duì)應(yīng) appid

在驗(yàn)證碼控制臺(tái) 中注冊(cè) AppID 和 AppSecret。

其中的“所在網(wǎng)址”可以填本地開(kāi)發(fā)IP地址，例如 “192.168.20.28”

注意，自己測(cè)試的話，需要先領(lǐng)取免費(fèi)包。即在 APPID 列表里新建驗(yàn)證成功后，選擇列表 table 上面的 “領(lǐng)取免費(fèi)包”，領(lǐng)取2萬(wàn)次調(diào)用次數(shù)

2、在 index.html 中引入驗(yàn)證 js 文件

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

3、在按鈕中綁定點(diǎn)擊事件，實(shí)例化 TencentCaptcha ，制定回調(diào)函數(shù)

// vue 例子

// 點(diǎn)擊按鈕，出現(xiàn)拼圖彈窗
<el @click="varify" > 驗(yàn)證</el - button >

methods: {
 varify() {
  let appid = 'xxxxx'; // 騰訊云控制臺(tái)中對(duì)應(yīng)這個(gè)項(xiàng)目的 appid
  //生成一個(gè)滑塊驗(yàn)證碼對(duì)象
  let captcha = new TencentCaptcha(appid, function (res) {
   // 用戶滑動(dòng)結(jié)束或者關(guān)閉彈窗，騰訊返回的內(nèi)容 
   console.log(res)
   if (res.ret === 0) {
    //成功，傳遞數(shù)據(jù)給后臺(tái)進(jìn)行驗(yàn)證
    axios.post('接口路徑', {
     Ticket: res.ticket,
     CaptchaAppId: res.appid,
     Randstr: res.randstr,
     // 其他參數(shù)
    })
     .then(
      // 后臺(tái)驗(yàn)證通過(guò)，返回用戶信息
      // 前端接收并登陸系統(tǒng) 
     )
     .catch(
      // 驗(yàn)證失敗  
     )
   } else {
    // 提示用戶完成驗(yàn)證
   }
  });
  // 滑塊顯示
  captcha.show();
 }
}

其中，騰訊返回的數(shù)據(jù)格式是這樣的：

appid: "xxxx"
bizState: "xxx"
randstr: "@0N2"
ret: 0 // 2 代表用戶關(guān)閉驗(yàn)證彈窗
ticket: "xxxxx"

4、在線調(diào)試

后臺(tái)未接入騰訊云驗(yàn)證接口，也可以通過(guò)騰訊云提供的在線調(diào)試工具，測(cè)試驗(yàn)證結(jié)果

步驟：

前端滑動(dòng)驗(yàn)證，打印返回結(jié)果
在工具網(wǎng)頁(yè)點(diǎn)選 “只看必填參數(shù)”，將所需內(nèi)容填好，Ticket 啥的就填返回的結(jié)果
選擇右側(cè) 在線調(diào)用 -> 發(fā)送請(qǐng)求

到此這篇關(guān)于vue如何在項(xiàng)目中調(diào)用騰訊云的滑動(dòng)驗(yàn)證碼的文章就介紹到這了,更多相關(guān)vue 騰訊云滑動(dòng)驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: