javascript - rails - recaptcha invisible recaptcha




Google Invisible reCAPTCHAバッジを非表示にする方法 (9)

Contact Form 7アップデートと最新バージョン(バージョン5.1.x)を使用している場合、使用するためにGoogle reCAPTCHA v3をインストール、セットアップする必要があります。

デフォルトでは、画面の右下のすべてのページにGoogle reCAPTCHAロゴが表示されます。 これは、私たちの評価によると、ユーザーに悪い体験をもたらしています。 そして、あなたのウェブサイト、ブログは少し遅くなります(PageSpeedスコアに反映)、あなたのウェブサイトはこのバッジを表示するためにGoogleから追加の1 JavaScriptライブラリをロードする必要があります。

次の手順に従って、CF7からGoogle reCAPTCHA v3を非表示にできます(必要な場合にのみ表示します)。

最初に、テーマの functions.php ファイルを開きます(ファイルマネージャーまたはFTPクライアントを使用)。 このファイルは /wp-content/themes/your-theme/ あり、次のスニペットを追加します(このコードを使用して、すべてのページでreCAPTCHAボックスを削除します)。

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

次に、Google reCAPTCHA(連絡先ページ、ログイン、登録ページなど)を表示するページにこのスニペットを追加します。

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );
}

OIWブログ-WordPressの Contact Form 7からGoogle reCAPTCHAロゴを削除する方法を 参照してください (reCAPTCHAバッジを非表示)

新しいGoogle Invisible reCATPTCHAを実装すると、デフォルトでは、画面の右下に「reCAPTCHAで保護されています」という小さなバッジが表示されます。

これを隠したいです。


Googleは、「ユーザーフローにreCAPTCHAブランドを視覚的に含める限り、バッジを非表示にすることができます」と言います。 FAQ


TOUのようにバッジを非表示にすることは実際には正当ではなく、既存の配置オプションがUIやUXを破壊するため、固定配置を模倣する代わりにインラインでレンダリングされる次のカスタマイズを思い付きました。

バッジコンテナにCSSを適用するだけです。

.badge-container {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  width: 70px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 0 4px #ddd;
  transition: linear 100ms width;
}
.badge-container:hover {
    width: 256px;
}

それは合法的にプッシュできる限りだと思います。


WordpressのContact Form 7のユーザーの場合、この方法は機能します。Contact7 Formsのページを除くすべてのページでv3 Recaptchaを非表示にします。

ただし、このメソッドは、テキスト入力フォーム要素を持つすべてのページを識別できる一意のクラスセレクターを使用しているサイトで動作するはずです。

最初に、タイルを折りたたむことができるターゲットスタイルルールをCSSに追加しました。

CSS

 div.grecaptcha-badge.hide{
    width:0 !important;
}

次に、ウィンドウが読み込まれた後にトリガーするようにヘッダーにJQueryスクリプトを追加して、「grecaptcha-badge」クラスセレクターをJQueryで使用できるようにし、「hide」クラスを追加して使用可能なCSSスタイルを適用できるようにしました。

$(window).load(function () { 
    if(!($('.wpcf7').length)){ 
      $('.grecaptcha-badge').addClass( 'hide' );
       }
});

タイルはすべてのページで0.5秒間点滅し続けますが、これまでに発見した最善の回避策であり、準拠することを望んでいます。 改善の提案を歓迎します。


すべてのアプローチをテストしました:

警告: display: none スパムチェックを無効にします!

visibility: hidden および opacity: 0 スパムチェックを無効にしないでください。

使用するコード:

.grecaptcha-badge { 
    visibility: hidden;
}

バッジアイコンを非表示にすると、Googleは次の項目を追加して、フォーム上のサービスを FAQ することを希望します。

<small>This site is protected by reCAPTCHA and the Google 
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>


もちろん、CSSを使用してそれを行うことができます。

ただし、reCAPTCHAの利用規約(同意している必要があります)に従って、サイトでのreCAPTCHAの実装について訪問者に通知する必要があります。

そして、 Google利用規約 から

これらの条件は、当社のサービスで使用されるブランドやロゴを使用する権利をあなたに付与するものではありません。 当社のサービス内またはサービスと共に表示される法的通知を削除、不明瞭化、または変更しないでください。

2018年 12月 更新 (@Solに感謝)

FAQ からバッジを非表示にできるようになりました:

reCAPTCHA v3バッジを非表示にします。 何が許可されていますか?

You are allowed to hide the badge as long as you include the reCAPTCHA
branding visibly in the user flow. Please include the following text:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

例えば:


連絡先ページを除くすべてのページでバッジを非表示にすることにしました(Wordpressを使用):

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
    visibility: visible !important;
}

私はウェブ開発者ではないので、何か問題がある場合は修正してください。

編集:表示の代わりに可視性を使用するように更新されました。


これに関する次のコメントを見ました

独自のCSSを適用する場合は、バッジをインラインに配置することも役立ちます。 ただし、APIキーの登録時にGoogleの利用規約を表示することに同意したことを忘れないでください。非表示にしないでください。 CSSを使用してバッジを完全に非表示にすることは可能ですが、お勧めしません。


Recaptcha問い合わせフォーム7およびRecaptcha v3ソリューション。

body:not(.page-id-20) .grecaptcha-badge {
    display: none;
}

複数の問い合わせフォームページ?

body:not(.page-id-12):not(.page-id-43) .grecaptcha-badge {
    display: none;
}

問い合わせフォームページがさらにある場合は、「nots」を追加できます。

body:not(.page-id-45):not(.page-id-78):not(.page-id-98) .grecaptcha-badge {
    display: none;
}

ボディセクションが次のようになることを確認してください。

<body>

次のように変更します。

 <body <?php body_class(); ?>>






recaptcha