Laravel Sail環境でlaravel/uiを用いて認証機能を実装する

5032 ワード
laravel8 Sail Laravel LaravelSail Laravel テキストリンク

はじめに

Laravel Sailで作った環境で、認証機能を実装しました。公式ドキュメントを見ると、Laravel BreezeやLaravel Jetstreamが記載されていますが、今回は扱いやすそうな、laravel/uiをインストールすることにしました。

参考にした記事

環境

  • Laravel8
  • WSL2

laravel/uiをインストールする

ターミナルで下記のコマンドを実行し、laravel/uiをインストールします。

sail composer require laravel/ui

認証周りの機能を実装する

laravel/uiをインストールするだけでは、コントローラ等はありません。したがって認証周りの機能を実装する必要があります。
下記コマンドを実行します。

sail artisan ui bootstrap --auth

すると、下記のように表示されます。

Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

言われた通り下記を実行します。

npm install && npm run dev

これで実装完了です。

ルーティングの一覧を確認する

下記を実行してルーティングの一覧を確認してみます。

sail artisan route:list

以下の内容が表示されます。（認証部分のみを抜粋）

  GET|HEAD   api/user ..............................................................  
  GET|HEAD   home ...................................... home › HomeController@index  
  GET|HEAD   login ...................... login › Auth\LoginController@showLoginForm  
  POST       login ...................................... Auth\LoginController@login  
  POST       logout ........................... logout › Auth\LoginController@logout  
  GET|HEAD   password/confirm password.confirm › Auth\ConfirmPasswordController@sho…  
  POST       password/confirm ............... Auth\ConfirmPasswordController@confirm  
  POST       password/email password.email › Auth\ForgotPasswordController@sendRese…  
  GET|HEAD   password/reset password.request › Auth\ForgotPasswordController@showLi…  
  POST       password/reset ... password.update › Auth\ResetPasswordController@reset  
  GET|HEAD   password/reset/{token} password.reset › Auth\ResetPasswordController@s…  
  GET|HEAD   register ...... register › Auth\RegisterController@showRegistrationForm  
  POST       register ............................. Auth\RegisterController@register  
  GET|HEAD   sanctum/csrf-cookie ....... Laravel\Sanctum › CsrfCookieController@show

ルーティングが追加されたことを確認できました！

ログイン画面の確認

routes/web.phpに以下のように/homeのルーティングが追加されています。

routes/web.php
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

localhost/homeをブラウザで確認してみるとBootstrapが効いていないようなログイン画面が表示されました。
以下を実行してみます。

npm run watch

ログイン画面の確認ができました！

おわりに

今回はlaravel/uiで認証機能を実装してみましたが、Laravel Breeze、Laravel Jetstreamを使っての認証機能の実装も試してみたいです。