Laravelは、認証機能を迅速に実装できる強力な機能を提供しています。本記事では、Laravel 11を使用して、CoreUIデザインテンプレートで認証機能を実装する方法を解説します。
Laravel 11のインストール
まずはLaravel 11をインストールします。以下のコマンドで新しいLaravelプロジェクトを作成します。
Bashcomposer create-project --prefer-dist laravel/laravel laravel-auth-example
インストールが完了したら、プロジェクトディレクトリに移動します。
Bashcd laravel-auth-example
CoreUIテンプレートのインストール
CoreUIは、管理画面向けのレスポンシブでモダンなデザインテンプレートです。CoreUIを使用するために、まずnpmを使って依存関係をインストールします。
Bashnpm install @coreui/coreui
次に、resources/js/app.jsにCoreUIのスタイルとスクリプトをインポートします。
JavaScriptimport { createApp } from 'vue'
import CoreUI from '@coreui/coreui';
import App from './App.vue';
CoreUIのスタイルシートも追加します。
JavaScriptimport '@coreui/coreui/dist/css/coreui.min.css';
Laravelの認証機能をセットアップ
Laravel 11では、artisanコマンドを使用して簡単に認証機能を設定できます。以下のコマンドで認証機能をインストールします。
JavaScriptcomposer 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プロパティを設定します。
PHPprotected $redirectTo = '/dashboard';
これで、ログイン後にユーザーがダッシュボードページにリダイレクトされるようになります。
CoreUIダッシュボードの作成
次に、ログイン後に表示されるダッシュボードページを作成します。resources/views/dashboard.blade.phpを作成し、CoreUIのコンポーネントを使用して管理画面をデザインします。
HTML<div class="c-dashboard">
<h1>ダッシュボード</h1>
<p>ようこそ、{{ Auth::user()->name }} さん！</p>
</div>
ユーザーの作成
usersテーブルのデータを作成する
Bashphp artisan make:seeder UsersTableSeeder
シーダーファイルサンプル
database/seeders/UsersTableSeeder.php
PHPuse 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 に登録
PHPpublic function run()
{
$this->call([
UsersTableSeeder::class,
]);
}
シーディングを実行
認証機能の確認
http://127.0.0.1:8000/loginへアクセス
認証機能Breezeのログイン画面
ログイン後の画面
認証機能Breezeのダッシュボード
セキュリティ強化の設定
Laravelはデフォルトでセキュリティが強化されていますが、必要に応じて、config/auth.phpや.envファイルで詳細な設定を行うことができます。特に、パスワードのハッシュアルゴリズムやセッションの設定などを確認しておきましょう。
結論
Laravel 11とCoreUIを使用することで、迅速に美しい認証機能を実装できます。基本的なセットアップが完了した後は、デザインやユーザー体験をカスタマイズして、自分のプロジェクトに最適な認証機能を作り上げていきましょう。
