昨年から予告されていたInvisible reCAPTCHAが今月から利用可能になったということで、さっそくお笑いSNSのLaughteriaへ導入してみました。

非ログインの状態でユーザー登録ページにアクセスすると、このようなバッジが右下に表示されていると思います。

右下にバッジが表示される

これまでのreCAPTCHAでは、「私はロボットではありません」のようなチェックボックスを操作したりといった必要がありましたが、新しいInvisible reCAPTCHAでは、追加でどのような操作も必要なくなりました。

 

Invisible reCAPTCHAの使い方

コードの例を示しながら説明していきます。

 

1. 公式サイトで利用登録する

はじめに、公式サイトへアクセスしてreCAPTCHAの利用登録を行います。
フォームの中にreCAPTCHAのタイプを選ぶ項目があるので、「Invisible」的なものを選択します。
登録が完了すると、sitekeysecretが発行されるので、それぞれメモしておきましょう。

 

2. 表側の実装

やることは、scriptタグの埋め込みと、サブミットボタン変更の2つです。

scriptタグの埋め込みは、headタグ内に以下を追加するだけで完了です。

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

 

続いては、サブミットボタンへg-recaptchaクラスと、data-sitekeydata-callback属性を追加します。

<button class="g-recaptcha" data-sitekey="____" data-callback="submitFn">送信</button>

data-sitekeyには、利用登録時にメモした文字列を設定してください。
data-callbackには、表側で認証が完了した際のコールバック関数を指定してください。

 

開発者向けガイドにはdata-callbackは任意と書かれていますが、実質これがないとフォームの送信を行えないようです。

以下のような関数を用意して、data-callbackに指定します。

function submitFn(){
    document.getElementById("____").submit();// フォームのid属性を設定してください
}

 

3. 裏側の実装

裏側では、認証用のAPIに対してPOSTリクエストを行い、レスポンスの値が正しいかどうかをチェックします。
例えば以下のようなコードで、人間かボットかを判定することができます。

/**
 * @return object
 * @see https://developers.google.com/recaptcha/docs/verify
 */
function checkReCaptcha(){
    $url = "https://www.google.com/recaptcha/api/siteverify";
    $request = implode("&", [
        "secret=".urlencode("____"),// メモしたsecretを設定してください
        "response=".urlencode($_POST["g-recaptcha-response"])
    ]);
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $request);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close($ch);
    return json_decode($response);
}
$gResponse = checkReCaptcha();
echo ( $gResponse->success ) ? "あなたは人間です" : "あなたはボットです";

g-recaptcha-responseというパラメータは、表側で認証した際に自動でフォームの送信データへ追加されます。

 

おわり

登録フォームのような失敗できない箇所であっても、reCAPTCHAの管理画面からエラーの発生状況を確認することができるので、安心して使えそうでした。