WordPressサイトにreCAPTCHA(Google Captcha)を対応させる方法

WordPressサイトのログイン画面やお問い合わせフォーム(Contact Form 7)に
reCAPTCHA(Google Captcha)を対応させる方法です。

目次

reCAPTCHA(Google Captcha)って何?

ログインフォームやお問合せフォーム等で、送信前に入力者が人間である(ロボットでは無い)と確認するためのものです。
Googleから提供されており、Googleアカウントを持っていれば、誰でも自分のサイトで利用することができます。

入力フォームを狙った攻撃にはロボットが使用されていることが多いので、
お問合せフォームに設置すればSPAM送信の防止になりますし、
ログイン画面に設置すれば不正ログインの防止になります。

API Keyの取得

まずはGoogleのサイトでAPI Keyを取得します。
Googleアカウントにログインした状態で、下記URLにアクセスします。

右上にある「My reCAPCHA」というボタンをクリック

登録用のフォームが表示されるので、入力していきます。

Label … API Keyを識別するための名称。日本語でもOK。
Choose the type of reCAPTCHA … reCAPCHAの種類。「Checkbox」を選択。
Domain … 設置するサイトのドメイン。1行につき1つ。サブドメインも分けて記述。「localhost」も設定できるので、ローカル開発環境でも試せます。

「Accept the reCAPTCHA Terms of Service.」にチェックを入れて、サービス利用規約に同意します。
全て入力し終わったら、「Register」ボタンをクリック!

登録が正常にできれば、API Keyが発行されます。
ページ中程にある、「Site key」と「Secret key」を使います。

Google Captcha (reCAPTCHA) by BestWebSoftの設定

ログイン画面やコメント欄にreCAPTCHAを設置します。
WordPressの管理画面にて、「プラグイン」→「新規追加」と進み、「Google Captcha (reCAPTCHA) by BestWebSoft」で検索してください。
同名のプラグインが先頭に出るので、インストールします。

プラグインを有効化すると、メニューに「Google Captcha」が追加されるので、
「Google Captcha」→「Settings」と進みます。

各設定を入力していきます。

「Authentication」の「Site key」と「Secret key」に先ほどGoogleのサイトで取得したAPI Keyを入力します。
「General」の「Enable reCAPTCHA for」で、reCAPTCHAを表示させたいフォームにチェックを入れます。

Login form … ログインフォーム
Registration form … 登録フォーム
Reset password form … パスワード再設定フォーム
Comments form … コメントフォーム

「Hide reCAPTCHA for」で、reCAPTCHAを表示させない権限にチェックを入れます。
「reCAPTCHA Version」は「Version 2」のままでOK。
「Theme」はお好みで選択します。
「Whitelist Notification」はreCAPTCHAが免除されている場合に表示される文章を入力します。
「Disabled Submit Button」は、reCAPTCHAが表示されるまで、送信ボタンをDisableにするかどうか。
reCAPTCHAが表示されるまでに少し時間がかかることがあり、この一瞬の隙にフォームが送信されることを防ぎます。

全て入力し終わったら、「Save Changes」ボタンをクリック!

一回ログアウトをして、ログイン画面にreCAPTCHAが設置されていることを確認してください。

Contact Form 7の設定

Contact Form 7で作成したフォームにreCAPTCHAを設置します。
まだプラグインをインストールしていない場合は、WordPressの管理画面にて、「プラグイン」→「新規追加」と進み、「Contact Form 7」で検索してください。
同名のプラグインが先頭に出るので、インストールします。
(※Contact Form 7の詳しい使い方については割愛。)

プラグインを有効化すると、メニューに「お問い合わせ」が追加されるので、
「お問い合わせ」→「インテグレーション」と進みます。

「サイトキー」と「シークレットキー」に、先ほどGoogleのサイトで取得したAPI Keyを入力し、「保存」ボタンをクリックします。

「お問い合わせ」→「コンタクトフォーム」または「新規追加」と進み、フォームの編集画面を表示します。
フォームを追加するボタン群に「reCAPTCHA」が追加されているのでこれを利用するか、
下記のショートコードを直接入力して、reCAPTCHAを表示したい場所にショートコードを記述します。

[recaptcha]

内容を保存したらページを開き、フォームにreCAPTCHAが設置されていることを確認してください。

参考

本記事を書くにあたり、以下を参考にさせていただきました。ありがとうございました。

コメント

Back to Top