Google reCAPTCHA リキャプチャ設置、設定方法

こちらは、画像入力タイプの (以前の) reCAPTCHA 設置方法です。
新しい reCAPTCHA V3 の設置方法については、
(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法 をご覧下さい。
新しい reCAPTCHA V2 の設置方法については、
(新) Google reCAPTCHA V2 リキャプチャ設置、設定方法 をご覧下さい。

“reCAPTCHA リキャプチャ” は現在非常にポピュラーな物になってきています。現在メールフォーム、もしくは会員登録の際等に用いられるスパム防止機能です。皆さんも一度は目にした事はあると思います。
今回はそんな “reCAPTCHA リキャプチャ” を自分のサイトに設置する方法を書いていきたいと思います。

Google reCAPTCHA に登録してAPIキーを入手する

  1. まず始めに http://www.google.com/recaptcha/intro/
    Google reCAPTCHA ページにアクセス、右上の青ボタン Get reCAPTCHA をクリック。Google アカウントをお持ちの方はそのまま次へ、無い方は登録して頂く必要があります。
  2. 次に Sign up Now をクリック (2014年10月時点無料で利用できます。)
  3. 次にドメインを聞かれるので reCAPTCHA を利用したいドメインを入力、ドメイン毎登録が必要になります。ドメイン入力後同じ画面上(少しわかりづらいです。)に入力したドメインが生成されているのでそちらをクリック。
  4. ここに Public Key Private Key の2つが生成されていると思います。Public Key は後に貼り付けるJavascript に使います、Private Key はサーバー側に使用するPHPコードに使用します。Private Key は表に出さない様に気おつけて下さい。

Javascriptコードをフォームに貼り付ける

自分のフォームに実際にreCAPTCHAを設置します。まずは表側、下記のJavascriptを好みの場所に設置します。通常は送信、確認ボタン直前に入れるのがいいかと思います。

 <script type="text/javascript"
       src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
    </script>
    <noscript>
       <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_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>

ここで先ほど取得したAPIコードを書き換え Public Key のみを利用します。
2行目、5行目 your_public_key を自分の数字と書き換えて下さい。これで自分のフォームに reCAPTCHA が設置されたはずです。(必ず入手したAPIがドメインと符号しているのを確認して下さい。違うドメインの物だと表示されません。)しかしこのままでは動きませんので、次はサーバー側の設定に移ろうと思います。

PHPの設定をする

次はサーバー側の設定。Ajaxやその他の言語の設定方法もあるそうなのですが、今回はPHPでの設定を説明したいと思います。今回は verify.php recaptchalib.php の2つを作ります。自身の

タグに action=”verify.php” の記述をして下さい。そして verify.php というファイルを作成します。以下 verify.php
<?php
require_once('recaptchalib.php');
  $privatekey = "your_private_key";
  $resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

  if (!$resp->is_valid) {
    // What happens when the CAPTCHA was entered incorrectly
    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
         "(reCAPTCHA said: " . $resp->error . ")");
  } else {
    // Your code here to handle a successful verification
  }
?>

ここで先ほど取得したAPIコードを書き換え今回は Private Key を使います。2行目の your_private_key を取得したコードと置き換えて下さい。また、受け取りに失敗した場合、成功した場合の表記は英語がデフォルトですが。必要に応じて書き換えて下さい。

次に recaptchalib.php の取得が必要になります。https://code.google.com/p/recaptcha/source/browse/trunk/recaptcha-plugins/php/recaptchalib.php?r=129 にコードがあるので入手、尚こちらは特に書き換えの必要はありません。

後はそれぞれのデータをアップロードし、正しい reCAPTCHA を入力した時のみ次に進めるようでしたら完成。デフォルトの表記は英語ですので、後は必要に応じて日本語にエラー時の文字などを書き換えてみて下さい。以下に簡単なフォーム例を作りましたので、参考にしてみて下さい。実際メールは送信されないので試してみてもらっても結構です。

http://ja.samurai-web-works.com/demo/recaptcha.html

いかがでしたでしょうか?実際フォームに組み込むとなるとverify.phpの中を書き換える必要がありますが、これで基本的な Google reCAPTCHA リキャプチャ設置 はお分かりになったと思います。本家サイトにも詳しい設置方法か書かれておらず、管理人も設置に結構苦戦しましたので、少しでもお役に立てると幸いです。

1 thoughts on “Google reCAPTCHA リキャプチャ設置、設定方法”

  1. はじめまして。
    新しいサイトでの申込フォームに苦戦しており、
    こちらのサイトを拝見させていただきました。

    どうしてもエラーが起きてしまうので1日悩んでいたのですが、
    すごくお役にたちました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です