多个Google Invisible reCaptcha返回＆＃34;无法将消息发布到https：//www.google.com"先是

Question

我有一个网站，允许人们通过一系列投票按钮大致每30分钟记录一些东西的状态（各种状态的每个东西有3个按钮，10-15个东西）。我试图实施Google的Invisible reCaptcha，以防止我收到的垃圾邮件。

我设法实现了Invisible reCaptcha并且它在第一次投票时工作正常但在同一页面上的任何后续投票中我从控制台得到以下错误

[Error] Unable to post message to https://www.google.com. Recipient has origin https://example.com.

    postMessage
    l (recaptcha__en.js:210:171)
    (anonymous function)
    (anonymous function) (recaptcha__en.js:54:445)
    Lf (recaptcha__en.js:58:203)
    Gf (recaptcha__en.js:58:91)
    F (recaptcha__en.js:57:201)
    nf (recaptcha__en.js:51:1190)
    promiseReactionJob

我的实施如下。

这是用户按下按钮时调用的功能。我传递了一些变量，这些变量随后用于实际记录投票，但是为了测试我只是将它们打印到控制台。回调中的console.log命令将替换为对稍后实际记录投票的函数的调用。

function buttonPress(typeVote, value, e, thing) {

  //Create a unique name for the captcha's div 
  var captchaName = value + "captcha";

  //e is a reference to the div holding the things' button
  //so we add the captcha's div after it
  $($(e).parent()).after("<div id='" + captchaName + "'></div>");

  //Render the captcha
  grecaptcha.render(captchaName, {
              sitekey: 'SITE_KEY_HERE', size: 'invisible',
              callback: function(token) {

                            //This will be replaced with a call to the function
                            //that actually logs the votes with an AJAX call.
                            console.log("TOKEN: " + token + "THING: " + thing + "Vote: " + typeVote);

                            //Remove the captcha div so we can recreate if user 
                            //votes again
                            $(value + 'captcha').remove();

                          }});
  //Test the user
  grecaptcha.execute();

  //By default the captcha badge is appended to the div the captcha
  //is contained in. That is hiding it behind content so move it to 
  //the end of the body tag so it's visible
  $('body').append($('.grecaptcha-badge'));
}

然后在结束</body>标记之前的页面底部，我导入了Google reCaptcha库。

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

Answer 1

当谷歌谈到可用于调用执行或重置功能的可选窗口小部件ID时，它们实际上并不是指您创建窗口小部件的div所指定的ID，而是指由此处返回的唯一ID。渲染功能。

您必须将该函数分配给变量，然后将该变量用作执行或重置函数的传递参数。

function buttonPress(typeVote, value, e, thing) {

  //Create a unique name for the captcha's div 
  var captchaName = value + "captcha";

  //e is a reference to the div holding the things' button
  //so we add the captcha's div after it
  $($(e).parent()).after("<div id='" + captchaName + "'></div>");

  //Render the captcha
  var widgetReference = grecaptcha.render(captchaName, {
              sitekey: 'SITE_KEY_HERE', size: 'invisible',
              callback: function(token) {

                            //This will be replaced with a call to the function
                            //that actually logs the votes with an AJAX call.
                            console.log("TOKEN: " + token + "THING: " + thing + "Vote: " + typeVote);

                            //Remove the captcha div so we can recreate if user 
                            //votes again
                            grecaptcha.reset(widgetReference);
                            $(value + 'captcha').remove();

                          }});
  //Test the user
  grecaptcha.execute(widgetReference);

  //By default the captcha badge is appended to the div the captcha
  //is contained in. That is hiding it behind content so move it to 
  //the end of the body tag so it's visible
  $('body').append($('.grecaptcha-badge'));
}