LaravelにreCAPTCHA V.3を搭載する方法【ボット被害とおさらばしたい方へ】

Laravelセキュリティ

2024.02.29

現在運営中のサイトにボットによるユーザー登録があまりに多かったため、reCAPTCHAを搭載しました。

いやもうほんと、ボット攻撃って面倒ですね。

備忘録もかねて、方法を記事にします。同じようにボット被害に悩んでいたら、参考にしてくださいね。

reCAPTCHA v.3を設置すると、下記のように右下にreCAPTCHAが表示されます。

【登録したフォーム】

LaravelにreCAPTCHA V.3を搭載する方法
さいごに

LaravelにreCAPTCHA V.3を搭載する方法

①　ライブラリインストール

今回は使用している人が多そうだったので、こちらのライブラリを使わせてもらいました。

composer require biscolab/laravel-recaptcha

1	composer require biscolab/laravel-recaptcha

②　設定ファイルパブリッシュ

デフォルトでは、上記ライブラリはreCAPTCHA v.2に対応なので、設定ファイルをパブリッシュして、v.3に変更します。

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

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

configの中に、recaptcha.phpファイルができます。こちらを開き、41行目あたりでバージョンをv2からv3にしておきます。

【recaptcha.php(41行目あたり）】

③　reCAPTCHA設定

.envファイルにテスト用のキーとシークレットキーを下記のように貼り付けます。

RECAPTCHA_SITE_KEY='6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
RECAPTCHA_SECRET_KEY='6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe'

1 2	RECAPTCHA_SITE_KEY='6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI' RECAPTCHA_SECRET_KEY='6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe'

④　ビューファイル編集

reCAPTCHAを設定したいビューファイルを開きます。

ユーザー登録用フォームでは、resources/views/auth/register.blade.phpファイル等になります。

formタグにid=”userRegister”をいれておきます。（ルート設定は変更しないでOKです）

<form method="POST" action="{{ route('××××') }}" id="userRegister">

1	<form method="POST" action="{{ route('××××') }}" id="userRegister">

ヘッダに、下記を加えます。

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

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

function callbackThen(response) {

response.json().then(function(data) {

if (!(data.success && data.score >= 0.6)) {

document.getElementById('userRegister').addEventListener('submit', function(event) {

event.preventDefault();

alert('セキュリティ確認に失敗しました。ページを再読み込みして、もう一度送信ボタンをクリックしてください。');

});

}

});

}

function callbackCatch(error) {

console.error('reCAPTCHA Error:', error);

alert('セキュリティチェック中に問題が発生しました。ページを再読み込みしてください。');

}

</script>

{!! htmlScriptTagJsApi([

'callback_then' => 'callbackThen',

'callback_catch' => 'callbackCatch',

]) !!}

</head>

こちら、スコアが0.6以上なら「成功」となり、通常どおりの処理が行われます。スコアが0.6より少ない場合には、「ユーザーは人間ではないのでは？」と判断され、

「セキュリティ確認に失敗しました。ページを再読み込みして、もう一度送信ボタンをクリックしてください。」

というメッセージが表示されます。

ほか、処理が実行できなかった場合には、

「セキュリティチェック中に問題が発生しました。ページを再読み込みしてください。」

と表示されます。

メッセージやスコアはお好みで変えてください。スコアは0から1で設定しますが、1に近づくほど判定が厳しくなります。

ちなみにGoogleのreCAPTCHAマニュアルには、スコアについて下記のように書かれています。

reCAPTCHA v3 はスコアを返します（1.0 は安全なインタラクションである可能性が非常に高く、0.0 は bot である可能性が非常に高いです）。

https://developers.google.com/recaptcha/docs/v3?hl=ja

⑤　テストする

テストをします。フォームにユーザーを登録します。

なお「絶対にエラーにしたい」という場合には、④で設定したスコアを1.0にしておきましょう。

if (!(data.success && data.score >= 1.0)) {

1	if (!(data.success && data.score >= 1.0)) {

⑥　本番環境に移行

本番環境で実行するには、GoogleのreCAPTCHA登録用サイトで、あらかじめGoogleのreCAPTCHA設定をしておきます。

reCAPTCHA

reCAPTCHA is a security service that protects your websites from fraud and abuse.

設定画面でキーとシークレットキーをコピーし、本番用の.envファイルに貼り付けます。

また、サイトのドメインもGoogleのreCAPTCHA登録用サイトに登録しておきます。

さいごに

スコアについてですが、今回は0.6にしましたが、0.5あたりに設定することも多いようです。

ちなみに今回なぜボット被害にあったかというと、数カ月前に、プレスリリース用サービスを使ってWebアプリを紹介したためだと推測されます。

こういったことをするとアクセスが増えるメリットがありますが、ボット被害も増加することが分かりました。

reCAPTCHA設置でボットによる登録がなくなればよいと思いますが、もし十分でなければ、また対策をしていきます。

気づいた点や追加対策などあれば、また追記しますね。

LaravelにreCAPTCHA V.3を搭載する方法

① ライブラリインストール

② 設定ファイルパブリッシュ

③ reCAPTCHA設定

④ ビューファイル編集

⑤ テストする

⑥ 本番環境に移行