ネットサービスのユーザー登録画面などで、そのユーザーが「人間かどうか」を判定するために使われる「読みづらい文字」のことを「CAPTCHA(キャプチャ)」といいます(「Completely Automated Public Turing test to tell Computers and Humans Apart」の略)。今回は、そのCAPTCHAを自分のサイトで使えるフリーのCAPTCHAサービス「reCAPTCHA」の使い方を紹介しましょう。

reCAPTCHA

reCAPTCHAとは?

reCAPTCHAは元々アメリカのカーネギーメロン大学で開発されたシステムで、OCRで読み取れない文字の解読にCAPTCHAを利用するという発想から生まれています。

reCAPTCHAでは2つの単語が提示されます。

1つはすでにreCAPTCHA側で答えがわかっている単語で「ユーザーが人間かどうか」を判定するのに使われます。もう1つはまだ答えがわかっていない単語で、こちらの回答はOCRの精度向上に利用されます。

reCAPTCHAは2009年にGoogleに買収され、現在はGoogleのサービスとして提供されています。蓄積されたデータは、現在The New York Timesのデジタル化やGoogle Booksで提供される書籍のスキャンなどに利用されているそうです。

reCAPTCHAを自分のサイトに導入してみよう


1. reCAPTCHAに登録してAPIキーを取得

「Get reCAPTCHA」のページにある「Sign up Now!」ボタンをクリックするとサイトの登録画面が開きます。その画面でreCAPTCHAを導入したいサイトのドメインを登録し、reCAPTCHA Keyを取得します。

なお、reCAPTCHAを利用するにはGoogleのアカウントが必要です。ご自身のGoogleアカウントでログインしてください。

reCAPTCHAの登録画面

ここで取得できるreCAPTCHA Keyは、初期設定では登録したドメイン及びそのサブドメイン上のサイトでしか利用できません。一つのreCAPTCHA Keyを複数のドメイン上で利用したい場合は、以下のいずれかの方法で登録しましょう。

  • 「Enable this key on all domains (global key)」のチェックボックスにチェックを入れて登録する。
  • Tipsの3番目にある「sign up for multiple keys」をクリックするとドメインの入力欄がテキストエリアになるので、そこにカンマ区切りで複数のドメインを入力する。

サイトの登録が完了すると、「Public Key」と「Private Key」という2種類のAPIキーを取得できます。なお、過去に取得したreCAPTCHA Keyは、サイトの左メニューにある「MY ACCOUNT」から確認できます。

JavaScriptのコードを貼り付ける

ここからはreCAPTCHAのドキュメントを見ながら作業を進めていく必要があります。reCAPTCHAのドキュメントはGoogle Codeのサイト上に用意されています。

reCAPTCHA - Google Code

reCAPTCHAをサイトに導入するには、まずページ上にJavaScriptのコードを貼り付ける必要があります。貼り付ける箇所は通常は登録フォームなどのformタグの子要素となる部分です。

<!-- ユーザー登録フォームなど -->
<form action="signup.php" method="post">
<script type="text/javascript"
  src="http://www.google.com/recaptcha/api/challenge?k=your_api_key">
</script>
<noscript>
  <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_api_key" height="300" width="500" frameborder="0"></iframe><br />
  <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

<input type="submit" value="送信" />
</form>

上記のコードには「your_api_key」と記述されたところが2箇所ありますが、そこは手順1.で取得した「Publick Key」に置き換えてください。

このJavaScriptによって、ブラウザ上ではform内にinput要素が生成されます。これによりユーザーがCAPTCHAを読み取って入力した「回答」を自サイトのプログラム側で受け取ることができます。上記のコードの例では「signup.php」に送信されます。

reCAPTCHAの入力フォーム

3. 回答を検証する

次に、ユーザーが入力した「回答」が正しいかどうか検証します。reCAPTCHAにはそのためのAPIが用意されているので、「回答」を受け取ったプログラム内でそのAPIをリクエストし、結果を受け取ることができます。

回答を検証するには http://www.google.com/recaptcha/api/verify に対してPOSTリクエストを送信します。その際に必要なパラメータは以下の4種類です。いずれも必須項目です。

  • privatekey: 手順1.で取得したPrivate Key
  • remoteip: CAPTCHAの回答を入力したユーザーのIPアドレス
  • challenge: フォームから送信されてきた「recaptchachallengefield」の値
  • response: フォームから送信されてきた「recaptcharesponsefield」の値

ここではプログラムは省略しますが、お好みの方法で記述してください。

リクエストを送信すると、検証結果が返ってきます。レスポンスの形式は改行区切りのテキストとなっています。

  • 1行目: true もしくは false (検証結果)
  • 2行目: エラーコード (1行目がエラーだった場合のみ)

2行目のエラーコードをエラー表示画面のURLに「&error=エラーコード」という形式で付加することで、ユーザーにエラーメッセージを提示することができます。

なお、ドキュメントによると「将来的に3行目以降が使われる可能性がある」そうで、「プラグラムを組む際には改行で分割して利用してください」とのことです。

外観のカスタマイズも可能、WordPress用のプラグインも

reCAPTCHAの外観には何種類かのテーマが用意されていますし、CSSで自由にカスタマイズできるようにもなっています。Webサイトの雰囲気に合わせたい時は、カスタマイズしてみるのもいいでしょう。

Customizing the Look and Feel of reCAPTCHA - reCAPTCHA - Google Code

またreCAPTCHAには、WordPress向けのプラグインも用意されています。このプラグインを利用するとWordPressのコメント欄にreCAPTCHAを表示させることができます(コメントが減る可能性もあるのであまりおすすめしませんが……)。

WP-reCAPTCHA プラグイン

普段ネットサービスを作っていて、CAPTCHA機能を使うほどスパムが来ることはあまりないかもしれません。しかし、もし必要となった場合は、フリーで使えるこの「reCAPTCHA」の導入をおすすめします。

著者紹介

F.Ko-Ji

ブログやネットサービスを運営するブロガー兼Webエンジニア。大手IT系企業、ベンチャー系Web開発企業を経てフリーに。『F.Ko-Jiの「一秒後は未来」』というブログや、「Meity」「DailyFeed」「梅酒.in」といったサービスを運営しています。