web-dev-qa-db-ja.com

Google REcaptchaが表示されない

私の<body>

<div class="g-recaptcha" data-sitekey="some-key (original is right)">

これは私の<head>

<script src="//www.google.com/recaptcha/api.js"></script>

しかし、FirefoxでもChromeでも何も表示されません...これは既知の問題ですか？

javascriptrecaptcha
14
Fane

<script src="//www.google.com/recaptcha/api.js"></script>は、headタグを閉じる前の最後のものです。それは私のために同じ問題を修正しました

6
Andrei

この障害にぶつかっただけで、私の場合はAngularJSによるものでした。 Angularに限らず、ページの読み込み後に要素をバインドするライブラリは、Googleのコードが実行されるまで要素が存在しないため、Google reCAPTCHAが表示されない可能性があります。

これを解決するには、まずレンダリングを明示的に行い、reCAPTCHAがロードされたときに実行する関数を提供します。

<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit' async defer></script>

次に、一意のIDをコンテナに追加します。

<div id="recaptcha" class="g-recaptcha" data-sitekey="site key here"></div>

次に、カスタム関数で要素が実際に存在するのを待ちます：

var _captchaTries = 0;
function recaptchaOnload() {
    _captchaTries++;
    if (_captchaTries > 9)
        return;
    if ($('.g-recaptcha').length > 0) {
        grecaptcha.render("recaptcha", {
            sitekey: 'site key here',
            callback: function() {
                console.log('recaptcha callback');
            }
        });
        return;
    }
    window.setTimeout(recaptchaOnload, 1000);
}

これは、要素が見つかるまで10秒間試行し続け、それからreCAPTCHAをレンダリングします。

4
Shadow Wizard

Ad-Block PlusやuBlock Originなど、ブラウザでコンテンツブロッカーがアクティブになっていないことを確認してください。

これらを無効にして、ページを更新し、フォームを再度送信してください。

0
crmpicco

私が抱えていた問題は、ほとんどの時間を表示していたことですが、表示されない場合があり、表示するにはフォームを送信する必要があります（検証をトリガーします）。スクリプトタグに?render=explicitを追加すると、修正されました。

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

https://developers.google.com/recaptcha/docs/display#explicit_render

0
woolm110