微客导航 » 文章资讯 » vue如何在项目中调用腾讯云的滑动验证码

vue如何在项目中调用腾讯云的滑动验证码

2023-07-20 18:50:03 165

在项目中使用滑动验证，可以调用腾讯云的组件和接口（付费项目）

导言

首先看看官方的步骤教学：

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文件

3、在按钮中绑定点击事件，实例化TencentCaptcha，制定回调函数

//vue例子

//点击按钮，出现拼图弹窗
验证

methods:{
varify(){
letappid='xxxxx';//腾讯云控制台中对应这个项目的appid
//生成一个滑块验证码对象
letcaptcha=newTencentCaptcha(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腾讯云滑动验证码内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

vue如何在项目中调用腾讯云的滑动验证码

热门推荐

随机推荐