在項目中使用滑動驗證，可以調用騰訊云的組件和接口（付費項目）

導言

首先看看官方的步驟教學：

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

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

項目是原生HTML 或者 jQuery 開發，那么可以使用“快速接入”。

項目使用 vue、react 等框架開發，則需要使用“定制接入”。

步驟

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(); }}

其中，騰訊返回的數據格式是這樣的：

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

4、在線調試

后臺未接入騰訊云驗證接口，也可以通過騰訊云提供的在線調試工具，測試驗證結果

步驟：

前端滑動驗證，打印返回結果 在工具網頁點選 “只看必填參數”，將所需內容填好，Ticket 啥的就填返回的結果 選擇右側 在線調用 -> 發送請求

到此這篇關于vue如何在項目中調用騰訊云的滑動驗證碼的文章就介紹到這了,更多相關vue 騰訊云滑動驗證碼內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！