持続化給付金申請方法を丁寧に解説

Google reCAPTCHA v3の導入とContact Form7への設定方法 完全ガイド 2020年版

WordPress超入門 Google recapture 設定方法

WordPressレベル度:(初心者:0 上級者:5)

2020年に入りブログをさらにカスタマイズして、「見やすく・読みやすく・美しく・分かりやすく」を心がけています。どうもNORI(@norilog4)です。

今日はセキュリティー対策やスパム防止の対応策としてGoogle reCAPTCHA(リキャプチャ) v3の設定方法やWordPressとの組み合わせでの使い方を解説していきます。

NORI

ちゃんと設定すればセキュリティ強化につながるよ!

Google reCAPTCHA(リキャプチャ)とは

reCAPTCHA種類

いろいろなホームページを見ていると、サイトのお問い合わせフォームやログインフォームで、「●●の画像を選択してください。」と指定された画像を選択したり、「わたしはロボットではありません。」といったボックスにチェックを入れた経験ありませんか?

それが「reCAPTCHA」と呼ばれる仕組みです。

reCAPTCHAの具体的な機能

reCAPTCHAは、Webフォーム・ログインフォームなどに登録する際、不正アクセスをするような悪質なbot等からWebサイトを守るための機能となります。

最新版のreCAPTCHA v3とは

reCAPTCHA v3」の機能については、以下のYouTube動画で説明されています。特にWordPressはセキュリティーが甘いとサイトを乗っ取られたり、スパムメールを送られたり、改ざんされやすいので注意が必要です。

2018年10月29日に、GoogleからreCAPTCHAの新バージョンreCAPTCHA v3が正式に公開されています。

このreCAPTCHA v3の最大の特徴は、「●●の画像を選択してください。」と指定された画像を選択したり、「わたしはロボットではありません。」といったボックスにチェックを入れたりすることが完全に無くなり、サイトを訪問した人がなにかアクションを起こす必要もなく、もっと自然にセキュリティーを強化できることです。

reCAPTCHA v3はGoogleのAIがユーザーのページ内での行動をスコアとして算出することで、そのスコアを元にbotか人間かを判別します。さらに、reCAPTCHA v3を配置したページでのユーザーの動きを学習し、利用が増えるとともに行動スコアの精度が高まっていくこともv3の特徴です。

reCAPTCHAの管理画面

reCAPTCHA を設置することで管理画面上では以下のように不審なトラフィックや、リスクが高いアクセスがどのくらいあるのかチェックすることができるのが特徴です。

reCAPTCHA 管理画面

リスクのあるリクエストが確認可能

reCAPTCHA 管理画面

不審なトラフィックがあるか確認可能

reCAPTCHA 導入のメリット・デメリット

reCAPTCHA 導入の最大のメリットは、botによる攻撃を防げること(スパム対策になること・セキュリティー強化につながること)です。また設置する reCAPTCHAのバージョンによってはデメリットも出てきます。

メリット
  • botによる攻撃を防ぐ
  • スパムメール対策
  • 簡単に導入可能(v3)
デメリット
  • 確認を求める(v1・v2)
  • 設定が面倒(v1・v2)
  • ユーザビリティを損なう

会社のホームページなどをWordPressで作ってお問い合わせフォームを作っていた場合、お問い合わせのメールボックスがbotによる問い合わせで埋まってしまい、本当に確認すべきメールを探すのに手間取ってしまいます。こういう経験ありませんか?

お問い合わせフォームへ英文メールがよく届き、本当に重要なお問い合わせメールがわからなくなってしまって…

お客様担当者

NORI

こんなときでもreCAPTCHAを設置すれば大丈夫!

Google reCAPTCHA の種類

2020年3月現在、 reCAPTCHAには3種類のバージョンがあります。その中でも最新版は v3 になります。

reCAPTCHA v3

2018年10月29日に公開された reCAPTCHA v3は、最新版のreCAPTCHAです。reCAPTCHA v3は、ユーザーが人間かBot(ボット)かどうかを判断するために、ユーザーに何らかのアクションを求めることがなくなります。ホームページを訪れたユーザーに煩わしい画像認証や、チェックボックスへのチェックなどは一切必要が無くなります。

reCAPTCHA v3は、ユーザービリティを一切損なうことなく、botを検知することができるのでおすすめです。特別な理由がない限り、これからreCAPTCHA導入を考えている方は、reCAPTCHA v3の導入をおすすめします。

reCAPTCHA v2

reCAPTCHA v2の仕組み

reCAPTCHA v2は、「私はロボットではありません」と記載されたチェックボックスです。いまでも多くのサイトで見かけることが多いreCAPTCHAのひとつです。

reCAPTCHA v2の挙動は、チェックボックスにチェックを入れたのち、2つのパターンに分岐します。1つ目が、そのまま人間と判断されるパターンです。もう1つが、人間かどうかの試験を課されるパターンです。

怪しい動きがあった場合には、質問で指定された画像を選択する必要があります。質問が難しく画像を選ぶまでに時間がかかってしまい、ユーザビリティを損なうため、ここで離脱してしまう可能性も少なくありません。

reCAPTCHA v1

reCAPTCHA v1の仕組み

出典:Google reCAPTCHA Help

reCAPTCHA v1は、2018年 3月に提供が終了している為、現在は利用できません。2018年に終了したため、いまでは見かけることはなくなりましたが、上の画像のように歪んだ英数字をユーザーに提示し、入力させるものです。

