クラスg-recaptcha
を持つボタンを持つすべてのフォームに対して、Invisible reCAPTCHAを動的にロードしています。
私が抱えている問題は、キャプチャが正しく読み込まれていないことと、その理由がわかりません。私はcaptchaウェブサイトのドキュメントに従いましたが、このエラーがどのように、そしてなぜ起こったのかわかりません:
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>
Googleドキュメントを読む( reCAPTCHA V2 | reCAPTCHA-reCAPTCHAウィジェットを明示的にレンダリングする )。
CForm BuilderとGoogle Captcha RECaptchaでWordpressを使用しているときに "必須パラメーターがありません:sitekey"が表示される場合、左ナビゲーションの[グローバルオプション]にRecaptchaサイトキーを配置する必要がありますCForm Builderプラグインの場合、Google Captchaプラグインでも同じ情報が必要です。
Recaptcha Invisible v2コード例を使用するためだけにここにいる場合:
1。フォームボタンにid = "recaptcha"と入力します
2。 JavaScriptを追加
var recaptchaCallback = function() {
$("button#recaptcha").each(function () {
var el = $(this);
grecaptcha.render($(el).attr("id"), {
"sitekey": 'YOUR_GOOGLE_RECAPTCHA_KEY',
"size": "invisible",
"badge": "bottomleft",
"callback": function (token) {
$(el).closest("form").submit();
}
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit" async defer></script>