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

网络编程 2025/1/9 佚名

2 0 1

金狮镖局 Design By www.egabc.com

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

导言

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

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="/UploadFiles/2021-04-02/TCaptcha.js">

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,腾讯云滑动验证码,vue,,滑动验证码

金狮镖局 Design By www.egabc.com

金狮镖局 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

金狮镖局 Design By www.egabc.com

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

暂无vue如何在项目中调用腾讯云的滑动验证码的评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2025年01月09日

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

vue,腾讯云滑动验证码,vue,,滑动验证码

jQuery 添加元素和删除元素的方法

Vue中keep-alive的两种应用方式

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接