javascript - 隐形验证码 - 挑战未出现

Question

在我们动态生成的表单上实现隐形 reCAPTCHA。我们的 from 引擎从数据库获取字段列表，并用表单字段动态填充 DOM，显示它并处理帖子。要使用隐形 reCAPTCHA:

当我的页面加载完成时，我正在加载 google api 代码:

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

从数据库加载我的表单后，我将 recaptcha div 注入(inject)到我的字段列表中:

form.fields.push( { html: '<div id="g-recaptcha-div" class="g-recaptcha" data-sitekey="<my site key>" data-badge="inline" data-size="invisible"></div>',
                    type: 'html'
                  } );

稍后，我将表单附加到 DOM(jQuery 'appendTo')，然后立即渲染 reCAPTCHA:

recaptcha_id = grecaptcha.render("g-recaptcha-div", 
                   { 
                     'data-callback': _settings.form.submit,
                     'sitekey'      : <my site key>
                   }, true 
                 );

然后会出现表单，并显示 reCAPTCHA 徽章/受图标保护。查看 DOM 检查器，我可以看到 recaptcha DIV，其中包含“g-recaptcha-response”文本区域，但它是不可见的。正如我所期望的。

然后，在我的提交函数中，在进行一些表单验证后，我执行 recaptcha:

grecaptcha.execute(recaptcha_id);

此时我预计挑战会突然出现。但事实并非如此。嗯，确实有过一次。我的表单提交到我的 PHP 后端，其中有一个 g-recaptcha-response 参数，但它是空的。挑战出现一次，g-recaptcha-response 就有一个值。

调用执行函数时是否总是应该出现挑战？如果不是，那么我们应该如何处理空响应值？

谢谢，安迪

Answer 1

好的，对于那些在家里跟随的人:

1) 是的，您可以在调用 grecaptcha.render 时指定回调函数的名称。更深入地观察，我注意到在此页面( https://developers.google.com/recaptcha/docs/invisible#js_api )上我需要指定函数的名称，如下所示:

recaptcha_id = grecaptcha.render("g-recaptcha-div", 
                                  { 
                                    'sitekey'  : <my site key>,
                                    'callback' : <callback>
                                  }, true 
                                );

我试图使用“data-callback”，这是在 HTML 中指定它的方法。哎哟!为了回答我的另一个问题，一旦您正确执行此操作，无论是否呈现挑战，都会使用 token 调用回调。