laravel9 + recaptcha(v3)した時のメモ

参考記事

概要

フォームから悪意のあるリクエストが飛んでくる。
reCaptcha(v2)は設定していたがどうにも通過される。
ので、
v2→v3に上げた手順を残しておく。

対応方法

これに対する対応方法はいくつかあり
reCaptchaをv3にするというのはその中の１つである。

動作環境

• php-fpm8*
• laravel9
• arcanedev/no-captcha:13.0.0
  • https://github.com/ARCANEDEV/noCAPTCHA

手順

composerパッケージをインストールする

$ composer require arcanedev/no-captcha
$ php artisan vendor:publish --provider="Arcanedev\NoCaptcha\NoCaptchaServiceProvider"

設定ファイル(config/no-captcha.php)が作成される

<?php

return [

    /* -----------------------------------------------------------------
     |  Credentials
     | -----------------------------------------------------------------
     */

    'secret'  => env('NOCAPTCHA_SECRET', 'no-captcha-secret'),
    'sitekey' => env('NOCAPTCHA_SITEKEY', 'no-captcha-sitekey'),

    /* -----------------------------------------------------------------
     |  Version
     | -----------------------------------------------------------------
     |  Supported: v3, v2
     */

    'version' => 'v3',

    /* -----------------------------------------------------------------
     |  Localization
     | -----------------------------------------------------------------
     */

-    'lang' => null,
+    'lang' => 'jp',

    /* -----------------------------------------------------------------
     |  Skip IPs
     | -----------------------------------------------------------------
     */

    'skip-ips' => [
        // 127.0.0.1
    ],

];

reCaptchaを設定する

https://www.google.com/recaptcha/about/

• ラベル
  • なんでもいい
• ドメイン
  • localで確認するためにlocalhost入れとく
• オーナー
  • 自分と他の管理者入れとくといい

Laravel側

.env

.env

# reCAPTCHAのサイトキー
NOCAPTCHA_SITEKEY=サイトキー
# reCAPTCHAのシークレットキー
NOCAPTCHA_SECRET=シークレットキー

no-captcha設定

config/no-captcha.php

- 'version' => 'v2',
+ 'version' => 'v3',

blade

form.blade.php

<form method="POST" action="{{ route('login') }}">
    @csrf
    (省略)
    <input type="submit" value="送信" id="submitButton">

    {!! no_captcha()->input() !!}
</form>

{!! no_captcha()->script() !!}
{!! no_captcha()->getApiScript() !!}

<script>
    document.querySelector('#submitButton').addEventListener('click', (event) => {
        event.preventDefault();
        
        grecaptcha.ready(function() {
            grecaptcha.execute('{{config('no-captcha.sitekey')}}', {action: 'submit'}).then(function(token) {
                //// submitするデータにtokenを追加
                document.querySelector('#g-recaptcha-response').value = token;
                document.querySelector('form').submit();
            });
        });
    });
</script>

バリデーション(FormRequest)

+ use Arcanedev\NoCaptcha\Rules\CaptchaRule;

public function rules()
{
    $rules = [
        'name'     => 'required',
        'kana'     => 'required',
+       'g-recaptcha-response' => ['required', new CaptchaRule]
    ];

    return $rules;
}

public function messages()
{
    $messages = [
        'name.required'                 => '名前は必ず入力してください。',
        'kana.required'                 => 'フリガナは必ず入力してください。',
+       'g-recaptcha-response.required' => 'reCaptchaのtokenがありません。',
+       'g-recaptcha-response.captcha'  => 'reCaptchaによって認証されませんでした',
    ];

    return $messages;
}

終わり。