【Laravel11 + Breeze + filament】管理者画面を構築

Laravel

Laravel用の管理画面コンポーネント集のfilamentを使って管理者ログイン機能と管理画面を構築していきます。

Filament - Accelerated Laravel development framework: admin panel, form builder, table builder and more
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewir...

前提条件

  • PHP8.2以降インストール済(Laravel11の要件)
  • Composerインストール済

要件の確認

一般ユーザーと管理者権限ユーザーの多重認証をします。

▼一般ユーザー

  • ◎:/register から新規登録可
  • ◎:/login からログイン可
  • ✖:/admin/login からログイン不可

▼管理者権限ユーザー

  • ◎:Artisanコマンドで新規登録可
  • ✖:/register から新規登録不可
  • ◎:/login からログイン可
  • ◎:/admin/login からログイン可

これからやること

  • Laravel11プロジェクト作成
  • Breezeインストール
  • filamentインストール
  • filamentユーザー新規登録(一般ユーザー)
  • 管理画面ログイン
  • 設定変更
  • マイグレーション
  • Userモデル編集
  • Artisanコマンド作成
  • 管理者権限ユーザー作成
  • 管理画面ログイン

Laravel11プロジェクト作成

新規プロジェクト「filament-app」を作成します。

composer create-project laravel/laravel:^11 filament-app

プロジェクトフォルダに入ります。

cd filament-app

Breezeインストール

Breezeをインストールします。

composer require laravel/breeze

breezeをLaravelで使えるようにします。

php artisan breeze:install

スタックの選択は多分何でもOKです。

「Blade with Alpine」でも動作確認できています。

filamentインストール

続いて、filamentをインストールします。

composer require filament/filament:^3.2 -W

Panel Builder をインストールします。

php artisan filament:install --panels

「What is the ID?」と訊かれますが、

これは、管理画面のURLだと思ってください。

「admin」で登録すると、管理画面のURLは

http://localhost:8000/admin

となります。

間違って登録しても、後から修正できます。

ここでは、とりあえずデフォルトの「admin」で登録します。

そのまま[Enter]で確定します。

インストール完了すると

「GitHubリポジトリでスターしてくれない?」と訊かれます。

どちらでも適当に選んでください。

filamentユーザー新規登録(一般ユーザー)

ユーザーを登録します。

php artisan make:filament-user

「Name」「Email address」「Password」を訊かれるので

それぞれ入力して[Enter]で確定します。

※やっていることは単なるユーザー登録だけです。

※usersテーブルにレコード登録して結果表示するだけです。

管理画面ログイン

Laravelのビルトインサーバーを起動します。

php artisan serve

WEBブラウザを開いて、

http://localhost:8000/

にアクセスします。

まずは一般ユーザーのログイン画面からログインしてみます。

「Log in」をクリックします。

先程登録したユーザーでログインしてみます。

ログイン成功してdashboardにリダイレクトされました。

右上のプルダウンメニューから「Log Out」を選択します。

管理者ログイン画面にアクセスします。

http://localhost:8000/admin/login

先程のユーザーでログイン(Sign in)します

管理画面が表示されました。

設定変更

一応、filamentのインストールと動作確認はできました。

が、一般ユーザーでも管理画面へログインできる状態です。

管理者権限を付与したユーザーのみがログインできるように

設定を変更していきます。

まずは、filamentの設定ファイルをpublishします。

php artisan vendor:publish --tag=filament-config

config/filament.php に次の行を追記します。

    'id' => 'admin',

インストール時に設定した「ID」が、

filamentのコードでハードコーディングされているので、

ここで設定してメンテナンス性を向上させます。

filamentのインストールで追加されるvendor以外のファイルは

app/Providers/Filament/AdminPanelProvider.php

だけです。このファイルを編集します。

▼編集前

        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => Color::Amber,
            ])

▼編集後

        return $panel
            ->default()
            ->id(config('filament.id'))
            ->path(config('filament.id'))
            ->login()
            ->colors([
                'primary' => Color::Amber,
            ])

これで、「config/filament.php」の「id」の値を変更するだけで

管理画面のURLを変更できます。

「id」の値は「config(‘filament.id’)」で参照できます。

マイグレーション

多重認証の方法はいくつかありますが、今回は単純に

usersテーブルに「admin」フラグのカラムを追加します。

「admin」の値が1なら管理者権限あり、0なら管理者権限なしです。

「database/migrations/0001_01_01_000000_create_users_table.php」

を編集します。

次の行を追記します。

            $table->tinyInteger('admin')->default(0);

マイグレーションを実行します。

※データベースを作り直します。ユーザーデータは消えます。

php artisan migrate:fresh

Userモデル編集

「app/Models/User.php」を編集します。

▼宣言部追記

use Filament\Models\Contracts\FilamentUser;
use Filament\Panel;

▼class宣言部に implements 追記

class User extends Authenticatable implements FilamentUser

