web-dev-qa-db-ja.com

非表示のキャプチャを実行すると、「エラー：無効なReCAPTCHAクライアントID」

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を参照する以外は同じエラーが発生します。

javascriptwordpressrecaptchainvisible-recaptcha
9
Kroltan

これを試してください：-

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

10
Harveer Singh Aulakh