多个不可见的 recaptchas 总是发送空的 g-recaptcha-response

Question

我在我的网站上使用了新的不可见的 recaptcha，在主页上我有两个带有 recaptcha 验证的表单。
因为我在同一页面中使用了多个验证码，所以我不得不使用该方法并将其设置为显式。
无论如何，我花了一整天的时间进行搜索以了解我需要使用 grecaptcha.execute() 才能使其正常工作，但即使使用它也无法正常工作，我可能做错了什么，但我没有不知道它到底是什么，这里有一些代码：

 <script type="text/javascript" charset="utf-8">

  var onloadCallback = function() {
    var recaptchas = document.querySelectorAll('div[class=g-recaptcha]');

   for( i = 0; i < recaptchas.length; i++) {
     grecaptcha.render( recaptchas[i].id, {
       'sitekey' : '',
       'badge' : 'inline',
       'size' : 'invisible'
      });
     grecaptcha.execute(i);
   }
 }
</script>

在我这样使用的表格中：

<div class="g-recaptcha" id="rc1"></div>

并在页面末尾：

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

我真的不知道为什么它现在不工作了，我已经将 grecaptcha.execute 设置为 "i" 因为我读到它是一个基于 0 的索引，所以它应该可以工作, 但它没有

Answer 1

对于那些想知道如何做到这一点的人，我通过显式加载两者来让它工作，并且它起作用了，就像这样：

<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>    
<script>
      var recaptcha1;
      var recaptcha2;
      var myCallBack = function() {
        //Render recaptcha1 on element with ID "recaptcha1"
        recaptcha1 = grecaptcha.render('recaptcha1', {
          'sitekey' : 'your-site-key',
          'theme' : 'light'
        });

        //Render recaptcha2 on element with ID "recaptcha2"
        recaptcha2 = grecaptcha.render('recaptcha2', {
          'sitekey' : 'your-site-key',
          'theme' : 'light'
        });
      };
</script>