我的 recaptcha 渲染不工作并且 return 0

Question

我目前在使用 Google 的隐形验证码时遇到问题。 尽管我尝试了所有方法，它还是无法正确加载。

情况： 单击按钮时，我有一个通过 jQuery 添加到 DOM 的表单。然后该表单显示在覆盖整个屏幕的覆盖层中。 起初，不用担心，但是一旦显示表单，我尝试渲染验证码但没有成功，这会阻止执行并因此无法在表单上使用验证码。

这是我的表单的插入代码（有效）：

$('.js-event-subscribe').click(function(e){
        e.preventDefault();
        var event = $(this).data('event');
        
        clearTimeout(ajxTimeout);
        if(typeof ajx != "undefined")
            ajx.abort();
            
        ajxTimeout = setTimeout(function(){
            ajx = $.ajax({
                type: 'POST',
                url: langPath + '/ajax/event-subscribe/',
                data: 'id='+event,
                success: function(content){
                    if($('body').find('#js-event-subscribe').length)
                        $('body').find('#js-event-subscribe').remove();

                    $(content).insertAfter('footer');
                    $('html, body').addClass('opened');

                    //var test = grecaptcha.render('js-recaptcha-event');
                    //console.log(test);
                    //grecaptcha.execute('js-recaptcha-event');
                }
            });
        }, 500);
    });

到目前为止，表单已正确添加并正常运行。 grecaptcha.render（根据文档）应该 return widgetID 但回复 0。 “js-recaptcha-event”参数对应于表单中DIV验证码的ID（因此添加到DOM）。

<div id="js-recaptcha-event" class="g-recaptcha" data-sitekey="xxxxxxxxx" data-size="invisible"></div>

因此 grecaptcha.execute ('js-recaptcha-event') return 是一个错误

Uncaught Error: Invalid site key or not loaded in api.js: js-recaptcha-event

我尝试在渲染参数中添加站点密钥，结果相同。 :(

recaptcha API 加载通过（也在属性中使用异步和延迟测试）

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

你能告诉我需要什么才能让它工作吗？

提前致谢

Answer 1

据我所知，0 是对 render 事件的有效响应，即对于呈现的第一个小部件，小部件 ID 是从 0 开始的整数。

由于渲染是显式的，我会采用在 render 事件中指定所有参数的方法：

widget = grecaptcha.render(captcha, {
        'sitekey': 'xxx',
        'callback': function(token) { ... },
        'badge': 'inline',
        'size': 'invisible'
    });

鉴于您的错误响应，我会仔细检查您的站点密钥是否正确，以及它是否对应于您的 reCAPTCHA 管理控制台中的正确条目，您需要在其中指定您从中加载的域。

确保在 reCAPTCHA 脚本加载之前加载呈现小部件的代码。

我建议您立即在出现的表单上呈现 reCAPTCHA，然后 execute 在单击提交时呈现它。这也可能解决问题。