LaravelでreCAPTCHAを導入してみる

2024.04.19 09:00
2024.04.18 12:10
LaravelでreCAPTCHAを導入してみる

Laravelのアプリにフォームの不正送信防止のためのreCAPTCHAを導入してみます。
環境は以下です。

  • Laravel11
  • PHP8.3
  • google reCAPTCHA v3

ライブラリは「biscolab/laravel-recaptcha」を使ってみましょう。
また、試すにあたってこちらのサイトを参考にさせて頂きました。とてもわかりやすくて素晴らしいです。https://biz.addisteria.com/laravel_recaptcha_v3/

1. Google reCAPTCHAの登録

まずはGoogle AdminからreCAPTCHAを登録します。
登録したら発行されるシークレットキーとサイトキーが発行されるので、それを使います。
ちなみに開発用と本番用はそれぞれ別で作ったほうが良いみたいです。

2. Laravelのライブラリをインストール

次にライブラリをcomposerでインストール。

composer require biscolab/laravel-recaptcha

次に設定を出力します。

php artisan vendor:publish --provider="Biscolab\ReCaptcha\ReCaptchaServiceProvider"

「config/recaptcha.php」が出力されますので、その中にある「version」をv2からv3にします。

    /**
     *
     * ReCATCHA version
     * Supported: "v2", "invisible", "v3",
     *
     * get more info @ https://developers.google.com/recaptcha/docs/versions
     *
     */
    'version'                      => 'v3',

次に.envにKEYを追加します。

RECAPTCHA_SITE_KEY='XXXXXX'
RECAPTCHA_SECRET_KEY='XXXXX'

3. viewの設定

head部分にチェックのためのスクリプトを入れます。
読み込み順の関係で、ページ下部よりも上部のほうが良いみたいですね。

    <script type="text/javascript">
        function callbackThen(response)
        {
            response.json().then(function(data) {
                if (!(data.success && data.score >= 0.6)) { 
                    document.getElementById('ContactForm').addEventListener('submit', function(event) {
                        event.preventDefault();
                        alert('セキュリティ確認に失敗しました。ページを再読み込みして、もう一度送信ボタンをクリックしてください。');
                    });
                }
            });
        }
            
        function callbackCatch(error)
        {
            console.error('reCAPTCHA Error:', error);
            alert('セキュリティチェック中に問題が発生しました。ページを再読み込みしてください。');
        }
    </script>

    {!! htmlScriptTagJsApi([
        'callback_then' => 'callbackThen',
        'callback_catch' => 'callbackCatch',
    ]) !!}

ちなみに上記はフォームIDが「ContactForm」の場合ですので、そこは環境に合わせて。

これで送信を押した時にスコアが下回っていたら、エラーメッセージを吐いて止まります。
ボットは次に進めないというわけです。

今回は以上です！