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

<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 啥的就填返回的结果
  
选择右侧 在线调用 -> 发送请求