▼「canAccessPanel」メソッド追記

    public function canAccessPanel(Panel $panel): bool
    {
        if ($panel->getId() === config('filament.id')) {
            return (bool) $this->admin;
        }
 
        return true;
    }

▼完成形

<?php

namespace App\Models;

use Filament\Models\Contracts\FilamentUser;
use Filament\Panel;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable implements FilamentUser
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array<int, string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * Get the attributes that should be cast.
     *
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
        ];
    }
 
    public function canAccessPanel(Panel $panel): bool
    {
        if ($panel->getId() === config('filament.id')) {
            return (bool) $this->admin;
        }
 
        return true;
    }
}

「canAccessPanel()」メソッド内でアクセス権限判定を記述できます。

「$panel->getId()」が「admin」のときには、

「$user->admin」が「1」のときだけアクセスできるようにします。

Artisanコマンド作成

管理者権限を付与するためのArtisanコマンドを作成します。

「make:filament-user」コマンドをラッピングしていきます。

php artisan make:command MakeAdminUser

「app/Console/Commands/MakeAdminUser.php」

を編集します。

<?php

namespace App\Console\Commands;

use App\Models\User;
use Illuminate\Console\Command;
use Illuminate\Support\Facades\Artisan;
use Illuminate\Validation\Rules\Password;

use function Laravel\Prompts\form;

class MakeAdminUser extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'make:admin-user';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Create a new admin user.';

    /**
     * Execute the console command.
     */
    public function handle()
    {
        // 入力:name, email, password
        list($name, $email, $password) = form()
            ->text(
                label: 'ユーザー名を入力してください。',
                placeholder: '比良 面斗',
                validate: ['name' => 'required|max:255,'],
            )
            ->text(
                label: 'メールアドレスを入力してください。',
                placeholder: 'hoge@example.com',
                validate: ['email' => 'required|email:rfc,dns|unique:users,email'],
            )
            ->password(
                label: 'パスワードを入力してください。',
                placeholder: 'Pass_w0rd',
                hint: '8~16文字、大文字、小文字、数字、記号混在。',
                validate: ['password' => [
                    'required',
                    Password::min(8)
                        ->max(16)
                        ->mixedCase()
                        ->numbers()
                        ->symbols()
                ]],
            )
            ->submit();

        // ユーザー作成
        $exitCode = Artisan::call(
            "make:filament-user",
            [
                '--name' => $name,
                '--email' => $email,
                '--password' => $password,
            ]
        );

        // 結果確認
        if ($exitCode) {
            echo "❌ユーザー作成に失敗しました。" . PHP_EOL;
            exit(1);
        }

        // 管理権限付与
        $user = User::where('email', $email)->first();
        if (!$user) {
            echo "❌ユーザー情報の取得に失敗しました。" . PHP_EOL;
            exit(1);
        }
        $user->admin = 1;
        $updated = $user->save();
        if (!$updated) {
            echo "❌ユーザー {$name} への管理者権限付与に失敗しました。" . PHP_EOL;
            exit(1);
        }
        echo "🎉管理者ユーザーの作成が完了しました。" . PHP_EOL;
        $adminUrl = env('APP_URL') . '/' . config('filament.id');
        echo $user->email . ' は ' . $adminUrl . ' からログインできます。🌈' . PHP_EOL;
    }
}

入力された「name」「email」「password」で

「make:filament-user」を実行し、

「email」で作成されたユーザーレコードを検索・取得、

取得できたら「admin」に「1」を保存します。

※バリデーションルールを厳し目にしています。

※emailはDNSチェックまでしています。

※不要なら「,dns」を削除してください。

※passwordは

  • 「->mixedCase()」大文字小文字それぞれ最低1文字
  • 「->numbers()」数字最低1文字
  • 「->symbols()」記号最低1文字

となっています。不要ならそれぞれ削除してください。

管理者権限ユーザー作成

上記で作成したArtisanコマンドで管理者権限ユーザーを作成します。

php artisan make:admin-user

一応、DBも確認してみます。

「admin」フラグに「1」が登録されています。

管理画面ログイン

上記で作成した管理者ユーザーで管理画面にログインしてみます。

管理画面にログインできました。

ログインセッションは一般ユーザーと同じなので、

このまま一般ユーザー用の「Dashboard」にもアクセスできます。

一旦ログアウトし、

今度は一般ユーザーでは管理画面にログインできないことを確認します。

トップページ右上の「Register」から新規登録画面へ移動します。

適当に入力して「REGISTER」ボタンをクリックします。

ユーザーを作成したら、管理者画面へアクセスします。

「403 FORBIDDEN」でアクセス拒否されます。

ログアウトした状態からアクセスすると、

ログインできません。

以上で、要件通りの実装ができました。

日本語化設定については次の記事をご覧ください。

また、filamentの各機能を活用して簡易システムを構築するテュートリアルの実践記録もあります。

コメント

タイトルとURLをコピーしました