reCAPTCHA v3をプラグイン「Invisible reCAPTCHA」を使って導入する

こんにちは、なおです!

今回は、WordPressのお問い合わせメールフォームや投稿のコメントフォームへ、ロボットによる迷惑なアクセス、スパム行為を防ぐために、GoogleのreCAPTCHA(リキャプチャ)というサービスを導入しました。
こちらは無料で利用できます。

reCAPTCHAの登録方法と、WordPressのプラグイン「Invisible reCaptcha for WordPress」を使って簡単に設定する方法をご紹介します。

目次

reCAPTCHA(リキャプチャ)とは

reCAPTCHA(リキャプチャ)は、スパム行為や不正行為からウェブサイトを保護してくれる、Googleが提供している無料のサービスです。

引用

「CAPTCHA」は「コンピュータと人間を区別するための完全自動化された公開チューリング テスト(Completely Automated Public Turing test to tell Computers and Humans Apart)」の頭字語です。人間は CAPTCHA を簡単に解くことができますが、「bot」やその他の悪意のあるソフトウェアにとっては CAPTCHA を理解することは困難です。reCAPTCHA は Google が提供している無料のサービスで、ウェブサイトをスパム行為や不正行為から保護します。

引用元: reCAPTCHA に関するよくある質問
https://support.google.com/websearch/thread/2145243?hl=ja

現在reCAPTCHAには、第2世代の「v2」と第3世代の「v3」があります。

v2では、「私はロボットではありません」のいう表示にチェックを入れたり、画像から車などをチェックするといった作業が必要でした。

v3では、アクセスに対する人間らしさのスコア値で判定して、自動的に人間かロボットかを判定してくれるようになりました。
これによりユーザーがなにか作業をすることがなくなりました。

当ブログ「Korena Sorena(コレナ ソレナ)」はまだ始めたばかりのブログなので、まだロボットによる迷惑なアクセスはありませんが、安心して運営できるように今のうちに導入することにしました。

また、今回はお越しいただいた方に面倒な作業をしてもらう必要がないよう「reCAPTCHA v3」を導入することにしました。

WordPressプラグイン「Invisible reCaptcha for WordPress」

WordPressのプラグイン「Invisible reCaptcha for WordPress」は、WordPressでreCAPTCHA v3を使うためにとても便利なプラグインです。

WordPressでreCAPTCHA v3を利用するための設定が簡単にでき、投稿のコメントフォームの保護だけでなく、WordPressのログイン、登録、パスワード再発行の各フォームの保護も設定できます。

また当ブログでは、お問い合わせのメールフォームに「Contact Form7」というプラグインを使用しています。

「Invisible reCaptcha for WordPress」はこのContact Form7にも対応しており、簡単に保護の設定を行うことができます。

reCAPTCHAの登録

それではまず、GoogleのreCAPTCHAへ登録します。

今回の登録はPCから行っている画面です。
あらかじめご了承ください。

必要なもの

Googleのアカウント
reCAPTCHAはGoogleのサービスですので、登録にはGoogleのアカウントが必要になります。
あらかじめご用意ください。

もし、まだGoogleのアカウントをお持ちでない場合には、下記のリンクから作成できます。
Googleアカウントの作成はこちらから (外部リンク)

GoogleのreCAPTCHAの登録

reCAPTCHA v3を利用するためには、ウェブサイトを登録してSite Key(サイトキー)Secret Key(シークレットキー)を取得する必要があります。

Googleにログインした状態で、reCAPTCHAのページへアクセスします。

右上にある「Admin Console」ボタンをクリックして登録画面を表示します。

Google reCAPTCHAトップページ

登録画面では、サイトなどの情報を入力していきます。

Google reCAPTCHA 登録画面

ラベル
自分で管理するための名前です。
サイト名などわかりやすいものを入力します。

reCAPTCHAタイプ
「reCAPTCHA v3」と「reCAPTCHA v2」が選択できます。
今回、私は「reCAPTCHA v3」を選択しました。

ドメイン
使用するドメインを登録します。

wwwなどは付けずにドメインだけを入力します。(例:korenasorena.com)
入力したら「+」ボタンをクリックして登録します。

複数のドメインを登録することができます。

また、ドメインを登録すると、そのサブドメインでも利用することができるようになります。
(例:korenasorena.comを登録すると、subdomain.korenasorena.comなども利用することができるようになります)

オーナー
既に自分のGmailが入っています。

reCAPTCHAの利用条件に同意する
規約を確認してチェックを入れます。

アラートをオーナーに送信する
サイトで問題が検出されたときなどにアラートを受け取れます。
最初からチェックが入っています。そのままにしました。

すべて選択、入力ができたら「送信」をクリックして登録完了です。

すぐに登録が完了し、Site Key(サイトキー)Secret Key(シークレットキー)が表示されます。

Google reCAPTCHA サイトキーとシークレットキー

この2つのキーはこの後プラグイン「Invisible reCaptcha for WordPress」の設定で使用しますので、コピーやメモしておくか、このままブラウザを開いておきます

