web-dev-qa-db-ja.com

エラー：reCAPTCHAクライアントが存在しません（reCAPTCHA v3）

ReCAPTCHA v3を自分のフォームの1つに統合しました。 onloadでは、右下に生成されたトークンとgoogle captchaロゴがあります。しかし、フォームを送信すると、コンソールに「エラー：reCAPTCHAクライアントが存在しません」というエラーが表示されます。また、「g-recaptcha-response」によってデータがフェッチされず、$ _ POST ["g-recaptcha-response"]が空のままのようです。

これがサンプルコードです：

<script type="text/javascript">
    var ReCaptchaCallbackV3 = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute("site_key").then(function(token) {
                console.log("v3 Token: " + token);
            });
        });
    };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>

フォームの送信時に「g-recaptcha-response」は生成されません。

Google reCaptchaについてはあまり知りません。私は彼らから提供されたドキュメントに従い、サイトと秘密鍵を適切に使用しました。

誰かがどこに問題があるのか​​、そして可能な解決策は何か教えてもらえますか？

recaptcharecaptcha-v3
6
Sourov Amin

リクエストを送信する前にスクリプトをロードしてみましたか？

<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
    var ReCaptchaCallbackV3 = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute("site_key").then(function(token) {
                console.log("v3 Token: " + token);
            });
        });
    };
</script>
1
Stephen Tracey

これは、ユーザーが操作する前のRecaptcha 2でも発生します。したがって、recaptchaの値をチェックするJS関数をトリガーする送信ボタンがあります。クライアントが存在しないという問題を解決するために、次のことを行いました。

try {
   data["reCaptcha"] = grecaptcha.getResponse();
} catch (err) {
   data["reCaptcha"] = "";
}

次に、データオブジェクトは、再キャプチャを検証するバックエンドスクリプトに送信されます。バックエンドは、フィールドが空かどうかもチェックします。

1
Elendurwen

ReCAPTCHA v3でこの問題に遭遇したのは、正しいサイトキーを渡さなかったためです。

1
Piquan

サイトでアクティブなRecaptchaがないときにgrecaptcha.reset();を呼び出していたため、この問題が発生しました

grecaptcha.reset();
recaptcha__en.js:507 Uncaught Error: No reCAPTCHA clients exist.
    at MX (recaptcha__en.js:507)
    at Object.Zn [as reset] (recaptcha__en.js:514)
    at <anonymous>:1:13
0
SSpoke