Wordpress=ウェブサイトのHTMLフォームでGoogleのInvisible reCAPTCHAを実装しようとしています。
head
最初に、コールバックを設定し、フォームの送信イベントを検証にバインドするスクリプトがあります。
_jQuery(document).ready(function() {
var valid = false;
window.recaptchaOkay = function(token) {
valid = true;
jQuery('#cadastro').submit();
};
document.getElementById('cadastro').addEventListener('submit', function validate(event) {
if (valid) {
return true;
}
var cap = document
.getElementById('cadastro')
.querySelector('.g-recaptcha');
grecaptcha.execute(cap);
event.preventDefault();
return false;
});
});
_
次に、ドキュメントに示されているとおりに、reCAPTCHAスクリプトを読み込みます。
_<script src="https://www.google.com/recaptcha/api.js" async defer></script>
_
body
そして、これは私が使用しているフォームです:
_<form action="https://example.com/" method="post" id="cadastro">
<div
class="g-recaptcha"
data-sitekey="6Lc0jC4UAAAAANlXbqGWNlwyW_e1kEB89zLTfMer"
data-callback="recaptchaOkay"
data-size="invisible"
id="cadastro-captcha">
</div>
<button type="submit" id="cadastro-submit">Enviar</button>
</form>
_
フォームに入力して送信すると、次のエラーがスローされます(_grecaptcha.execute
_の行):
_Error: Invalid ReCAPTCHA client id: [object HTMLDivElement]
_
また、_cadastro-captcha
_ IDを文字列としてその関数に直接渡そうとしました(例:grecaptcha.execute("cadastro-captcha")
)、それでも同じエラーが発生します(IDが異なることは明らかです)。同様に、引数を渡さないと、undefined
を参照する以外は同じエラーが発生します。
これを試してください:-
Grecaptcha.reset()メソッドはオプションのwidget_idパラメーターを受け入れ、指定されていない場合はデフォルトで最初に作成されたウィジェットを使用します。 widget_idは、作成された各ウィジェットのgrecaptcha.render()メソッドから返されます。したがって、このIDを保存し、それを使用して特定のウィジェットをリセットする必要があります。
var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);
詳細については、Googleのrecaptchaのドキュメントをお読みください: https://developers.google.com/recaptcha/docs/display#js_api