「私はロボットではありません」(Google reCAPTCHA v2)を設置する方法

概要

Google reCAPTCHA v2とは、Webサイトでフォーム送信の際などに見かける「私はロボットではありません」のこと

スパムなどの対策にロボットには難しい画像選択などをさせて人間とロボットを判別するためのものである

これを自分のサイトに設置する場合の手順を記す

サイトキー、シークレットキーの取得

Google reCAPTCHAのサイトから利用登録してサイトキーをシークレットキーを取得する
※ 予めGoogleアカウントは取得してあるものとする

1. 1. 1. Google reCAPTCHA の新規作成ページにアクセスする
         https://www.google.com/recaptcha/admin/create
      2. 必要な情報を入力する
         • ラベル：管理用のわかりやすい適当な名前をつける
         • reCAPTCHAタイプ：reCAPTCHA v2 の「私はロボットではありません」チェックボックス を選択する
         • ドメイン：設置先のドメインを入力する、ローカル環境で試す場合は localhost と入力する

   
   

   1. 「reCAPTCHA 利用条件に同意する」にチェックして 「送信」
   2. サイトキーとシークレットキーが発行されるので控えておく
      （後から設定画面かもら確認可能）

サイトに設置

次のようなHTMLコードで設置できる

コード

<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>

<form action="./verify.php" method="POST">
    <div class="g-recaptcha" data-sitekey="サイトキー"></div>
    <input type="submit" value="Submit">
</form>

説明

• {サイトキー} の部分には事前に取得したサイトキーを設定する
• g-recaptchaクラスのdivの位置に「私はロボットではありません」が表示される
• g-recaptchaクラスのdivはフォーム(form)の中に書く必要がある

判別結果の確認

Submit先で判別結果を確認する必要がある
判別結果を取得するためにはGoogleのAPIを利用する必要がある
フォームのデータの受信とHTTPリクエストができればプログラム言語は問わない
今回はPHPで実装してみる

コード

verify.php

$secretKey =  'シークレットキー';
$captchaResponse = $_POST['g-recaptcha-response'];

// APIリクエスト
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captchaResponse}");

// APIレスポンス確認
$responseData = json_decode($verifyResponse);
if ($responseData->success) {
echo 'success'; // 成功（ロボットではない）
} else {
echo 'fail'; // 失敗
}

説明

• {シークレットキー} の部分には事前に取得したシークレットキーを設定する
• POSTデータの g-recaptcha-response に判別結果を取得するためのトークンが入っている
• APIにシークレットキーとトークンを送信することで判別結果を取得できる

あとは判定結果に応じてエラーを表示したりすればよい