Googleリキャプチャv2の導入

タイトルを見てv2とは古いんじゃないと言われそうです。しかし「私はロボットでありません」というのが好きなお客さんも要るのです。今回はGoogle reCaptchaを簡単に取り付けできるパッケージを紹介します。もちろん、v3あるいはさらにエンタープライズバージョンも将来に紹介する予定です。

サイトを登録してキーを取得

Googleのアカウントをすでに持っている、そしてログインしていることを仮定して以下のURLへ行きます。
https://www.google.com/recaptcha/admin
日本語版の画面というのはないみたいですね（間違っていたらお知らせを）。

画面の赤箱部分を入力します。

• Labelは設定の名前なので代表する名前を入力してください。保存後に編集可能です。
• reCAPTCHA Typeは、ここではv2の「私はロボットでありません」（I’m not a robot）のチェックボックスを選択しますが、チェックボックスなし（invisible）も選択可能です。画面の右下に表示されているのが多分にそのreCAPTCHAタイプでしょう。それから、こちらの設定は保存後に変更できません。
• DomainsはreCaptchaを使用するサイトのドメイン名です。複数のドメインの入力が可能で自分が持っていないドメイン（例えばお客さんの）でもOKです。保存後に編集も可能です。

上の画面で「Submit」ボタンを押すと以下の画面へ遷移します。

サイトキーとシークレットキーが生成されています。ここでそれらをコピーして控える必要はないです。Settingの画面に行くといつでも以下のように両方とも閲覧可能です。

この画面では、Ownersのところで私以外に他のユーザーがオーナーとなることも可能です。後に話しますが、不正アクセス数を含むアクセスの統計を表示する画面があるのでそれらは関係者と共有した方がいいですね。

上の画面では、Send Alert To Ownersは、何か問題が起きた時に先に登録したオーナーにメールするのでチェックボックスをオンとした方が良いです。

v2のパッケージ

今回の目的のためにLaravelで使用できるcomposerのパッケージはいくつかあります。

まず、本家のGoogleから、
https://github.com/google/recaptcha
もちろん、これがベストなのですがバリデーションルールやフロントエンドなどの設定は自作する必要あります。自作してもそうは難しくないですけれど。
https://github.com/biscolab/laravel-recaptcha
こちら、パッケージ名にLaravelがあるくらいだから、Laravelのために作られています。Laravelのバージョン5から10まで対応しています。オプションが多く細かく指定できるようですが、私としてはちょっと多すぎでそこまで頭を使いたくありません。

ということで、落ち着いたのが以下、
https://github.com/thinhbuzz/laravel-google-captcha
こちらも、Laravel特定です。バリデーションもあるし、ブレードにある関数を埋め込むだけでgoogleのapi urlも入れてくれるのでフロンエンドの作成も簡単です。

laravel-google-captchaのインストールと設定

早速インストールしてみましょう。

composer require buzz/laravel-google-captcha

–devがないことに注意を。

config/captcha.phpを生成するために以下も実行します。

php artisan vendor:publish --provider="Buzz\LaravelGoogleCaptcha\CaptchaServiceProvider"

そして、.envにおいて以下を追加します。先ほどの画面からキーは取得します。

CAPTCHA_SITEKEY=6Lc18solAAAAABF13H_BrF0t0pQ237n-KmXBFWWC
CAPTCHA_SECRET=6Lc18solAAAAADWvyxFaAT_XA29eV6SHi-JMb-NJ

さて、ブレードには以下のように入れます。表示のときには、

{!! Captcha::display() !!}
@error('g-recaptcha-response')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

画面が表示されるときには、

<script src="https://www.google.com/recaptcha/api.js?hl=ja" async defer></script><div class="g-recaptcha" theme="light" id="buzzNoCaptchaId_5cfd27964f5cbd34338165f72c4675ab" data-sitekey="6Lc18solAAAAABF13H_BrF0t0pQ237n-KmXBFWWC"></div>

ように、google apiへのurlも入れてくれます。

もちろん、その画面には以下のように「私はロボットでありません」のチェックボックスが表示されます。

サーバー側でのバリデーションでは、以下のようにcaptchaを指定するだけです。

$request->validate([
    'email'                => ['required', 'email', 'unique:customer,email'],
    'password'             => ['required', new CustomerPasswordRule, 'confirmed'],
    'name'                 => ['required', 'string'],
    'g-recaptcha-response' => ['required', 'captcha'],
];

Googleの管理画面

最後にですが、Googleの管理画面で以下のような統計情報を見せてくれます。

青の棒グラフが「私はロボットでありません」をクリックしても、テストするための画像が表示されなくパスしたもので、緑がテストの画像が表示されましたがユーザーが問題なくパス。そして赤がテストの画像が表示されて失敗したものとなります。