こんにちは。プログラマーの山中です。
今回は reCAPTCHA モジュールの紹介から導入までを紹介しています。 reCAPTCHA は前回の スパム対策用モジュール Honeypot の使い方 に引き続き、スパム対策モジュールの記事となります。
フォーム入力画面において次のようなものを目にしたことがある方も多いのではないでしょうか？
まずは reCAPTCHA について簡単に説明し、そのあと Drupal での導入方法をご説明いたします。
reCAPTCHA 概要
reCAPTCHA は Google 社によって提供されているスパム対策用の無料のサービスです。 これまでの CAPTCHA や reCAPTCHA v1 によるスパム対策では、文字が見づらい画像に表示されたテキストなどを入力をすることでスパムか人間かを判断していましたが、reCAPTCHA v2 では 1クリックだけで人間かスパムかを判断できるようになりました。
1クリックだけでスパムかどうかを判断する仕組みについて、詳細は明かされていませんが、 IP アドレスや Cookie が他の Web サイトを閲覧した際に(恐らく Google に対して)友好的であるかどうかという証拠を残しているということと、カーソルがチェックボックスに近づいた際のマウスの動きから判断しているとのことです。
機能については、実際の機能を試したほうがわかりやすいと思いますので、下記より確認ください。
もし、 reCAPTCHA が人間かどうか判断できなかったときは、下記のキャプチャ画像のように写真を使った認証を求められます。 タイル形式に分割された写真の中から自動車や道路標識に当たる部分を選択する、あるいはお店やアパートの写真を選択する、といった内容の認証方法ですが、失敗し続けると「該当する画像をすべて選択してください。」や「もう一度お試しください。」といったメッセージが表示されて、延々と写真による認証を求められ、フォームのデータを送信することができない状態になります。
Drupal では10万を越えるサイトが reCAPTCHA モジュールを導入しています。Drupal 8 では1万を越えるサイトが導入しており、コントリビュートモジュール内でトップ50位以内の利用サイト数を誇ります(2017年09月15日現在)。 Wordpress や Joomla! でも専用のモジュールがあるようですし、reCAPTCHA の人気ぶりが伺えます。 reCAPTCHA がさまざまな Web サイト上でよく使用されるようになったのは恐らく下記の理由によるものでしょう。
- 無料で使えること
- 導入が簡単であること
- ユーザーのストレスが少ないこと(テキスト入力するタイプの CAPTCHA と比較して)
- Google が提供していること
reCAPTCHA を使用するには Google のアカウントでログインした後に site key と secret key の2つのAPIキーを発行する必要があります。 site key は Web サイト上で reCAPTCHA のサービスを呼び出すために使用され、 secret key は Web サイトと reCAPTCHA サーバ間の通信を許可し、通信を検証するために使用されます。
APIの発行にはいくつかの手順を必要としますので、その手順を reCAPTCHA モジュールの導入と一緒に見ていきましょう。
reCAPTCHA モジュールの導入方法
Google での reCAPTCHA に関する作業
Developer's Guide を見ると難しそうに思えますが、 Drupal で使用する分には数分のブラウザの操作だけで済みますので導入は簡単です。
Register a new site で reCAPTCHA の API キーを発行
まずは API キー発行フォーム にアクセスして、Google アカウントでログインし、 Register a new site の入力項目を埋めていきます。
- Label : 自分にとってわかりやすい名前(サイト名などでOKです)
- Choose the type of reCAPTCHA : reCAPTCHA V2 を選択
- Domains : サイトのドメインを入力します
- Accept the reCAPTCHA Terms of Service. : reCAPTCHA Terms of Service を読んでチェックを入れましょう
入力が済んだら Register をクリックします。
発行した reCAPTCHA の API キーを控えておく
するとすぐに API キーが発行されますので、 Site key と Secret key を控えておきましょう。
Google 側の作業はこれでおしまい。 Drupal での設定に移りましょう。
Drupal での reCAPTCHA モジュールの 設定
reCAPTCHA モジュールの設定
Drupal 側ではまず、 CAPTCHA モジュールに依存するため、CAPTCHA モジュールと一緒に Drupal にインストールします。 インストールが完了したら下記ページにアクセスします。
ホーム » 管理 » 環境設定 » ユーザー » CAPTCHAの設定 » reCAPTCHA
パス: admin/config/people/captcha/recaptcha
先ほど控えた Site key と Secret key を該当するフィールドに入力して保存します。
CAPTCHA モジュールの設定
次に、CAPTCHA モジュールのデフォルトの設問形式を変更します。下記ページにアクセスします。
ホーム » 管理 » 環境設定 » ユーザー » CAPTCHAの設定
パス: admin/config/people/captcha
フォーム保護 の中の 標準の設問形式 を reCAPTCHA(モジュール recaptcha 提供) に変更して保存します。
Drupal 上で reCAPCHA を設置するフォームを選択する
最後に、reCAPTCHA を設置するフォームを選択しましょう。下記ページにアクセスします。
ホーム » 管理 » 環境設定 » ユーザー » CAPTCHAの設定 » CAPTCHAポイント
パス: admin/config/people/captcha/captcha-points
デフォルトの状態ではすべてのフォームで無効な状態になっていますので、 有効リンク をクリックして、次の画面でも 有効ボタン をクリックします(キャプチャ画像内ではログインフォームを選択しています)。
実際のフォームを確認してみると、表示されていることが確認できました。
これで導入は完了です。
最後に
いかがでしたでしょうか。実際にこの Umi->d でも導入していますが、基本的には1クリック追加するだけで承認されますのでユーザー側のストレスが少なく済みます。 少ない手順で簡単に導入でき、高い効果のスパム対策をすることができますので、ぜひ導入してみてください。
募集しています
スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。