【Laravel】簡単アプリ作製【７】ログイン・会員登録機能の追加　

Laravel

　これまで作成してきた商品管理システムに、ユーザー認証（ログイン機能）を追加します。
　Laravel公式のスターターキット「Laravel Breeze」を使えば、複雑なログイン処理やセッション管理、会員登録フォームなどの仕組みをあっという間に構築できます。

1. 準備：Node.jsがインストールされているか確認

　Breezeはログイン画面のデザイン（CSSやJavaScript）を構築するために、Node.js（npm）というツールを使用します。
　VSCodeのターミナルで以下のコマンドを入力し、バージョンが表示されれば準備OKです。

PowerShell
PS C:\xampp\htdocs\laravel-app> node -v                 
v24.16.0

PS C:\xampp\htdocs\laravel-app> npm -v       
11.13.0

※「コマンドが見つかりません」と出る場合は、先にNode.jsの公式サイトからインストーラーをダウンロードしてインストールしてください。

2. Laravel Breezeのインストールとセットアップ

Step 1: Breezeパッケージのダウンロード

VSCodeのターミナル（対象のLaravelプロジェクトのフォルダ内）で以下を実行します。

PowerShell
PS C:\xampp\htdocs\laravel-app> composer require laravel/breeze --dev
   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found.
Using version ^2.4 for laravel/breeze

Step 2: 認証機能の土台を作成（Blade版）

　次に、ログイン画面のビュー（Bladeファイル）やコントローラーを自動生成するコマンドを実行します。

PowerShell
PS C:\xampp\htdocs\laravel-app> php artisan breeze:install blade
✓ built in 2.96s

   INFO  Breeze scaffolding installed successfully.

※途中でダークモードのサポート等を聞かれた場合は、エンターキー（デフォルトの no）を押して進めて問題ありません。

Step ３: ログイン・会員登録後の遷移先を「商品一覧」に変更

　Breezeのデフォルトでは、ログイン直後に /dashboard というページへ飛ぶようになってる。
　これを、商品一覧画面（ /products ） へ直接ジャンプするように書き換える。

① ログイン後の遷移先を修正

app/Http/Controllers/Auth/AuthenticatedSessionController.php

PHP
// 修正前：return redirect()->intended(route('dashboard', absolute: false));
return redirect()->intended(route('products.index', absolute: false)); // // 商品一覧へ変更

② 会員登録後の遷移先を修正

app/Http/Controllers/Auth/RegisteredUserController.php

PHP
// 修正前：return redirect(route('dashboard', absolute: false));
return redirect(route('products.index', absolute: false)); // // 商品一覧へ変更

Step ４: 画面デザイン（CSS/JS）のビルド

　以下のコマンドを実行して、ログイン画面の見た目を整えるファイルをコンパイル（組み立て）します。

PowerShell
PS C:\xampp\htdocs\laravel-app> npm install
38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

PS C:\xampp\htdocs\laravel-app> npm run build
vite v7.3.6 building client environment for production...
✓ 56 modules transformed.
public/build/manifest.json             0.33 kB │ gzip:  0.17 kB
public/build/assets/app-BFHyPOOU.css  46.95 kB │ gzip:  8.28 kB
public/build/assets/app-BfpX1doZ.js   92.32 kB │ gzip: 33.87 kB
✓ built in 678ms

Step 4: データベースの更新（ユーザーテーブルの作成）

　Laravelには最初から「ユーザー（users）テーブル」の設計図（マイグレーション）が用意されています。これをデータベースに反映させます。

PowerShell
PS C:\xampp\htdocs\laravel-app> php artisan migrate

3. 動作確認：ログイン・登録画面へアクセス！

　XAMPPのApacheとMySQLが動いていることを確認し、ブラウザでいつものURLにアクセスしてみてください。

１．トップページ（ http://localhost/laravel-app/public/ ） 画面の右上に「Log in（ログイン）」と「Register（会員登録）」のリンクが自動で追加される。

２．会員登録テスト 「Register」をクリックし、適当な名前・メールアドレス・パスワード（8文字以上）を入力して「Register」ボタンを押します。

３．ログイン状態になり、「商品一覧」が表示されれば成功。

４. 商品管理機能に「鍵」をかける（アクセス制限）

　今のままでは、ログインしていなくてもURL（ /products ）を直接入力すれば商品一覧が見えていた。
　最後に、「ログインしていないと商品管理ページを開けない」ように設定（ミドルウェア）を追加。

routes/web.php を開き、これまで書いた商品用のルートを Route::middleware('auth')->group(function () { ... }); で囲む。

PHP
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProfileController;     // 追加
use App\Http\Controllers\CategoryController;    // 追加
use App\Http\Controllers\ProductController;     // 追加

// ログイン不要のページ（トップページなど）
Route::get('/', function () {
    return view('welcome');
});

// ↓↓↓ ここから追加・変更 ↓↓↓

// ログイン済みユーザーのみアクセスを許可するグループ（authミドルウェア）
Route::middleware('auth')->group(function () {
    
    // この中に商品管理のルートをごっそり移動（または記述）します
    Route::get('/products', [ProductController::class, 'index'])->name('products.index');
    Route::get('/products/create', [ProductController::class, 'create'])->name('products.create');
    Route::post('/products', [ProductController::class, 'store'])->name('products.store');
    Route::get('/products/{id}/edit', [ProductController::class, 'edit'])->name('products.edit');
    Route::put('/products/{id}', [ProductController::class, 'update'])->name('products.update');
    Route::delete('/products/{id}', [ProductController::class, 'destroy'])->name('products.destroy');

});

// ↑↑↑ ここまで ↑↑↑

// 以下、Breezeが自動生成したプロフィールのルート等が続きます
require __DIR__.'/auth.php';

５. 商品一覧画面に「ログアウトボタン」を追加する

　ルートに制限をかけたことで、未ログインでのアクセスは防げるようになった。
　しかし、このままだと一度ログインしたユーザーが画面からログアウトできなくなってしまう。

　Laravel Breezeの仕様として、ログアウト処理はセキュリティ（不正ログアウト防止）の観点から、URLを叩くだけ（GET）ではなく、必ずPOST送信（フォームの形）で行う必要がある。
　そこで、メイン画面として使っている商品一覧画面（index.blade.php）の右上に、現在ログインしているユーザーの名前と、安全にログアウトできるボタンを配置する必要がある。
resources/views/products/index.blade.php

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>商品一覧</title>
</head>
<body>
    <h1>商品一覧</h1>

    <!-- ★追加：ログインユーザー名とログアウトボタンの設置 -->
    <div style="text-align: right; margin-bottom: 20px;">
        <span>ログイン中: {{ Auth::user()->name }} さん</span>
        <form action="{{ route('logout') }}" method="POST" style="display: inline; margin-left: 10px;">
            @csrf
            <button type="submit" style="cursor: pointer;">ログアウト</button>
        </form>
    </div>

    <!-- 登録ページへのリンク -->
    <a href="{{ route('products.create') }}">新規登録</a>
    <br><br>

💡 コードの解説

  • Auth::user()->name: 現在ログインしている人の名前をデータベース（usersテーブル）から自動で引っ張ってきて表示しています。
  • @csrf: Laravelのフォームで必須のセキュリティ対策トークンです。これがないとエラー（419エラー）になります。

６. 最終確認

　ログインした後に右上に名前が出ること、ボタンを押して正常にログアウトできることを確認。

※この記事はAIで生成後、実際に手順通り実施して加筆、修正しています。

コメント