溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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();
}
}其中，騰訊返回的數據格式是這樣的：
appid: "xxxx" bizState: "xxx" randstr: "@0N2" ret: 0 // 2 代表用戶關閉驗證彈窗 ticket: "xxxxx"
4、在線調試
后臺未接入騰訊云驗證接口，也可以通過騰訊云提供的在線調試工具，測試驗證結果
步驟：
看完上述內容，是不是對vue在項目中調用騰訊云的滑動驗證碼的詳細教程有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
