vue如何在項目中調(diào)用騰訊云的滑動驗證碼
在項目中使用滑動驗證，可以調(diào)用騰訊云的組件和接口（付費項目）
導言
首先看看官方的步驟教學：
https://cloud.tencent.com/document/product/1110/36839
其中，前端涉及到的是“步驟3：客戶端接入”，里面介紹了兩種接入方法：“快速接入”和“定制接入”。
項目是原生HTML 或者 jQuery 開發(fā)，那么可以使用“快速接入”。
項目使用 vue、react 等框架開發(fā)，則需要使用“定制接入”。
步驟
1、新建項目對應 appid
在 驗證碼控制臺 中注冊 AppID 和 AppSecret。
其中的“所在網(wǎng)址”可以填本地開發(fā)IP地址，例如 “192.168.20.28”
注意，自己測試的話，需要先領取免費包。即在 APPID 列表里新建驗證成功后，選擇列表 table 上面的 “領取免費包”，領取2萬次調(diào)用次數(shù)
2、在 index.html 中引入驗證 js 文件
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
3、在按鈕中綁定點擊事件，實例化 TencentCaptcha ，制定回調(diào)函數(shù)
// vue 例子
// 點擊按鈕，出現(xiàn)拼圖彈窗
<el @click="varify" > 驗證</el - button >
methods: {
varify() {
let appid = 'xxxxx'; // 騰訊云控制臺中對應這個項目的 appid
//生成一個滑塊驗證碼對象
let captcha = new TencentCaptcha(appid, function (res) {
// 用戶滑動結束或者關閉彈窗，騰訊返回的內(nèi)容
console.log(res)
if (res.ret === 0) {
//成功，傳遞數(shù)據(jù)給后臺進行驗證
axios.post('接口路徑', {
Ticket: res.ticket,
CaptchaAppId: res.appid,
Randstr: res.randstr,
// 其他參數(shù)
})
.then(
// 后臺驗證通過，返回用戶信息
// 前端接收并登陸系統(tǒng)
)
.catch(
// 驗證失敗
)
} else {
// 提示用戶完成驗證
}
});
// 滑塊顯示
captcha.show();
}
}
其中，騰訊返回的數(shù)據(jù)格式是這樣的：
appid: "xxxx" bizState: "xxx" randstr: "@0N2" ret: 0 // 2 代表用戶關閉驗證彈窗 ticket: "xxxxx"
4、在線調(diào)試
后臺未接入騰訊云驗證接口，也可以通過騰訊云提供的在線調(diào)試工具，測試驗證結果
步驟：
- 前端滑動驗證，打印返回結果
- 在工具網(wǎng)頁點選 “只看必填參數(shù)”，將所需內(nèi)容填好，Ticket 啥的就填返回的結果
- 選擇右側 在線調(diào)用 -> 發(fā)送請求
到此這篇關于vue如何在項目中調(diào)用騰訊云的滑動驗證碼的文章就介紹到這了,更多相關vue 騰訊云滑動驗證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue攔截器如何增加token參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
解決vue中修改了數(shù)據(jù)但視圖無法更新的情況
今天小編就為大家分享一篇解決vue中修改了數(shù)據(jù)但視圖無法更新的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue 項目代理設置的優(yōu)化功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue動畫打包后失效問題的解決方法,在文中給大家提到了vue-cli 打包后自定義動畫未執(zhí)行的解決方法，需要的朋友可以參考下2018-09-09
vue關于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關于vue3中使用codemirror的詳細教程,CodeMirror是一款功能強大的代碼高亮插件,他不僅提供了高亮功能,其豐富的方法屬性也封裝了縮進、自動換行、獲取編輯文本、設置編輯文本、回退功能等多種實用效果,需要的朋友可以參考下2023-09-09
在分布式系統(tǒng)中，事務管理是一個非常重要的問題，所以本文將介紹一下Vue中如何進行分布式事務管理以及分布式事務解決方案，希望對大家有所幫助2023-06-06
這篇文章主要介紹了vue項目打包后proxyTable代理失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。2023-05-05
這篇文章主要為大家詳細介紹了用Vue.js開發(fā)一個網(wǎng)頁時鐘，分為白天模式和夜晚模式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Vue實例中生命周期created和mounted的區(qū)別詳解
這篇文章主要給大家介紹了關于Vue實例中生命周期created和mounted區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-08-08