我正在为每个带有具有类的按钮的表单动态加载不可见的 reCAPTCHAg-recaptcha
.
我遇到的问题是验证码未正确加载,我不知道为什么。我按照验证码网站上的文档进行操作,但我不确定如何以及为什么会出现此错误:
Uncaught Error: Missing required parameters: sitekey
有人知道问题出在哪里吗?
这是我使用的代码:
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&hl={{ app.request.locale|default(defaultLang) }}' async defer></script>
JS
var onloadCallback = function () {
$("button.g-recaptcha").each(function () {
var el = $(this);
//SITE_KEY is actually hard coded string.
//It is string that google provided. I just remove it for security reasons...
grecaptcha.render($(el).attr("id"), {
"sitekey": SITE_KEY,
"size": "invisible",
"badge": "inline",
"callback": function (token) {
$(el).parent().find(".g-recaptcha-response").val(token);
$(el).closest("form").submit();
}
}, true);
});
$("button.g-recaptcha").click(function(event) {
event.preventDefault();
grecaptcha.execute();
});
};
HTML 示例:
<button
type="submit"
id="submitReviewButton"
class="btn btn-lg btn-submit btn--green g-recaptcha"
>
{{ "review.submit_your_review"|trans }}
</button>
你在这里错过了一个重要的部分。 api 小部件必须显式呈现。只需添加render=explicit
到 recaptcha api 脚本。
<script src='https://www.google.com/recaptcha/api.js?
onload=onloadCallback
&render=explicit
&hl={{app.request.locale|default(defaultLang) }}' async defer>
</script>
阅读谷歌文档(验证码 V2 | reCAPTCHA - 显式呈现 reCAPTCHA 小部件 https://developers.google.com/recaptcha/docs/display#explicit_render).
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)