Laravelは、認証機能を迅速に実装できる強力な機能を提供しています。本記事では、Laravel 11を使用して、CoreUIデザインテンプレートで認証機能を実装する方法を解説します。
Laravel 11のインストール
まずはLaravel 11をインストールします。以下のコマンドで新しいLaravelプロジェクトを作成します。
Bash composer create-project --prefer-dist laravel/laravel laravel-auth-example インストールが完了したら、プロジェクトディレクトリに移動します。
Bash cd laravel-auth-example CoreUIテンプレートのインストール
CoreUIは、管理画面向けのレスポンシブでモダンなデザインテンプレートです。CoreUIを使用するために、まずnpmを使って依存関係をインストールします。
Bash npm install @coreui/coreui 次に、resources/js/app.jsにCoreUIのスタイルとスクリプトをインポートします。
JavaScript import { createApp } from 'vue' import CoreUI from '@coreui/coreui' ; import App from './App.vue' ; CoreUIのスタイルシートも追加します。
JavaScript import '@coreui/coreui/dist/css/coreui.min.css' ; Laravelの認証機能をセットアップ
Laravel 11では、artisanコマンドを使用して簡単に認証機能を設定できます。以下のコマンドで認証機能をインストールします。
JavaScript composer require laravel / ui php artisan ui vue -- auth npm install npm run dev これで、基本的な認証機能（ログイン、登録、パスワードリセット機能）がインストールされます。
CoreUIスタイルに合わせたカスタマイズ
次に、認証ビューをCoreUIに合わせてカスタマイズします。resources/views/authディレクトリ内のファイル（login.blade.php、register.blade.php など）を開き、CoreUIのコンポーネントを使用してデザインを調整します。
例えば、ログインフォームのデザインを次のように変更します。
HTML < div class = "c-card" > < div class = "c-card-header" > < h4 class = "card-title" >ログイン</ h4 > </ div > < div class = "c-card-body" > < form method = "POST" action = "{{ route('login') }}" > @csrf < div class = "form-group" > < label for = "email" >メールアドレス</ label > < input id = "email" type = "email" class = "form-control @error('email') is-invalid @enderror" name = "email" value = "{{ old('email') }}" required autofocus > @error('email') < span class = "invalid-feedback" role = "alert" > < strong >{{ $message }}</ strong > </ span > @enderror </ div > < div class = "form-group" > < label for = "password" >パスワード</ label > < input id = "password" type = "password" class = "form-control @error('password') is-invalid @enderror" name = "password" required > @error('password') < span class = "invalid-feedback" role = "alert" > < strong >{{ $message }}</ strong > </ span > @enderror </ div > < button type = "submit" class = "btn btn-primary btn-block" >ログイン</ button > </ form > </ div > </ div > 認証後のリダイレクト設定
認証が成功した後、ユーザーをどのページにリダイレクトするかを設定するには、app/Http/Controllers/Auth/LoginController.phpのredirectToプロパティを設定します。
PHP protected $redirectTo = '/dashboard' ; これで、ログイン後にユーザーがダッシュボードページにリダイレクトされるようになります。
CoreUIダッシュボードの作成
次に、ログイン後に表示されるダッシュボードページを作成します。resources/views/dashboard.blade.phpを作成し、CoreUIのコンポーネントを使用して管理画面をデザインします。
HTML < div class = "c-dashboard" > < h1 >ダッシュボード</ h1 > < p >ようこそ、{{ Auth::user()->name }} さん！</ p > </ div > ユーザーの作成
usersテーブルのデータを作成する
Bash php artisan make:seeder UsersTableSeeder シーダーファイルサンプル
database/seeders/UsersTableSeeder.php
PHP use Illuminate\Database\ Seeder ; use App\Models\ User ; class UsersTableSeeder extends Seeder { public function run () { // 管理者ユーザーを作成 User :: create ([ 'name' => 'Admin User' , 'email' => 'admin@example.com' , 'password' => bcrypt ( 'password123' ), // パスワードは必ずハッシュ化 ]); // 一般ユーザーを複数作成 User :: factory () -> count ( 10 ) -> create (); // Factoryが利用可能な場合 } } DatabaseSeeder に登録
PHP public function run () { $this -> call ([ UsersTableSeeder ::class , ]); } シーディングを実行 認証機能の確認
http://127.0.0.1:8000/loginへアクセス
認証機能Breezeのログイン画面 ログイン後の画面
認証機能Breezeのダッシュボード セキュリティ強化の設定
Laravelはデフォルトでセキュリティが強化されていますが、必要に応じて、config/auth.phpや.envファイルで詳細な設定を行うことができます。特に、パスワードのハッシュアルゴリズムやセッションの設定などを確認しておきましょう。
結論
Laravel 11とCoreUIを使用することで、迅速に美しい認証機能を実装できます。基本的なセットアップが完了した後は、デザインやユーザー体験をカスタマイズして、自分のプロジェクトに最適な認証機能を作り上げていきましょう。
