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

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

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

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

 

Invisible reCAPTCHAの使い方

コードの例も示しながら、導入時に行ったことをまとめていきます。

 

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

はじめに、公式サイトへアクセスしてreCAPTCHAの利用登録を行います。

フォームの中にreCAPTCHAのタイプを選ぶ項目があるので、「Invisible」を選択します。
登録が完了するとsitekeysecretが発行されるので、あとで使うためにそれぞれメモしておきます。

 

手順2. 表側の実装

すべきことはページへのscriptタグの埋め込みと、サブミットボタンへのクラス・属性追加の2つです。

headタグ内に以下のscriptタグを追加します。

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

 

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

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

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

 

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

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

function mySubmitFunction(){
    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というパラメータは、表側で認証した際に自動でフォームの送信データへ追加されます。

 

おわり

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