订阅此JS代码并等待响应

我正在尝试将Google reCaptcha v3与Angular应用集成,但是我遇到了一个“订阅”的问题,我不知道该怎么做。这是我正在使用的方法:

  addRecaptchaScript() {
    window['grecaptchaCallback'] = () => {
      //this.renderReCaptcha();
    }

    (function (d, s, id, obj) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { obj.renderReCaptcha(); return; }
      js = d.createElement(s); js.id = id;
      js.src = "https://www.google.com/recaptcha/api.js?render=KEY&onload=grecaptchaCallback";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'recaptcha-jssdk', this));

  }

基本上我在onInit()中调用方法addRecaptchaScript(),然后使用renderReCaptcha()方法生成验证码令牌。

  renderReCaptcha() {
    //window['grecaptcha'].ready(function () {
    window['grecaptcha'].execute('KEY', { action: 'register' }).then((token) => {
      this.usuarioExterno.response = token;
      console.log(token);
    });

这种方法的问题在于Google reCaptcha令牌会在几分钟内过期,因此我意识到正确的方法是当用户单击“提交”按钮时生成此令牌。但是,要使此功能正常工作,我想必须对方法renderReCaptcha()进行“订阅”;因为如果我只在用户点击提交按钮时调用此方法,Angular就不会等待请求的响应,并且发送的令牌将为null。

因此,主要问题是:如何编辑方法renderReCaptcha();使其“订阅”并仅在收到此令牌请求的响应时发送表格?

评论