ホーム » WordPressのお問い合わせフォームにreCAPTCHAv3を導入してみた

WordPressのお問い合わせフォームにreCAPTCHAv3を導入してみた

by MOMO

2007年にカーネギーメロン大学ピッツバーグ本校で開発されたのが始まりです。その2年後にはGoogleがこのテクノロジーを買い取りました。
元々は図書をOCR(画像文字認識)。電子データ化するときに自動で読み取れなかったものを人が認識し直すことで精度を上げる仕組でした。それを今のボットによるスパム排除の仕組みに進化させたんですね。

そもそも、人間?マシン? これを判別するタスクのことをCAPTCHA認証といいます。これは、インターネットにアクセスしているのがコンピュータの自動接続ではなく、本当に人なのかを調べるための仕組み。もう既に皆さんもいろいろなところで体験済みでしょう。

reCAPTCHAv1からv2へ、そしてv3へ

上の画像で解るように人が入力する手数がどんどん減ってきました。
この技術に生かされたのは、これまでに収集し蓄積された膨大なGoogleのデータといわれてます。すごいですよね。

2018年10月にいよいよreCAPTCHAの最新版reCAPTCHA v3が正式に公開されましたね。それまでのv2のような「わたしはロボットではありません」と人であることを確認させられるボックスさえ無くなりました。よって、お問い合わせの投稿フォームもサイトを訪問して利用する人がこのキャプチャ機能を意識することなく使ってもらえます。でも、その裏でしっかりセキュリティー強化に役立っているんですね。

WordPressでも実装しましょう

DrupalではWebformを使用するときにキャプチャ機能を設定しないと警告が表示される仕組みです。なので、毎回必ず設定するのが当たり前になってました。今回はWordPressでも設定したいと思います。
利用している問い合わせformは『Contact Form 7』で作成しましたけど『Wpforms』でも同じように設定可能で実際に稼働を検証済みです。
やっぱり絶対必要な機能だと思いますよ。なので、しっかりと画像を使ってご紹介しましょうね(自分への備忘録でもありますけど)これをしないといかに不要なスパムが届くか…経験済みなので面倒だけどやっておきます。

まずはGoogleさんでreCAPTCHAv3の利用手続きをします

現在、申請できるのは

  • reCAPTCHA v2
  • reCAPTCHA v3
  • reCAPTCHA Enterprise(有料)

この3つですね。はっきり言って有料版はショッピングカートでも設置しない限りは必要なさそう。そうね…ユーザビリティーを考えたらもう無償版のv2よりv3で決まりでしょう。
そもそも、このサイトは画像はWebPだしCSSやJavaScriptの統合などで表示スピードを向上させる努力をしていました。それは訪問者に快適な環境で呼んで欲しいと思ってのこと。お問い合わせformも快適にご利用いただきたいですからね。

GoogleのアカウントでreCAPTCHAサイトにアクセス

Google reCAPTCHA

reCAPTCHAのサイトから『v3 Admin Console』に移動します。
*ちなみにGoogleアカウントにログインしていない場合はログイン画面になります。ログインして続行しましょう。

いよいよreCAPTCHA v3を申請しましょう

新規に追加するときは右上の『』から作れます。

  1. ラベルは本人が確認できるものを任意で付ければOK。
  2. reCAPTCHA v3 を選択。
  3. 自分のサイトのドメインを書き加えます。
  4. オーナーはGoogleアカウントのメルアドが記載されています。
  5. reCAPTCHA利用条件に同意する。チェック
  6. アラートをオーナーに送信する。チェック済みのままでOK。

これでサイトキーとシークレットキーが発行されました。

ここまでいったら、次はWordPressの『Contact Form 7』側の設定になります。

WordPressのplug-in Contact Form 7 でインテーグレーションの設定を

インテグレーションの最後尾にあるreCAPTCHAの項目を見つけましょう。

インテグレーションのセットアップ』をポチッとします。

先ほどGoogleのreCAPTCHAで発行されたサイトキーとシークレットキーを書き加えます(コピペがベストね)
変更を保存

枠がスカイブルーに変わってこれでOK!
そのほか、PHPでの送信ではなく『WP Mail SMTP』というplug-inでGoogleのメールサーバからSMTPでメールを送信できるように設定しています。
このplug-inのせいでは無いと思いますが、reCAPTCHA設置後のテスト投稿はWordPressをログアウトして一般ユーザーの状態でテストしないと弾かれます。そこはご注意ください。

設定後の左下のreCAPTCHA画像が、Back to Topのアイコンと重なるので消します

邪魔と言っちゃうとGoogleさんに申し訳ないけど、下にスクロールすると『Back to Top』のアイコンと重なっちゃう…
まずは、これについては利用させてもらうGoogleさんの利用規約を確認してからです。

Google reCAPTCHAサポートページ

このサポートページに

I’d 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:

Google機械翻訳すると

reCAPTCHAバッジを非表示にします。何が許可されていますか?
ユーザーフローにreCAPTCHAブランドを視覚的に含める限り、バッジを非表示にすることができます。次のテキストを含めてください。

となってます。次のテキストとはこのHTMLのコード。

				
					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.
				
			

これも日本語にして、

				
					このサイトはreCAPTCHAとGoogleによって保護されています。
<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と
<a href="https://policies.google.com/terms"> 利用規約</a>が適用されます。
				
			

キャプチャバッジを消すのはCSSでやります

このサポートにはCSSでバッジと呼ばれるアイコンを消す方法も書かれていましたね。
本当に本当に丁寧なGoogleさん。

				
					.grecaptcha-badge { visibility: hidden; }
				
			

これをテーマのカスタムCSSに書き加えてあげればOKでした。

なおこれはformに記載しようかどうか迷ったけど、『Contact Form 7』で、いろいろな場面で活躍してもらうことになるのでフッターに書き加えておきました。
これで、利用するユーザーさんに意識させないで利用してもらえるんじゃないかしら?

百聞のお問い合わせのformはフッターにリンクさせました。

お問い合わせ

You may also like