ログアウト

Google reCAPTCHAの導入方法

サポート投稿日:

導入について

  • 新規にお問い合わせフォームを実装する場合は、オリジナル・CMS問わず、原則reCAPTCHAを入れてください。
  • 何らかの理由でreCAPTCHAの導入が難しい場合も、スパム対策は行ってください。
    • reCAPTCHA以外の対応方法例
    • reCAPTCHAのデメリット例
      • WordPressの場合、他のプラグインと干渉してうまく動かない場合がある
      • reCAPTCHA v2ではユーザーの負担が大きく、離脱に繋がる可能性がある
      • reCAPTCHA v3では閾値以下のスコアの場合は、スパム以外も一律ではじいてしまう　など

なお、プライバシーポリシーの記載は必須ではありません。希望がある場合のみ対応してください。

Google reCAPTCHAに案件を登録

使用するGoogleアカウント

Googleアナリティクスを登録しているGoogleアカウントと同一のものを使用して登録します。
※kintone＞お客様パスワードで確認できます。

reCAPTCHAにアクセス

https://www.google.com/recaptcha/about/

画面上部の「v3 Admin Console」をクリック

サイトを登録

新しいサイトの登録画面が開いた場合は、そのまま登録していきます。
同一アカウント内に登録済みのサイトがある場合は、分析画面になりますので、右上の「＋」アイコンから作成画面を開きます。

  1. ラベル
    導入するサイトのドメイン
  2. reCAPTCHAタイプ
    指定がなければスコアベース（v3）でOKです。
    (v2とv3の違いが気になる方はこちら)
  3. ドメイン
    導入するサイトのドメイン
  4. 利用規約同意のチェックを入れて送信
  5. 実装に使用する、サイトキーとシークレットキーが表示されます。
    後でコピペするので、この画面を開いた状態で、実装作業に移ります。

サイトに実装

WordPressの場合

Contact Form7を使用している場合

  1. 管理画面＞お問い合わせ＞インテグレーション
  2. 「reCAPTCHA」部分の「インテグレーションのセットアップ」をクリック
  3.  先ほどreCAPTCHA登録時に表示されていた「サイトキー」と「シークレットキー」を入力欄にコピペして「変更を保存」
  4. 「Controls for Contact Form7」のインストール
    • フォームからメール送信できない場合のみ。条件によってはこのプラグインを使用しなくても送信できるかもしれませんので、テスト送信してみてください。
    • インストール・有効化し、お問い合わせ＞コンタクトフォーム＞該当のフォームを「編集」＞「Customize」
    • 「Disable AJAX for this form」にチェックを入れて「保存」をクリック
  5.  reCAPCHAのロゴ（バッジ）の調整
    •  お問い合わせフォーム以外のページにもreCAPCHAのバッジが表示される場合は、CSSでバッジを非表示
    • コンタクトフォームの送信ボタン下部に以下を記載
    • 参考：https://developers.google.com/recaptcha/docs/faq?hl=ja
      「reCAPTCHA バッジを非表示にします。どうすればよいですか？」

参考：https://gmworx.ne.jp/archives/1284#title3-5

Contact Form7 以外の場合

  • お問い合わせフォームプラグイン自体にreCAPTCHAとの連携機能があれば、それを使用してください。
  • 連携機能がなければ、導入するためのプラグイン「Invisible reCaptcha for WordPress」を使用してください。
    ただし、このプラグインは数年前からアップデートされておらず、他に適当なプラグインもないため、使わずに済む場合は使わないでください。

Invisible reCaptcha for WordPressの使い方

  1. 管理画面＞プラグイン＞新規追加＞キーワードで「Invisible reCaptcha for WordPress」を検索
  2. インストールし、有効化
  3. サイドメニューの設定＞Invisible reCaptcha
  4. 設定タブ

    1.  サイト鍵
      先ほどreCAPTCHA登録時に表示されていた「サイトキー」をコピペします。
    2. 秘密鍵
      同様に、「シークレットキー」をコピペします。
    3. 言語
      自動検出
    4. バッジ位置
      サイト上のどこにreCAPTCHAのアイコンバッジを表示するか指定します。
      「インライン」にすると、次の項目でCSSを使って調整できます。
    5. バッジのカスタムCSS
      適宜調整してください。
      例）上下margin20px／左右中央配置する場合
  5. 変更を保存
  6. 左側メニュー内の「Wordpress」をクリック
    ここからログイン画面などにreCAPCHAを設定できますが、お問い合わせフォームにのみ実装する場合はチェック不要です。
  7. 左側メニュー内の「WooCommerce」～「BuddyPress」
    すべてチェック不要です。
  8. 左側メニュー内の「問い合わせフォーム」をクリック
    使用しているプラグインがあればチェックを入れてください。

参考サイト：【2023年最新】Invisible reCaptcha for WordPressの使い方・導入方法

WordPress以外の場合

お問い合わせフォームのテンプレートに必要なコードが入っています。
個別に必要な設定はJSの設置と、サイトキー・シークレットキーの入力です。
※テンプレートの場所：G:\共有ドライブ\素材\コーディングテンプレート\お問い合わせフォーム

  1. Java Scriptの追加とサイトキーの入力
    • テンプレートフォルダ内に『reCAPCHA用JS.txt』があります。reCAPCHAを実装したいページ（お問い合わせフォーム等）のフッター部分にコードをコピペしてください。
    • サイトキーの入力欄が2か所あります。先ほどreCAPTCHA登録時に表示されていた「サイトキー」をコピペしてください。
  2. シークレットキーの入力
    • mail.phpに、シークレットキーの入力欄がありますので、サイトキー同様、「シークレットキー」をコピペしてください。
  3. その他の注意点
    • formタグにはID「recaptcha_form」を付けてください（テンプレートには入っていますが、formタグを一から作成した場合は漏れないように注意）。
    • 同様に、確認画面への遷移ボタンにはID「submit-button」を付けてください。

reCAPCHAのアラート設定

不審なアクセスがあった場合に、指定のメールアドレスにアラートを送ることができます。
サポート宛て（support@hero-customer.com）に送信するように設定しておいてください。

サポートの方はアラートが届いたら適宜対応をお願いいたします。

  1. 設定画面を開く
    先ほどのサイトキー＆シークレットキー画面の下部に表示される「設定」ボタンをクリックするか、もしくは再度reCAPCHAにアクセス→右上の歯車マークから設定画面に遷移
  2. オーナー：サポートのメールアドレス（support@hero-customer.com）を登録
  3. 「アラートをオーナーに送信する」にチェックを入れる