予約システムのお問い合わせフォームに「reCAPTCHA」を組み込んでみた

どうもバックエンドエンジニアの「ささやーま」です。
今回は弊社予約システム(RESASTA)内のお問い合わせフォームに「Google reCAPTCHA」を組み込んでみました。

reCAPTCHAとは
reCAPTCHA料金
reCAPTCHAタイプ
Google reCAPTCHAへサイト登録
セキュリティ設定
Laravel
まとめ

reCAPTCHAとは

botによるWEBサイト攻撃(スパム等)を防ぐためのもので、Googleが提供しているサービスです。
サイト内のフォーム画面に「私はロボットではありません」というチェックボックスを見たことがある方も多いのではないでしょうか？

Google reCAPTCHA

今回は、弊社予約システム(RESASTA)のお問い合わせ画面に「reCAPCHA」を組み込んでみました。

reCAPTCHA料金

1～1,000,000 回の呼び出し（月間）までは無料で利用できます。それ以上になる場合は、「reCAPTCHA Enterprise」を利用する必要があるようです。

reCAPTCHA Enterpriseの料金

reCAPTCHAタイプ

現在使用できるreCAPTCHAタイプは、「reCAPTCHA v3」「reCAPTCHA v2」の２タイプです。

reCAPTCHA v3

ユーザはフォーム送信時に「チェックボックス」にチェックする、「画像認証」するというアクションは一切不要です。
reCAPTCHAを使っているというアイコンだけが表示されます。
Google側で、「人間による操作なのか」、「botによる自動実行なのか」を学習して判別しています。
ユーザビリティを損ねることがありません。

reCAPTCHA v2(「私はロボットではありません」チェックボックス)

チェックボックスにチェックした際に、botの可能性ありと判断された場合、画像認証画面が表示されます。

reCAPTCHA v2(非表示 reCAPTCHA バッジ)

「確認画面へ」（送信）が押下された際に、botの可能性ありと判断された場合、画像認証画面が表示されます。
「私はロボットではありません」というチェックボックスはないので、チェックするという動作が不要です。

今回は、「reCAPTCHA v2」の「私はロボットではありません」チェックボックスありのものを組み込んで見たいと思います。

Google reCAPTCHAへサイト登録

以下にアクセスして、reCAPTCHAを使用するサイトの登録を行います。(Googleアカウント必要です。)

https://www.google.com/recaptcha/admin/create

ラベル : 識別できる名前
reCAPTCHAタイプ : 利用するreCAPTCHAタイプ
ドメイン : reCAPTCHAを利用するドメイン
オーナー : Googleアカウント

「reCAPTCHA利用条件に同意する」にチェックを入れて送信を実行すると、

サイトキー(Site Key)とシークレットキー(Secret Key)が発行されますので、コピーしておきます。

セキュリティ設定

設定後、reCAPTCHAの管理画面からセキュリティ設定を行うことができます。
「セキュリティ重視」にするとbot判定が厳しくなり、画像認証が表示される確率が高くなります。

Laravel

noCAPTCHAインストール

今回は以下のライブラリを使用します。

https://github.com/ARCANEDEV/noCAPTCHA

composer require arcanedev/no-captcha

.env


NOCAPTCHA_SITEKEY=reCAPTCHAサイト登録時に発行されたサイトキー(Site Key)
NOCAPTCHA_SECRET=reCAPTCHAサイト登録時に発行されたシークレットキー(Secret Key)

設定ファイルの発行


php artisan vendor:publish --provider="Arcanedev\NoCaptcha\NoCaptchaServiceProvider"

config/app.php


'providers' => [
    ...
    Arcanedev\NoCaptcha\NoCaptchaServiceProvider::class,
],

config/no-captcha.php

今回は「reCAPTCHA v2」を利用するので、versionをv2にする。


return [
    'secret'  => env('NOCAPTCHA_SECRET', 'no-captcha-secret'),
    'sitekey' => env('NOCAPTCHA_SITEKEY', 'no-captcha-sitekey'),
    'version' => 'v2', // <- v3を使うなら、'v3'にする。 'lang' => 'jp',
    'skip-ips' => [
        // 127.0.0.1
    ],
];

bladeファイル

no_captcha()->display()、no_captcha()->script()をbladeファイルに適宜記述してください。
※no_captcha()->script()はの前に記述。


・・・

<form action="{{ route('contact.confirm') }}" method="POST" class="form__inner">
    @csrf

・・・

    {!! no_captcha()->display() !!}
    @error('g-recaptcha-response')
    <p class="form__error">{{ $message }}</p>
    @enderror

・・・

</form>

@section('scripts')
{!! no_captcha()->script() !!}
@endsection

・・・