一昔前までは、「botが歪んだ文字を認識するのは難しいだろう」と言われていましたが、最近はAIなどを使った画像認識精度もあがってきた為に、reCAPTCHA v1は破られるようになりました。

最新版 Google reCAPTCHA v3の導入方法

Googleのアカウントがあれば誰でも利用が可能なサービスです。お手持ちの「Googleのアカウント」を使ってログインしましょう

Google reCAPTCHA v3 導入方法

Google reCAPTCHA v3

ログイン後 reCAPTCHA v3 を新規作成

Google reCAPTCHA v3 新規追加

+をクリックして新しいサイトを登録

reCAPTCHAにGoogleアカウントログイン後、新規追加ボタン「」をクリックすると、新しいサイトを登録するという以下の画面がでてくるので、以下の内容を入力します。

reCAPTCHA v3 設定項目

ラベル(自分のブログ名など分かりやすい名前を入力)
reCAPTCHA タイプ(reCAPTCHA v3を選択)
ドメイン(設定したいブログのドメインを入力)
オーナー(ログインしたGoogleのメールアドレスが表示される)
reCAPTCHA 利用条件に同意する(チェックを入れる)
アラートをオーナーに送信する(チェックを入れる)

reCAPTCHA v3 設定項目の参考

Google reCAPTCHA v3 サイトの設定

この画像を参考に各項目を設定

reCAPTCHA v3のサイトキー&シークレット キー

送信ボタンを押すと、以下の画面のように reCAPTCHA v3 をWordPress(ワードプレス)へ設定するのに必要なキーが表示されます。このキーを使ってプラグインへの実装 & セキュリティー強化を行います。

Google reCAPTCHA v3 追加

プラグインの設定に必要なキー

NORI

reCAPTCHA v3は一旦ここで終了!次はContact Form 7の設定です

Contact Form 7の設定

WordPress上で、お問い合わせフォーム設置に必須プラグインである Contact Form 7(コンタクトフォーム セブン)へ、reCAPTCHA v3の管理画面で生成されたサイトキー&シークレット キーを入力します。インストールしていない方は、Contact Form 7のプラグインをインストールしましょう。

Contact Form 7
Contact Form 7
Developer: Takayuki Miyoshi
Price: Free

プラグインのインストール方法

WordPress(ワードプレス)の初心者でもわかるプラグインのインストール方法はこちらをチェック。

Contact Form 7 インテグレーションへの設定

Contact Form 7のプラグインをインストールし有効後に、ダッシュボード内に表示されている「お問い合わせインテグレーション」をクリックし、さきほど取得したreCAPTCHA のサイトキー&シークレット キーを入力します。

Contact Form 7 インテグレーションへの設定 Google reCAPTCHA v3

Contact Form 7 のインテグレーションへ設定

これでお問い合わせフォームからのスパムメッセージなどを排除することができます。

Google reCAPTCHA v3の応用設定

このまま設置すると、サイトの右下にreCAPTCHAのロゴ(Badge : バッジ)が表示されます。PC表示などで「TOPへ戻る」ボタンを表示している場合、表示位置が完全にかぶってしまい邪魔になってしまいます。

プラグインなどを入れて消す方法や function.php にコードを追加してこのロゴを消す方法もあるのですが、今回紹介するのはreCAPTCHA v3のバッジをGoogle公認の方法で非表示にする方法です。

Google reCAPTCHA v3 ロゴ アイコン表示設定

Google公認 reCAPTCHA v3のロゴを消す方法

英語での案内なのでどうしても見落としがちですが、reCAPTCHA の サポートページのよくある質問にGoogle公認の非表示設定方法が案内されています。非表示するには、サイト内にGoogleから指定された文言を記述することと、CSSへのソースコードの追記が必要となります。

reCAPTCHA サポート – よくある質問

reCAPTCHA のブランドを視覚的にサイト内へ表示

お問い合わせフォームやフッター等に以下の情報(ソースコード)をサイト中に表示することで、reCAPTCHA v3のロゴ(バッジ)を非表示にすることが可能となります。

reCAPTCHAバッジをCSS追記で非表示にする

reCAPTCHAバッジを非表示にするには、CSSへ以下のコードを追記します。

このサイトでの設定参考例

このサイトのお問い合わせフォームで以下のように表示することで、reCAPTCHA v3のロゴ(バッジ)を非表示にしています。デザイン面も意識して保護されているイメージで、Fontawsomeを利用して鍵アイコンを文章の先頭に表示させています。

reCAPTCHA 設定参考例

Google reCAPTCHA v3の導入方法・応用設定のまとめ

本記事は、Google reCAPTCHA v3の導入とContact Form7への設定方法 完全ガイドについての解説記事です。

Googleで案内されている方法などを守ればフッター下に表示されるreCAPTCHA v3のロゴを非表示にでき、サイトのセキュリティーを強化することができます。

ブログを書くことを優先してセキュリティー対策を甘く見ていると、あなたのWordPressサイトがハッキング(乗っ取り)されたり、スパムの踏み台などにされてしまう危険性もあることに注意してください。

せっかく一生懸命作ったブログが改ざんされてしまう前にこの解説記事を見て対応してしまいましょう!

以上、NORI(@norilog4)でした。

WordPressの使い方を解説

WordPress 初心者向けの解説記事はこちら
WordPress超入門 AddQuicktagの使い方WordPressの記事装飾をワンクリックで加速させるAddQuicktag 使い方と設定方法 WordPress超入門 Google recapture 設定方法Google reCAPTCHA v3の導入とContact Form7への設定方法 完全ガイド 2020年版

コメントを閉じる

コメントを残す