Laravel

【Laravel】reCAPTCHA認証を実装する

えび

LaravelにてreCAPTCHA認証(ロボット弾くやつ)を実装した

まずはAPI認証キーの取得から

reCAPTCHAの認証キーを取得

  • 未登録の場合はこちらから登録
    ※Googleログインが必要

ラベル、reCAPTCHAタイプ (v3)、ドメイン (今回reCAPTCHAを使用するサイト)
を入力 & 同意後、「送信」ボタン押下

  • 登録完了画面のキー情報が表示されるのでメモしておく
  • 既に登録済みの場合は、
    コンソールトップ上部の設定ボタンから遷移する設定画面で確認できる

続いて、Laravelの手順

パッケージインストール

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

これでインストール & 設定用ファイル (config/no-captcha.php) が生成される

.envにreCAPTCHAの認証情報を記載

生成された設定用ファイルで使用する定数を.envに記載する

  • .env
# reCAPTCHAのサイトキー
NOCAPTCHA_SITEKEY={登録完了画面に記載されていたサイトキー}
# reCAPTCHAのシークレットキー
NOCAPTCHA_SECRET={登録完了画面に記載されていたシークレットキー}

使ってみる

  • auth/register.blade.php
<form method="POST" action="{{ route('register') }}" id="form">
@csrf

<!-- ⭐️ 追加 -->
{!! no_captcha()->display() !!}

<button type="submit" id="submitButton">送信</button>
</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: 'login'}).then(function(token) {
        // submitするデータにtokenを追加
        document.querySelector('#g-recaptcha-response').val(token)
        document.querySelector('#form').submit()
      })
    })
  })
</script>

{!! no_captcha()->display() !!}により、下記hidden要素が追加される

<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">

{!! no_captcha()->script() !!}、{!! no_captcha()->getApiScript() !!}で必要なJavaScriptファイルをインポートした後、ログインボタンのclickイベントを拾ってreCAPTHAのキーをhiddenに設定している

標準のauth認証のRegisterController@registerを使う場合

  • RedirectsUsersのregisterメソッドをオーバーライドする
 public function register(Request $request)
    {
        // ⭐️ recaptchaのバリデーションを追加
        $request->validate([
            // 中略
            'g-recaptcha-response' => ['required', new \Arcanedev\NoCaptcha\Rules\CaptchaRule]
        ], [
            'g-recaptcha-response.required' => 'v2のチェックボックスなら、チェックがされていないときのメッセージ',
            'g-recaptcha-response.captcha'  => 'ロボットだと判断されてしまった時のメッセージ',
        ]);
        
        $this->validator($request->all())->validate();

        event(new Registered($user = $this->create($request->all())));

        $this->guard()->login($user);

        if ($response = $this->registered($request, $user)) {
            return $response;
        }

        return $request->wantsJson()
            ? new JsonResponse([], 201)
            : redirect($this->redirectPath());
    }

\ 案件のご依頼・ご相談はこちらから /