WordPressでお問い合わせ画面をContact Form 7で作成したら、スパムがいっぱい飛んでくるのでGoogle謹製reCAPTHAを導入してみた。
reCAPTHAとは
reCAPTHAとはGoogle謹製の無料サービスで、人間とボット（bot）の動きを見分ける動作をするものです。
スパムについてはbotが自動であらゆるサイトを巡回し、フィッシングやメッセージなどを大量に送りつけているのが現状でサイト運営者には悩みのタネの一つです。
無料ではありますが他のGoogleサービスのように上限がありますので注意しましょう。
1秒間に1000回以上、または月に1000000回以上の通話を行う場合は、reCAPTCHA Enterpriseを使用するか、このフォームに必要事項を記入し、例外承認を待つ必要があります。
https://developers.google.com/recaptcha/docs/faq?hl=en#are-there-any-qps-or-daily-limits-on-my-use-of-recaptcha
前提条件
・独自ドメインを取得して運用している
・WordPressでContact Form 7を利用している
・Googleアカウントを持っている
流れ
1. reCAPTCHAでキーを取得
2. Contact Form 7へ設定する ←これすごく簡単
3. ちょっとカスタマイズ
reCAPTCHAでキーを取得
まず最初にreCAPTCHAのサイトで「サイトキー」と「シークレットキー」を取得します。Chrome等でGoogleアカウントにログインした状態で下記サイトへアクセスします。
https://www.google.com/recaptcha/about/
上記サイトにアクセスして上部にある「Admin Console」をクリックします。日本語変換を利用している場合は「管理コンソール」と表示されているはずです。
Googleアカウントにログインしていなかった場合クリック後にログイン画面へ切り替わります。
「新しいサイトを登録する」という画面が表示されるので必要な事項を入力していきます。
ラベル
ドメイン名でも良いですが今後このラベルが管理ページに表示されるので、例としては「example.com」であれば「example」などで良いでしょう。
reCAPTCHAタイプ
reCAPTCHAタイプは現在2種類が選択できますが、「reCAPTCHA v3」を選択します。
ドメイン
ドメインには自分のドメインを入力します。
reCAPTCHA利用条件に同意する
利用規約を熟読のうえチェックする。
すべて入力が終わったら「送信」をクリックすると「サイトキー」が表示されます。
この「サイトキー」と「シークレットキー」をメモ帳などでコピペしておいて下さい。似通った文字列に見える場合もあるので間違わずにコピーしましょう。
コピー作業が終わったら下部にある「設定に移動」をクリックします。
入力した情報がすべて入っていることを確認します。作成画面とは異なる項目が増えているのにお気づきでしょうか。
reCAPTCHAのキー
この箇所を展開（クリック）するとサイトキーとシークレットキーが見れます。
このキーがAMPページで動作するようにする
AMPの運用をされている方はこちらをチェックします。
設定に問題や変更がなければ「保存」をクリックします。
保存されたらAdmin Consoleに戻ってきます。作成したての場合はまだトラフィックがないため何も表示されません。ここではトラフィックに応じデータが観測できます。
リクエスト数
reCAPTCHA がサイトから受け取ったリクエストの数が表示されます。
スコア分布
サイトのスコア分布が表示されます。スコアの範囲は 0.0（不正なトラフィック）～1.0（安全なトラフィック）です。
上位 10 件のアクション
サイトでの上位 10 件のアクション（すべてのトラフィックが対象）を示しています。
不審なトラフィックのアクション（上位 10 件）
サイトの上位 10 件のアクションが（不審なトラフィックの割合が多い順に）表示されます。
reCAPTCHAでの作業は終わりです。ログアウトして次に移ります。
Contact Form 7へ設定する
管理画面へログインしてContact Form 7の設定タブを開いて「インテグレーション」をクリックします。次いで下段のreCAPTCHA「インテグレーションのセットアップ」をクリックします。
先程コピーした「サイトキー」と「シークレットキー」を貼り付けます。くれぐれも逆に入れたりしないように。
入力出来たら「変更を保存」をクリックします。
設定の変更が正しく行われれば下記の画像のように「reCAPTCHAはこのサイト上で有効化されています」と表示が出ます。
以上でContact Form 7での設定は終わりです。
ちょっとカスタマイズ
今回導入のreCAPTCHAはサイト全体へバッジが表示されます。安心感もありますが表示される場所が問題となる場合があります。
トップへ戻るボタンとかぶってしまうんですね。これを非表示にします。
I’d like to hide the reCAPTCHA badge. What is allowed?
https://developers.google.com/recaptcha/docs/faq?hl=en#id-like-to-hide-the-recaptcha-badge.-what-is-allowed
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.
サポートにも非表示する場合の説明もきちんとあります。それではやり方を見ていきましょう。
設置に必要な手順
1. お問い合わせ固定ページに指示されているテキストを埋め込む
2. バッジをCSSで非表示する
お問い合わせ固定ページに指示されているテキストを埋め込む
お問い合わせ固定ページ内のContact Form 7直下で問題はないです。Gutenbergを利用している場合はブロックは「カスタムHTML」を選択してそこにコピペします。
<p>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.</p>日本語で表示したい場合は下記のような感じで良いのではないでしょうか。
<p>このサイトはreCAPTCHAによって保護されており、Googleの
<a href="https://policies.google.com/privacy">プライバシーポリシー</a> と
<a href="https://policies.google.com/terms">利用規約</a> が適用されます。</p>
サイトでは下記のように表示されます。
バッジをCSSで非表示する
非表示方法も前述のサポートサイトに記載があります。下記の記述をCSSへ書き込むだけです。
.grecaptcha-badge { visibility: hidden; }
外観 ＞ カスタマイズ ＞ 追加CSS の箇所です。下記のように記述して下さい。
記述が終わったら右上の「公開」ボタンで反映されます。
以上がちょっとカスタマイズです。
まとめ
これでかなりの数のスパムが弾かれるはずです。reCAPTCHAも進化し続けていますし、今後も精度が向上していくと考えられますのでスパム対策としては有用なものになると思います。
