0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Laravel 12 + Fortify その2 UIとの連携例(Blade等)

Posted at

はじめに

前回の記事「その1」では、Laravel 12 + Fortifyでカスタム認証(ユーザーコード認証など)のバックエンド実装について解説しました。
今回は、FortifyのAPI認証とBladeテンプレート(UI)を連携し、カスタム認証フォームを作成する方法をまとめます。


前提

  • Laravel 12 プロジェクト
  • Fortify導入&カスタム認証(Fortify::authenticateUsing)済み
  • Laravel BreezeやJetstream等のUIパッケージは無し(Bladeを自作する想定)

1. ルーティングの確認

FortifyはAPIベース認証ですが、config/fortify.php'views' => true, を有効にしておくとBladeビューを利用できます。

// config/fortify.php
'views' => true,

2. Bladeでログインフォームを作成

resources/views/auth/login.blade.php を作成します。

blade name=resources/views/auth/login.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <h2>カスタムログイン</h2>
    @if(session('error'))
        <div style="color: red">{{ session('error') }}</div>
    @endif
    <form method="POST" action="{{ route('login') }}">
        @csrf
        <div>
            <label for="user_code">ユーザーコード:</label>
            <input type="text" name="user_code" id="user_code" value="{{ old('user_code') }}" required autofocus>
        </div>
        <div>
            <label for="password">パスワード:</label>
            <input type="password" name="password" id="password" required>
        </div>
        <button type="submit">ログイン</button>
    </form>
</div>
@endsection

3. ログイン画面へのルート

routes/web.php に以下を追加(既定でFortifyが/loginルートを用意していますが、明示的にBladeを返したい場合は上書きも可能です)

use Illuminate\Support\Facades\Route;

Route::get('/login', function () {
    return view('auth.login');
})->name('login')->middleware('guest');

4. 認証失敗時のエラーハンドリング

app/Providers/FortifyServiceProvider.phpboot メソッドで、失敗時にリダイレクト&エラー表示できるようにします。

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Redirect;

public function boot()
{
    Fortify::authenticateUsing(function (Request $request) {
        // ...カスタム認証処理...
    });

    // 認証失敗時の挙動カスタマイズ
    app('router')->post('login', function (Request $request) {
        $credentials = $request->only('user_code', 'password');
        if (Auth::attempt(['user_code' => $credentials['user_code'], 'password' => $credentials['password']])) {
            $request->session()->regenerate();
            return redirect()->intended('/dashboard');
        }
        return Redirect::back()->withInput()->with('error', 'ユーザーコードまたはパスワードが正しくありません');
    })->middleware(['guest']);
}

※ Fortifyのコアをオーバーライドしない場合は、コントローラやカスタムリダイレクトもOK。


5. ログイン後のリダイレクト

FortifyServiceProviderredirectTo をカスタマイズ可能です。または、config/fortify.phphome を編集します。

// config/fortify.php
'home' => '/dashboard',

6. ダッシュボード画面の作成例

blade name=resources/views/dashboard.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <h2>ダッシュボード</h2>
    <p>ようこそ、{{ Auth::user()->name }}さん!</p>
    <form method="POST" action="{{ route('logout') }}">
        @csrf
        <button type="submit">ログアウト</button>
    </form>
</div>
@endsection

7. まとめ

  • FortifyでAPI認証でも、BladeビューでUIを柔軟に作成可能
  • カスタム入力項目(ユーザーコード等)もBladeフォームに自由に追加できる
  • 認証失敗時のエラー表示やリダイレクトもカスタマイズしやすい

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?