laravelにrecaptchaのv2を開発環境と本番環境に導入
978 回閲覧されました
みなさんこんにちは、jonioです。
laravelでrecaptchaのv2を本番環境に導入する際に色々と大変な思いをしたので忘れない様に自分へのアウトプットとしてこの記事を残します。
目次
Laravelのバージョン
8です。
recaptchaとは
お問い合わせフォームやアカウント登録の際に「私はロボットではありません」にチェックボックスを入れる奴です。
recaptchaがロボットかもしれないと判断したら画像を選ぶクイズが表示されます。
それではまずはrecaptchaを使うための登録です。
Google reCAPTCHAに登録
この記事を書いているのが2023年6月ですが登録画面を見る時期によって見た目が変わる可能性がありますのでご了承下さい。
ここから登録画面に飛びます。
すると↓の画面に移動するので登録します。
「ラベル」（↓の赤枠）はrecaptchaを入れたいアプリ名を入力して「reCAPTCHAタイプ」（↓の青枠）は「チャレンジ（v2）」を選択します。
「ドメイン名」（↓の赤枠）は例えば自分のサイトのURLが「https://xxxxxx.com」だったら「xxxxxx.com」と入力して下さい。
「https://」も含むとエラーになります。
またサイトのURLが「https://www.abe.com」だったら「www.abe.com」と入力して下さい。
「Google Cloud Platform」（↓の青枠）は入力しなくても大丈夫な気がしますが私はアプリ名を入力しました。
そして画面一番下にある「送信」ボタンをクリックすると↓の画面に移動してrecaptchaを実装するのに必要なサイトキーとシークレットキーが表示されます。（↓はシークレットキーが見切れています）
サイトキーとシークレットキーですが画面下の「設定に移動」からでも表示されます。
↓が設定の画面です。
「ドメイン」ですが開発環境でも使いたいならその場合のドメイン名も追加して下さい。
私はLaravel Sailを使っているので「localhost」を追加しています。
↓の青枠のチェックボックスですが入れておいた方がいいと思います。
これでGoogle reCAPTCHAの登録は完了です。
アプリへの実装に入ります。
laravel-google-recaptchaのインストール
laravel-google-recaptchaの開発者のGitへはここから飛ぶ事ができますがGitのページ下にある「README.md」に導入方法が記載されています。
それでは「laravel-google-recaptcha」を導入する為に↓のコマンドを叩きます。
「Laravelのプロジェクト/config/captcha.php」を作成する為に↓のコマンドを叩きます。
そしてLaravelのプロジェクト 直下にある「.env」の一番下に設定の画面で見る事ができるサイトキーとシークレットキーを記述します。
recaptchaを表示する為の記述
今回アカウント登録・ログインのページでrecaptchaを使いたかったのでそのページに記述します。
「{!! Captcha::display() !!}」を記述する事でrecaptchaが表示されます。
注意点
Google reCAPTCHAの設定画面で登録したドメインで必ず実装して下さい。
登録してないドメインでrecaptchaを使うと↓の様に表示が変わります。（これはlocalhostが設定のドメインにない場合です）
バリデーション
今のままでは「私はロボットではありません」のチェックボックスにチェックを入れなくても弾かれません。
チェックボックスにチェックを入れない場合はログインやアカウント登録が弾かれるようにモデルかコントローラーにrecaptchaの記述をします。
ログイン画面にバリデーションを適用する場合は「Laravelのプロジェクト > app > Http > Requests > Auth > LoginRequest.php」に記述します。
34行目を追加しています。
アカウント登録画面にバリデーションを適用する場合は「Laravelのプロジェクト > app > Http > Controllers > Auth > RegisteredUserController.php」に記述します。
40行目を追加しています。
これでバリデーションも反映されて開発環境でのrecaptchaの実装は完了しました。
本番環境での導入
開発環境の時に.envファイルに記述したサイトキーとシークレットキーを本番環境でも.envファイルの中に記述します。
そして本番環境でrecaptchaの確認をする為にアカウント登録・ログインの画面に接続しても画面が表示されずエラーが表示されます。
エラーになる理由
理由はLaravelのプロジェクトの直下に「vendor」フォルダがありそこにrecaptchaを使う為のライブラリファイルが入っているのですが本番環境にはvendorフォルダの中身を持っていく事ができないからです。
ただLaravelのプロジェクトの直下に「composer.lock」があるので「composer install」をする事でvendorフォルダの中が開発環境と同じ状態になります。
これで本番環境でもrecaptchaを導入する事ができます。
「composer.lock」や「composer install」については↓の記事を読むと理解が深まるかもしれません。