Site Key(サイトキー)とSecret Key(シークレットキー) は大切なものですので、取り扱いには注意しましょう。

以上が、reCAPTCHAの登録です。
2つのキーを控え終わったらこの画面での作業は終了です。

WordPressに設定する

reCAPTCHAの登録が完了したら、次にプラグイン「Invisible reCaptcha for WordPress」を使って、WordPressに設定していきます。

プラグイン「Invisible reCaptcha for WordPress」をインストール

WordPressの管理画面で、左のメニューにある「プラグイン」にマウスカーソルを合わせ、出てきた小さいメニューにある「新規追加」をクリックします。

WordPress管理画面

プラグインを追加画面になったら、右上にあるボックスに「Invisible reCaptcha for WordPress」と入力すると検索されて「Invisible reCaptcha for WordPress」が出てきます。

今すぐインストール」ボタンをクリックして、インストールが完了したら「有効化」ボタンをクリックして有効化します。

WordPressプラグインInvisible reCaptcha for WordPressをインストール

これで「Invisible reCaptcha for WordPress」のインストールは完了です。

「Invisible reCaptcha for WordPress」を設定する

設定に「Invisible reCaptcha」があるのでクリックして設定画面を出します。

WordPress管理画面

ここでreCAPTCHAについて設定していきます。

Settingsタブ

Settingsタブでは、基本的な設定を行います。

Invisible reCaptcha設定画面 Settingsタブ

Your SiteKey
先程のサイトキーを入力します。

Your Secret Key
先程のシークレットキーを入力します。

Language
reCAPTCHAの表示する言語の設定で、デフォルトでは「Automatically detect(自動判別)」になっています。
そのままでもよいのですが、私は日本語だけでよいと思ったので「Japanese」を選択しました。

Badge Position
reCAPTCHAのバッジを表示される場所の設定です。

  • Bottom Rightは、ページの右下に表示
  • Bottom Leftは、ページの左下に表示
  • lnlineは、フォームに埋め込む

私は「Inline」を選びました。スマホで表示する際に邪魔にならなくておすすめです。

基本的にこの4つに入力、設定を行えばOKです。
Badge Custom CSSではCSSを設定することができます。どうやら「Inline」だけに適用されるようです。

入力や選択が終わったら「変更を保存」ボタンをクリックして、設定を保存しましょう

WordPressタブ

次に「WordPressタブ」をクリックします。

WordPressタブでは、reCAPTCHA v3を適用するフォームを選択します。

Invisible reCaptcha設定画面 WordPressタブ
  • Enable Login Form Protectionは、ログインフォーム
  • Enable Registration Form Protectionは、登録フォーム
  • Enable Comments Form Protectionは、コメントフォーム
  • Enable Forgot Password Form Protectionは、パスワードフォーム

必要なフォームにチェックします。
私はすべてチェックしました。

ここでも設定後には「変更を保存」ボタンをクリックして、設定を保存しましょう

Contact Formsタブ

次は、「Contact Formsタブ」をクリックします。

ここで、プラグイン「Contact Form 7」を利用したフォームも保護する設定ができます。

Invisible reCaptcha設定画面 Contact Formsタブ

Enable Protection for Contact Form 7」にチェックします。

ここでも設定後には「変更を保存」ボタンをクリックして、設定を保存しましょう

これで設定は完了です。
設定したフォームを確認して、reCAPTCHAのバッジが表示されていればOKです

コメント欄
投稿のコメント欄にreCAPTCHAのバッジが表示されている

バッジの位置を調整

私が使っているWordPressのテーマ「SWELL」では、Contact Form 7を使って表示したメールフォームで、送信ボタンとその下に表示されるreCAPTCHAのバッジがくっついていました。
(投稿のコメント欄などは問題ありませんでした)

メールフォーム

そこでCSSを少し追加して、バッジの位置を少しだけ下へずらしました。

WordPressの管理画面の左側にあるメニューから、外観>カスタマイズを選びます。

カスタマイズ画面になったら、「追加CSS」に下記の追加します。

.wpcf7 input[type="submit"] {
     margin-bottom: 15px;
 }

.inv-recaptcha-holder {
     margin-bottom: 15px; 
 }

追加して位置を確認したら、「公開」ボタンをクリックして保存することを忘れずに

WordPressカスタマイズ 追加CSS

まとめ

当ブログは始めたばかりですが、今後ブログの運営を続けていくうえでいつかは対峙することになるであろう迷惑なアクセスやスパム行為。

それを助けてくれる便利なサービスをGoogleが提供してくれていると知り、今のうちに導入することにしました。

しかも無料で利用できるとはありがたいものです。

reCAPTCHA v3では、ブログに来ていただいた方に面倒な手間をかけることもなくスパムを防ぐことができるのでとても便利だと思いました。

よろしければ、導入の参考にしていただければうれしいです。

コメント

コメントする

目次
閉じる