接第三方图片滑动验证极验

去极验的官网看一下官方文档 <a>https://docs.geetest.com/install/apirefer/api/web</a>

输入图片说明

步骤

    第一步:在你的项目中引入gt.js在官方    <a>http://static.geetest.com/static/tools/gt.js</a>
    第二步:就是使用这个这个文件 得提前声明一下才可以用 decare let initGeetest:any;我是基于angular2的,如果不是可以用window.initGeetest调用这个方法
    第三步:调用接口成功之后返回我想要的数据之后再调用这个方法
    let _this = this;
    let t1 = setInterval(function(){
      if(_this.timeNum > 1){
        _this.timeNum --;
        _this.getCodeByText = "重新获取(" +  _this.timeNum +'s)'
      } else {
        clearInterval(t1)
        _this.timeNum = 60
        _this.getCodeByText = "重新获取"
        _this.disabledGetCode = false;
      }
    },1000)
    initGeetest({
      gt: res.data.gt,
      challenge: res.data.challenge,
      offline: !res.data.success,     // 表示用户后台检测极验服务器是否宕机
      new_captcha: res.data.new_captcha,  // 用于宕机时表示是新验证码的宕机
      product: 'bind',      // 设置下一步验证的展现形式 这个就是模态框显示出来
    }, function (captchaObj) {
      //onReady方法
      captchaObj.onReady(function () {
        _this.indexImg++;
        captchaObj.verify();

        setTimeout(function () {
          console.log('是否出现了弹窗+开始设置样式 第二次');
        }, 500)

      });

      // onSuccess方法
      captchaObj.onSuccess(function () {
        console.log('回调函数onSuccess');
        _this.gtResult = captchaObj.getValidate();
        _this.paramLogin.geetest_challenge = _this.gtResult.geetest_challenge
        _this.paramLogin.geetest_validate = _this.gtResult.geetest_validate
        _this.paramLogin.geetest_seccode = _this.gtResult.geetest_seccode
        console.log('回调函数onSuccess中的 ===result验证结果 ===');
        if (!_this.gtResult) {
          this.tipShow('请完成验证');
          return;
        }
      });

      // onError
      captchaObj.onError(function () {
        // 出错啦,可以提醒用户稍后进行重试
        console.log('出错啦,onError方法');
      });

      // onClose方法
      captchaObj.onClose(function () {
        console.log('请完成验证')
        // _this.inviteBtnDisabled = false;
      });
    })

猜你喜欢

转载自my.oschina.net/u/3312137/blog/1793948