vue调用阿里云无痕验证

vue调用阿里云无痕验证

在调用阿里云无痕验证时有个先决条件需要全局变量先定义才能去加载js

    set_ALY_config () {
      var _this = this
      return new Promise((resolve,reject) => {
        window.NVC_Opt = {
          appkey:this.alyConfig.Appkey, // 开通无痕验证提供的appkey 与scene
          scene:this.alyConfig.Scene,
          isH5:false,
          popUp:false,
          renderTo:'#captcha',
          nvcCallback:function(data){
            getALYData(data).then(res => {
              if(res.data.code == 1000 || res.data.code == 100 || res.data.code == 200){ // 无痕验证失败二次验证
                 _this.$message({
                  message: '验证成功',
                  type: 'success'
                });
              } else {
                _this.$message({
                  message: '当前访问用户过多，请刷新后重试!',
                  type: 'error'
                });
              }
            })
          // data为getNVCVal()的值，此函数为二次验证滑动或者刮刮卡通过后的回调函数
          // data跟业务请求一起上传，由后端请求AnalyzeNvc接口，接口会返回100或者900
          },
          // trans: {"nvcCode":600, "key1": "code0"},
          language: "cn",
          //滑动验证长度配置
          customWidth: 300,
          //刮刮卡配置项
          width: 500,
          height: 125,
          elements: [
            "//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png",
            "//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png"
          ], 
          bg_back_prepared: "//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png",
          bg_front: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC",
          obj_ok: "//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png",
          bg_back_pass: "//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png",
          obj_error: "//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png",
          bg_back_fail: "//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png",
          upLang:{"cn":{
            _ggk_guide: "请摁住鼠标左键，刮出两面盾牌",
            _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
            _ggk_loading: "加载中",
            _ggk_fail: ["呀，盾牌不见了<br/>请","javascript:noCaptcha.reset()","再来一次","或","https://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN","反馈问题"],
            _ggk_action_timeout: ["我等得太久啦<br/>请","javascript:noCaptcha.reset()","再来一次","或","https://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN","反馈问题"],
            _ggk_net_err: ["网络实在不给力<br/>请","javascript:noCaptcha.reset()","再来一次","或","https://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN","反馈问题"],
            _ggk_too_fast: ["您刮得太快啦<br/>请","javascript:noCaptcha.reset()","再来一次","或","https://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN","反馈问题"]
            }
          }
        }
        resolve()
      })
    },

// 动态加载js文件
    get_ALY_file () {
      try {
        var stamp = new Date().getTime();
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', 'https://g.alicdn.com/sd/nvc/1.1.112/guide.js?t=' + stamp);
        document.documentElement.appendChild(script);
      } catch (e) {

      }
    }

// 保证先在window下存在变量NVC_Opt再去加载js文件
    this.set_ALY_config().then(res=>{
      this.get_ALY_file()
    })

会出现页面刚刷新用户快速的去调用无痕验证 有些情况下是未加载完成文件

    queryGetALYData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            getNVCVal(); // 调用阿里云提供api报错
            resolve();
          } catch (e) {
          // 捕捉异常 继续回调 直至成功退出
            resolve(this.queryGetALYData());
          }
        }, 200);
      });
    },