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

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

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

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

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

【登録したフォーム】

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

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

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

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

composer require biscolab/laravel-recaptcha

1	composer require biscolab/laravel-recaptcha

GitHub - biscolab/laravel-recaptcha: Google ReCaptcha package for Laravel

Google ReCaptcha package for Laravel. Contribute to biscolab/laravel-recaptcha development by creating an account on GitHub.

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

デフォルトでは、上記ライブラリは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'

こちらは、Google側で用意してくれているテスト用のキーです。詳細は下記ページご覧ください。

よくある質問 | reCAPTCHA | Google for Developers

reCAPTCHA Enterprise、バージョン、制限、カスタマイズなどに関する質問への回答を得る

④　ビューファイル編集

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.6では、人間による登録がはじかれてしまうこともあります。

実際に試したところ、スコアを0.6にした場合、Chromeでは大丈夫なのに、Edgeでははじかれることがありました。ブラウザによっても動作が異なるようなので、注意が必要です。

「間違えてはじいてしまいたくない」という場合は0.3ぐらいが良さそうです。ただ、そうなると、セキュリティはゆるくなっちゃいます。実際にテストしてみて、あなたのサイトにあったスコアを設定してくださいね。

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

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

なおセキュリティについては下記も参考にしてください。色々な対策をまとめてみました！

Laravelでスパム登録を遮断する方法

スパム登録に悩まされている方のための対策、お伝えします。実はわたしも、あるWebアプリを運用中にスパム登録に悩まされていました。メール認証を搭載していますが、本登録まで行わない登録が増えていたのです。スパム登録を減らすため最...

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

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

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

③ reCAPTCHA設定

④ ビューファイル編集

⑤ テストする

⑥ 本番環境に移行