この記事のゴール
- Laravel11にBreezeをインストールして、ユーザー認証機能を実装します。
- ユーザーを登録して実際にログインしてみます。
![](https://laravel.com/img/og-image.jpg)
前提条件
- Laravel11インストール済
- Ubuntu上で作業しています。
- Composerインストール済
Laravel11をインストールしていない場合はこちらの記事をご覧ください。
Laravel Breeze とは
Laravel11にユーザー認証機能を実装する際には、
公式パッケージとしてBreezeとJetstreamが用意されています。
またソーシャルログイン機能を提供するSocialiteもあります。
Breezeは最小限の認証としてメールアドレスとパスワードだけでログインできるようにしてくれます。
Breezeが提供している機能は次の通りです。
- ユーザー登録
- ログイン(Email, Password)
- ログアウト
- ダッシュボード
- プロフィール編集
- Email Verification(パスワード忘れでリセット時)
- ユーザー削除
JetstreamはBreeze+2段階認証+セッション管理+チーム管理+APIサポートといったところでしょうか。
Socialiteを使うと、GitHubやFacebook、Google、X等のアカウントを使ってログインすることが可能になります。
Laravel Breeze はインストール時に設定ファイル等を書き換えるので、
既存のプロジェクトへの導入には注意が必用です。
できればプロジェクトの初期段階で導入するかどうか決めましょう。
Laravel Breeze インストール
Sailを使ってDockerコンテナを構成している場合には、
Sail Shell に接続します。
./vendor/bin/sail shell
次のコマンドでBreezeをインストールします。
composer require laravel/breeze
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_01.png)
次のコマンドでLaravelで使えるようにします。
php artisan breeze:install
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_02.png)
使用するスタックを尋ねられるので、今回は「Blade with Alpine」を選択します。
ダークモードもPESTも今回は使わないので、
2問目は「No」、3問目は「PHPUnit」を選択します。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_03.png)
ユーザー登録してログインしてみる
WEBブラウザで「localhost」にアクセスします。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_04.png)
画面右上に「Log in」と「Register」のリンクが表示されます。
ユーザー登録をするので「Register」をクリックします。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_05.png)
ユーザー登録画面が表示されるので、適当に入力します。
※全部、忘れない程度の適当な入力で。ガチ入力すると情報漏洩の温床になります。
※mailpitを導入してる場合は、送信されたメールは全てmailpitで逮捕してくれます。
※ここでは、パスワードは「hogehoge」にしています。
入力完了後に「REGISTER」ボタンをクリックします。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_06.png)
ユーザー登録完了後に自動ログイン状態となり
ダッシュボードにリダイレクトされます。
一旦ログアウトしてからログインしなおしてみましょう。
ダッシュボード右上のユーザー名のプルダウンから「Log Out」を選択します。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_07.png)
トップページにリダイレクトされるので、「Log in」をクリックします。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_08.png)
ログイン画面に移動するので、先程登録したEmailとパスワードを入力して「LOG IN」ボタンをクリックします。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_09.png)
ログインに成功すると先程のダッシュボードに移動します。
パスワードを忘れた場合は、ログイン画面で「Forgot your password?」をクリックします。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_10.png)
登録したEmailを入力して「EMAIL PASSORD RESET LINK」ボタンをクリックします。
パスワードリセット画面へのリンクがメール送信されるので、
メールを確認してみましょう。
mailpitを導入している場合は、mailpitダッシュボードにアクセスします。
WEBブラウザで「localhost:8025」にアクセスします。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_11.png)
送信されたメールのリストが表示されるので、該当メールをクリックして詳細表示します。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_12.png)
メール本文内の「Reset Password」ボタンをクリックします。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_13.png)
パスワードリセット画面が表示されるので、
新しいパスワードを入力して「RESET PASSWORD」ボタンをクリックします。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_14.png)
パスワードリセットが完了するとログイン画面に移動するので、Emailと新しいパスワードを入力して「LOG IN」ボタンをクリックします。
ログインに成功するとダッシュボードへ移動します。
ダッシュボード右上のドロップダウンメニューから「Profile」を選択します。
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_15.png)
プロフィール編集画面へ移動します。
プロフィール画面で出来ることは次の通りです。
- 名前とEmailの変更
- パスワード変更
- アカウント削除
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_16.png)
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_17.png)
![](https://macocci7.net/blog/wp-content/uploads/2024/03/laravel11_breeze_install_18.png)
以上です。
コメント