vue如何在项目中调用腾讯云的滑动验证码
更新时间：2020年07月15日 11:33:12 作者：将臣
这篇文章主要介绍了vue如何在项目中调用腾讯云的滑动验证码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在项目中使用滑动验证，可以调用腾讯云的组件和接口（付费项目）
导言
首先看看官方的步骤教学：
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 腾讯云滑动验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue拦截器如何增加token参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
今天小编就为大家分享一篇解决vue中修改了数据但视图无法更新的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue 项目代理设置的优化功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue动画打包后失效问题的解决方法,在文中给大家提到了vue-cli 打包后自定义动画未执行的解决方法，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue关于重置表单数据出现undefined的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要给大家介绍了关于vue3中使用codemirror的详细教程,CodeMirror是一款功能强大的代码高亮插件,他不仅提供了高亮功能,其丰富的方法属性也封装了缩进、自动换行、获取编辑文本、设置编辑文本、回退功能等多种实用效果,需要的朋友可以参考下2023-09-09
在分布式系统中，事务管理是一个非常重要的问题，所以本文将介绍一下Vue中如何进行分布式事务管理以及分布式事务解决方案，希望对大家有所帮助2023-06-06
这篇文章主要介绍了vue项目打包后proxyTable代理失效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。2023-05-05
这篇文章主要为大家详细介绍了用Vue.js开发一个网页时钟，分为白天模式和夜晚模式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
Vue实例中生命周期created和mounted的区别详解
这篇文章主要给大家介绍了关于Vue实例中生命周期created和mounted区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
最新评论