vue如何在項目中調用騰訊云的滑動驗證碼
在項目中使用滑動驗證,可以調用騰訊云的組件和接口(付費項目)
導言
首先看看官方的步驟教學:
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萬次調用次數(shù)
2、在 index.html 中引入驗證 js 文件
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
3、在按鈕中綁定點擊事件,實例化 TencentCaptcha ,制定回調函數(shù)
// vue 例子 // 點擊按鈕,出現(xiàn)拼圖彈窗 <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) { //成功,傳遞數(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、在線調試
后臺未接入騰訊云驗證接口,也可以通過騰訊云提供的在線調試工具,測試驗證結果
步驟:
- 前端滑動驗證,打印返回結果
- 在工具網(wǎng)頁點選 “只看必填參數(shù)”,將所需內容填好,Ticket 啥的就填返回的結果
- 選擇右側 在線調用 -> 發(fā)送請求
到此這篇關于vue如何在項目中調用騰訊云的滑動驗證碼的文章就介紹到這了,更多相關vue 騰訊云滑動驗證碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue項目input標簽checkbox,change和click綁定事件的區(qū)別說明
這篇文章主要介紹了vue項目input標簽checkbox,change和click綁定事件的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08Vue淺析axios二次封裝與節(jié)流及防抖的實現(xiàn)
axios是基于promise的HTTP庫,可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios,?axios),本文給大家介紹axios的二次封裝和節(jié)流與防抖2022-08-08vue打包部署到springboot并通過tomcat運行的操作方法
這篇文章主要介紹了vue打包部署到springboot并通過tomcat運行的操作方法,本文通過實例圖文并茂的形式給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05Vue實現(xiàn)登錄功能全套超詳細講解(含封裝axios)
這篇文章主要給大家介紹了關于Vue實現(xiàn)登錄功能(含封裝axios)的相關資料,Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應該要熟練的掌握它,需要的朋友可以參考下2023-10-10Vue實現(xiàn)下拉滾動加載數(shù)據(jù)的示例
這篇文章主要介紹了Vue實現(xiàn)下拉滾動加載數(shù)據(jù)的示例,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下2021-04-04Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06vue在項目中實現(xiàn)base64加密解密的示例代碼
這篇文章主要為大家詳細介紹了vue在項目中實現(xiàn)base64加密解密的兩種方法,文中的示例代碼講解詳細,具有一定的參考價值,有需要的小伙伴可以了解一下2023-10-10