Laravel 11で認証機能を0から自作する【Part.1 – 共通レイアウト、トップページ & ダッシュボードの作成】

points and lines.jp owner

6日前

1 Laravel 11で認証機能を0から自作する
- 1.1 トップページとダッシュボードの作成
- 1.2 動作確認

Laravel 11で認証機能を0から自作する

Laravel11における認証の仕組みをより理解することを目的に、Laravel Breezeなどの拡張機能を使用せずに、認証機能を0から自作していきます。

内容が多いため、記事を複数回に分けて作成していきます。

初回の本記事ではアプリケーションのトップページとログインした状態でアクセスできるようになるユーザー専用のダッシュボードページを作成します。

本記事では、Laravel Sailを使用してLaravelをインストールした直後の状態から実装を行っていきます。

環境: PHP 8.3.10, Laravel Framework 11.20.0

トップページとダッシュボードの作成

共通レイアウトの作成

まず初めに、全ページ共通のレイアウトを適用するための基本テンプレートとなるbladeファイルをあらかじめ作成しておきます。

（CSSフレームワークのBootstrapを使用してレイアウトを整えています）

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel App')</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 500px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .form-label {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        @yield('content')
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

コントローラーの作成

トップページとダッシュボードページのアクセスを処理するコントローラークラスHomeControllerを作成します。

php artisan make:controller HomeController

app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return view('index');
    }

    public function dashboard()
    {
        return view('dashboard');
    }
}

トップページの作成

トップページのテンプレートを作成します。

resources/views/index.blade.php

@extends('layouts.app')

@section('title', 'トップページ')

@section('content')
    <h2 class="text-center mb-4">トップページ</h2>

    @auth
        <p class="text-center">ログイン中: {{ Auth::user()->name }}</p>
    @endauth

    <div class="d-flex justify-content-center">
        @auth
            <a href="{{ route('dashboard') }}" class="btn btn-primary mx-2">ダッシュボード</a>
        @endauth
    </div>
@endsection

ダッシュボードページの作成

ログイン後にアクセスできるダッシュボードページのテンプレートを作成します。

resources/views/dashboard.blade.php

@extends('layouts.app')

@section('title', 'ダッシュボード')

@section('content')
    <h2 class="text-center mb-4">ダッシュボード</h2>
    <p class="text-center">ログイン中: {{ Auth::user()->name }}</p>
    <div class="d-flex justify-content-center">
        <a href="{{ route('home') }}" class="btn btn-outline-secondary mx-2">トップページに戻る</a>
    </div>
@endsection

ルーティングの設定

トップページ、ダッシュボードページへのURLルーティングを設定します。

トップページは認証状態に関係なく全ユーザアクセス可能で、ダッシュボードはmiddlewareの仕組みを使い、ログイン認証されたユーザーのみがアクセスできるようにします。（authミドルウェアを適用）

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;

// トップページのルート
Route::get('/', [HomeController::class, 'index'])->name('home');

// ダッシュボードのルート（ログインが必要）
Route::get('/dashboard', [HomeController::class, 'dashboard'])->middleware('auth')->name('dashboard');

ミドルウェア（middleware）について

LaravelのmiddlewareはHTTPリクエストがアプリケーションのルートやコントローラーに到達する前に処理を行うための仕組みです。

Laravel middlewareの主な機能と役割:

認証: 特定のルートやコントローラーへのアクセスを制限するために使用されます。たとえば、authミドルウェアは、ユーザーがログインしていることを確認し、ログインしていない場合はログインページにリダイレクトします。
ログ記録: アクセスログを記録するために使用することもできます。たとえば、リクエストの詳細をデータベースに保存するなどの処理を実行します。
クロスサイトリクエストフォージェリ (CSRF) 保護: Laravelでは、CSRFトークンを使用してフォーム送信時のリクエストを検証するミドルウェアがデフォルトで設定されています。
リクエストの加工: 例えば、リクエスト内のデータを変換したり、検証したりするために使用できます。

今回のダッシュボードページでの例では、authミドルウェアを使用して、ログインしていないユーザーが/dashboardにアクセスするのを防ぎます。これにより、認証されたユーザーのみがダッシュボードにアクセスできるようになります。