WordpressサイトにGoogle reCAPTCHA（v3）を導入する方法
Google reCAPTCHA（v3）は（v2）と違い、ロボットではない事を示すチェックボックスやランダムな質問に対する画像選択などが出ません。
Contact Form7の5.1以降は、最新バージョンのGoogle reCAPTCHA（v3）を利用する仕様になっています。
Googleにサイトを登録し、サイトキーとシークレットキーをContact Form7に設定するだけで利用できるようになっています。
Google reCAPTCHAプラグイン
フォームの不正利用やスパム対策向けの認証システムとして、reCAPTCHA（リキャプチャ）と呼ばれるプラグインがあります。
reCAPTCHAはデータ送信者が人間かロボットかを判定し、ロボットによる自動送信をブロックする機能です。
Wordpressサイトのお問い合わせフォーム「Contact Form7」へのスパム対策として有名なプラグインですね。
元々はCAPTCHA（キャプチャ）と呼ばれる、ロボットかどうか判定する認証システムが元になっています。
GoogleのreCAPTHAを導入
今回はGoogleが開発した「Google reCAPTCHA」プラグインを導入してみます。
この「Google reCAPTCHA」は、現在バージョンv3までリリースされています。
導入が非常に簡単になった
前のバージョンであるreCAPTCHA（v2）を導入する場合、技術操作が必要でした。
クライアント側・サーバー側に設定が必要になり、それなりの難易度があります。
ところが最新バージョンのreCAPTCHA（v3）をContact Form7に導入する場合は、非常に簡単に導入できるようになっています。
reCAPTCHAはWordpressサイトにしか使えない訳ではありません。通常サイトでも導入は可能です。
reCAPTCHA（v2）
前バージョンとなるreCAPTCHA（v2）は、「私はロボットではありません」と表示されたチェックボックスで人間かロボットかを認証します。
チェックボックス・画像選択
クリックするだけで済む場合もあれば、画面が切り替わりランダムな質問に該当される画像を選ぶ場合もあります。
正しい画像を選択できるかどうかで、人間によるログインか否かを判別しているのです。
チェックボックス例
質問に対する画像選択例
出過ぎでユーザーにストレスを与える
仮に正しい画像を選択しても、続けて2個目の選択問題が表示される場合があります。
その場合は再度画像を選択し、表示されなくなるまで繰り返す必要があります。
正直ユーザーにとっては煩わしい作業ですよね。
セキュリティの面で自由に調節できない
この画像選択は本来、設定からある程度出る頻度を調整する事ができます。
しかし設定を一番最小にしていても、ちょっと挙動が不振だと毎回画像選択が出る様になります。
ログイン時に求められるreCAPTCHAは、画像選択はなくチェックのみで認証が完了する場合があります。
reCAPTCHA（v3）
2018年10月29日に、GoogleからreCAPTCHAの新バージョンreCAPTCHA（v3）が正式に公開されました。
reCAPTCHA（v3）では「わたしはロボットではありません。」のチェックや、質問にマッチする画像を選択する画面自体が無くなりました。
つまりチェックをつけたり画像を選ぶアクション自体の必要がなくなったのです。
訪問ユーザーに任意の行動をさせるストレスを与えず、自然なセキュリティ強化が実現できています。
実装の証であるバッジ表示
reCAPTCHA（v3）を実装すると、画面右下にあの青い矢印のreCAPTCHAバッジが表示される様になります。
ページ右下に表示されるバッジ
このバッジはずっと表示されているのではなく、ページ遷移時に一瞬映るような感じになっています。
場合によってはページ上部へ移動するPagetopボタン等と重なっている事もあります。
一見不安になる
このバッジが一瞬でも見えれば、reCAPTCHAの機能が働いている事を指していますが、バッジを非表示にしているサイトもあります。
正直reCAPTCHAの効果が働いている事が実感できないくらい、さりげない表示演出ではないでしょうか。
以前のreCAPTCHA（v2）の様にチェックや画像認証が出ないので、逆に本当に対策保護されているのか不安になる位ですよね。
しかし実際はきちんと対策反映・監視がされていますので安心してください。
バッジは全ページで表示される仕様
このreCAPTCHA（v3）を実装すると、全ページの右下にバッジが表示されるようになります。
Contact Form7プラグインを利用したお問い合わせフォームページだけではないのですね。
それはContact Form7のデフォルトの設定で、全ページにreCAPTCHAのJavaScriptを読み込む仕様になっているためです。
お問い合わせフォームページのみで読み込む設定については、本記事の最後に紹介しています。
reCAPTCHAのチェックボックスが表示されなくなった場合
それまで機能していたreCAPTCHAのチェックボックスが、途中から表示されなくなる場合があります。
これは、Contact Form7プラグインを更新した事が大体の理由です。
reCAPTCHA（v3）への仕様変更
2018年12月11日にContact Form7プラグインは、バージョン5.1を公開しています。
このバージョンアップに伴い、reCAPTCHA（v2）からreCAPTCHA（v3）を使用するように仕様変更がされたのです。
先程説明した通り、reCAPTCHA（v3）ではチェックボックスや画像選択が表示されなくなります。
突然reCAPTCHAのチェックボックスが表示されなくなったなら、Contact Form7のバージョンが上がった事が原因の可能性が高いです。
※Contact Form7のバージョンが上がれば、自然にreCAPTCHA（v3）を採用するためです。
reCAPTCHA（v3）を実装する方法
これからContact Form7などへのスパム対策をする場合、GoogleのreCAPTCHAを使うのなら（v3）を実装する事になります。
もちろんContact Form7のバージョンが5.1以降である事が条件ですので、バージョン確認をしておきましょう。
5.1以降であることを前提として、reCAPTCHA（v3）を実装する方法をご紹介します。
5.1以前のContact Form7ならreCAPTCHA（v2）でも良いのですが、実装する難易度が高くなるのでバージョンを上げた方が良いと思います。
reCAPTCHA（v3）プラグインのインストール
まずはGoogle reCAPTCHA（v3）プラグインをインストールし、有効化しておきましょう。
Googleの専用管理画面へログイン
まずはGoogleアカウントにログインします。
このログイン時のGoogleアカウントに、reCAPTCHA設定の紐づけがされますので確認しておきましょう。
Googleリキャプチャ（reCAPTCHA）の公式サイトにある管理画面に進みます。
サイトの登録
ラベル
まずは登録するreCAPTCHA設定のラベルを決めます。
登録するサイト名が良いと思います。
reCAPTCHAのタイプ
reCAPTCHAのタイプはv3を選択します。
ここでv2を選択した場合、チェックボックス入力をONにしたり非表示にしたりの選択設定ができます。
ドメイン
ドメイン名部分を入力します。
利用条件に同意
reCAPTCHA利用条件に同意するにチェックをつけます。
最後に「送信」を押すと、サイトが登録されます。
サイトキー・シークレットキーの表示
次の画面でサイトキー、シークレットキーの2つが表示されます。
この2つのキーをWordpressの管理画面に貼り付ける訳です。この画面はいつでも確認できます。
Contact Form7側の設定
ではWordpress管理画面に切り替えます。
WordPressダッシュボードのお問い合わせから「インテグレーション」へ進みます。
reCAPTCHA欄を探して「セットアップ」をクリックします。
サイトキー、シークレットキーの入力
次の画面で、先程のGoogle側の管理画面に表示されていたサイトキーとシークレットキーをコピペして保存しましょう。
これでGoogleのreCAPTCHA（v3）が読み込まれ、右下にバッジが表示されるようになります。
作業はこれで完了です、簡単ですよね。
Contact Form7で作られたフォームなら、これだけでReCAPTCHAが利用できる訳です。
Contact Form7ページでのみ読み込ませたい
Google reCAPTCHAを読み込むと、GoogleのPageSpeed Insights上のスコア（ページ読み込み速度数値）が下がるという噂があります。
実際に私が試してみた時点ではそんな事はありませんでした。
気になる方は、Contact Form7フォームを実装しているページでのみ、reCAPTCHA（v3）を読み込む様にできます。
reCAPTCHA（v3）実行をContact Form7実装ページのみに限定
functions.php等に以下のコードを追記してみてください。
functions.php記述
<?php add_action( 'wp_enqueue_scripts', function (){ global $post; $valid_recaptcha = false; $content = get_post()->post_content; if($content != null){ //Contact Form7のショートコードが存在する場合 if(has_shortcode($content, 'contact-form-7')) { $valid_recaptcha = true; } } //ショートコードが存在しないならキャンセル if($valid_recaptcha == false){ wp_deregister_script( 'google-recaptcha' ); } }, 100);
これでContact Form7フォームがあるページだけ、reCAPTCHAが読み込まれるようになります。
