インターネットを閲覧していると、「私はロボットではありません」というチェックボックスにチェックをことは入れたことはありませんか。あれは、ユーザーが人間であり悪質なアクセスを試みるロボットではないことを証明するためのセキュリティ対策になります。

数あるセキュリティ対策のプラグインの中でも、ログイン時に画像に表示されている文字を入力することで、人間であることを証明する機能はよく見かけますが、善良なユーザーにとっては毎回文字を入力するのも億劫ですよね。

このようなセキュリティシステムは「Google reCAPTCHA」という機能によって実装されます。チェックボックスにチェックを入れるのみで、ロボット判定をクリアできるセキュリティは、ユーザーの負担を軽減できているので、セキュリティ機能を高めつつ、ユーザビリティも向上させてくれます。

さらに、2019年現在の最新版の「Google reCAPTCHA」のバージョン3(V3)には、AIによる判断機能が実装されており、ユーザーがチェックボックスにチェックを入れる必要すらなくなりました。というわけで今回はユーザーにとって煩わしかったテストをしなくてもロボット判定をしてくれる機能を実装できるプラグイン「Advanced noCaptcha & invisible Captcha」をご紹介いたします。

「Advanced noCaptcha & invisible Captcha」とは

Googleアカウントが必要ですが、ログイン時などにロボットかどうかを判定できる「Google reCAPTCHA」というシステムを実装できるプラグインです。悪質なアクセスを防ぎ不正なログインからあなたのサイトを守ってくれます。冒頭でも述べた通り、以前のバージョンでは、善良なユーザーでも分かりにくい文字を入力したり、画像を選択する一手間が必要でしたが、最新版のV3なら普段通りのログインと同時にセキュリティチェックが行われているのでスムーズにログイン可能です。

「Advanced noCaptcha & invisible Captcha」の実装方法

プラグイン実装までの手順は以下の3ステップです。

  1. プラグインのインストール
  2. 「Google reCAPTCHA」のキーを取得
  3. プラグインの詳細設定

「Advanced noCaptcha & invisible Captcha」のインストール

管理画面から「Advanced noCaptcha & invisible Captcha」を検索してインストールするか、下記のボタンからもダウンロード可能です。wp-content/pluginsディレクトリにインストールした後、管理画面から有効化してください。

Advanced noCaptcha & invisible Captcha

「Google reCAPTCHA」のキーを取得します

下記箇所からプラグインの設定画面を開きます。

こちらの画面でreCAPTCHAのバージョンを最新のV3に設定します。

こちらで選んだバージョンと、この後キーの取得画面にて選択するバージョンは必ず同一のものにしてください。どちらかで違うバージョンを選択しているとエラーが発生し、管理画面内に入れなくなる可能性があります。私はここを何度も見落として管理画面から締め出されました。

次に上部のGoogleへのリンクをクリックし、「Google reCAPTCHA」のキーを取得する画面を表示します。こちらの画面では、下記に注意してそれぞれの必要項目を入力していきます。

  • ラベル:サイトやブログの名称を入力
  • reCAPTCHAタイプ:当記事ではV3を選択(プラグイン側の設定でV3を選択済みのため)
  • reCAPTCHAのキー:設定画面に貼り付けるためコピーする
  • ドメインを入力(https://は含まない)
  • サイトオーナーのメールアドレスを入力
  • 「reCAPTCHA ソリューションの入手元を検証する」にチェックを入れる
  • 「アラートをオーナーに送信する」にチェックを入れる

入力が終わったら、保存を押してキーをコピーし、プラグインの設定画面にてそれぞれをペーストします。ここで互い違いになったりするとエラーが出るので、しっかりと確認しましょう。

次にプラグインの詳細設定を行います

設定画面下部のEnabled Formsの設定画面ではreCAPTCHAをWordPress内に設置できる箇所を次の中から選択できます。

  • ログインフォーム
  • 登録フォーム
  • マルチサイトのログインフォーム
  • パスワードを忘れた時のフォーム
  • パスワードをリセットするときのフォーム
  • コメント投稿時のフォーム
  • bbPress(掲示板を作成するプラグイン)にて新しいトピックを作成する時のフォーム
  • bbPressで返信を書く際のフォーム
  • BuddyPress(コミュニティサイトを作成するプラグイン)の登録時のフォーム
  • WooCommerce(ECショップのプラグイン)

WordPressだけでなく、いくつかの有名プラグインにも対応しているので実用的ですね。

ログインフォームにV2のチェックボックスを表示した例

パスワードを忘れた時のフォームにV2のチェックボックスを表示した例

なお、バージョン3(V3)を適用している場合は、後述する通り右下にGoogle reCAPTCHAのマークが表示されるだけでログイン時などの操作自体にはなんら変化はありません。

その他の設定

Other Settingsでは、文字通りその他の設定を行います。バージョンによって項目が変わりますが、今回は先ほど設定したV3の場合です。基本的にデフォルトのままで設定を変更する必要はありません。

以上のすべての設定が終われば、サイト右下に下記のようなマークが表示され、バックグラウンドで機能してくれます。

右下の「Google reCAPTCHA」マークを非表示にしたい

ただ、上記の表示例でもサイトのデザインと被ってしまい不恰好ですよね。前項までで全ての設定が完了すれば、バックグラウンドで無事に機能はしますが、右下のマークはデフォルトの設定では、非表示にできません。さまざまなサイトでマークが表示されたままになっている状態を目にしますが、「トップへ戻るボタン」などとポジションがバッティングしがちです。

グーグル公式のよくある質問によると、マークを非表示にしたい場合は、ユーザーに目に見える形で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:
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.


Google reCAPTCHA Frequently asked questions

「Google reCAPTCHA」マークを非表示にする具体的な手順

まずは、任意の箇所に上記で指定された文言を貼り付けます。弊社の検証サイトでは、フッター部分のコピーライト箇所に貼り付けました。

次に、 公式サイトでも紹介されている以下のコードをCSSに追記します(TCDテーマであればカスタムCSSへ追記)。

.grecaptcha-badge { visibility: hidden; }

これで非表示が反映され、トップへ戻るアローボタンとも干渉しませんね。

不審なトラフィックを監視する

Google reCAPTCHAのサイトでは、下記のようにトラフィックのデータを蓄積し、不審なトラフィックのアクションなども確認できるようになります。この例ではプラグインを実装したばかりですのでデータはありませんが、長期的に運用することで不審なトラフィックを定期的に監視できるようになります。

まとめ

サイト運営には欠かせないセキュリティ対策ですが、セキュリティの種類によっては、ユーザー側にも負担がかかります。ログイン時になどに煩わしい手間がかかるとアクセス数が伸び悩むかもしれません。いかにもセキュリティ対策してますというマークが表示されるのもデザインによっては邪魔になりますしね。当記事を参考にGoogle reCAPTCHA V3を設定し、規約にのっとって非表示にすれば、見た目やログイン時の手間は通常のサイトと変わらずにセキュリティレベルを上げることができます。ぜひお試しください。

初めてWordPressを使う方でも使いやすい、ログイン周りの幅広いセキュリティを実装できるプラグインについては、下記をご覧ください。