LaravelでMySQLを使用したシンプルな認証システム（さくらインターネットDB作成手順）

投稿日 2024年11月8日
更新日 2024年11月13日
著者 IF233
カテゴリー Laravel

MVCのルーティングの流れ

処理の流れ：

ブラウザからリクエスト：
- ユーザーがURLにアクセス
Routeが処理を振り分け：
- URLに合わせて適切なControllerを呼び出し
ModelでDBアクセス：
- 必要なデータを取得/保存
Viewで画面を作成：
- HTMLを生成
ブラウザに結果を返す：
- 作成した画面を表示

まずはデータベースを作成

さくらインターネットでMySQLの用意をします

（さくらインターネットのレンタルサーバーでは、標準でMySQLが提供されています）

さくらのコントロールパネルにログイン

「データベース」メニューを選択

「新規作成」をクリック

データベース名、ユーザー名（データベース同一）、パスワードを設定

新規作成したDBを選択し「設定」から「phpMyAdmin」をクリック

Laravelプロジェクトでの設定

.envファイルでデータベース接続の設定

.envファイルを以下のように設定します

DB_CONNECTION=mysql
DB_HOST=mysql○○.db.sakura.ne.jp    # さくらインターネットから提供されるホスト名
DB_PORT=3306
DB_DATABASE=データベース名           # さくらで作成したDB名
DB_USERNAME=ユーザー名              # さくらで設定したユーザー名
DB_PASSWORD=パスワード              # さくらで設定したパスワード

Tinker でのDB接続確認方法

Tinkerとは

Tinker は対話型コマンドラインツールでphpの実行やデータベースの操作が可能です

Tinkerの起動

php artisan tinker

DB接続を内容を確認

# DB接続確認（以下のいずれかを実行）
DB::connection()->getPdo();   # 接続成功ならPDOオブジェクトが表示
DB::connection()->getDatabaseName();   # データベース名が表示

# 実際のデータを確認
DB::table('users')->get();   # usersテーブルの全データ表示

テストデータの作成

Usersテーブルのマイグレーションファイルでテーブルの構造を定義

マイグレーションファイルは「データベースの設計図」のようなものです。
データベースの構造を定義

database\migrations\0001_01_01_000000_create_users_table.phpを編集

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('nickname', 100);
            $table->string('email')->unique();
            $table->string('password');
            $table->tinyInteger('locked_flg')->default(0);
            $table->integer('error_count')->unsigned()->default(0);
            $table->timestamps();
        });
    }
};

Laravelには「マイグレーション」という機能があり、データベースのテーブル構造やカラムをPHPコードで定義し、コマンドを実行することでデータベースに反映します。

php artisan migrate

User.phpを編集しユーザー関連のロジックを定義

app\Models\User.phpを編集

<?php

namespace App\Models;

// 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
{
    /** @use HasFactory<\Database\Factories\UserFactory> */
    use HasFactory, Notifiable;

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

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

    /**
     * Get the attributes that should be cast.
     *
     * @return array<string, string>
     */
    // protected function casts(): array
    // {
    //     return [
    //         'email_verified_at' => 'datetime',
    //         'password' => 'hashed',
    //     ];
    // }
}

UserFactory.phpでユーザーデータを作成

database\factories\UserFactory.phpを編集

<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\User>
 */
class UserFactory extends Factory
{
    /**
     * The current password being used by the factory.
     */
    protected static ?string $password;

    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'nickname' => fake()->name(), // ランダムな名前を生成
            'email' => fake()->unique()->safeEmail(), // ランダムでユニークなメールアドレスを生成
            'password' => static::$password ??= Hash::make('password'), // パスワードをハッシュ化

        ];
    }
}

Laravelのデータベースシーディング（seeding）機能を使ってテストデータを作成

database\seeders\DatabaseSeeder.phpを編集

<?php

namespace Database\Seeders;

use App\Models\User;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        User::factory(10)->create();

        // User::factory()->create([
        //     'name' => 'Test User',
        //     'email' => 'test@example.com',
        // ]);
    }
}

php artisan db:seed コマンドは、データベースに初期データを挿入するためのコマンドです。

php artisan db:seed

ログイン画面の設定

auth/login.blade.phpを作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ログイン</title>
    <!-- Tailwind CSSを使用 -->
    @vite('resources/css/app.css')
</head>
<body class="bg-gray-100">
    <div class="min-h-screen flex items-center justify-center">
        <div class="bg-white p-8 rounded-lg shadow-md w-96">
            <h1 class="text-2xl font-bold mb-8 text-center">ログイン</h1>

            @if ($errors->any())
                <div class="bg-red-100 text-red-700 p-4 mb-4 rounded">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('login') }}">
                @csrf
                
                <!-- メールアドレス -->
                <div class="mb-4">
                    <label for="email" class="block text-gray-700 mb-2">メールアドレス</label>
                    <input 
                        type="email" 
                        name="email" 
                        id="email" 
                        value="{{ old('email') }}"
                        class="w-full p-2 border rounded focus:outline-none focus:border-blue-500"
                        required 
                        autofocus
                        >
                </div>

                <!-- パスワード -->
                <div class="mb-6">
                    <label for="password" class="block text-gray-700 mb-2">パスワード</label>
                    <input 
                        type="password" 
                        name="password" 
                        id="password" 
                        class="w-full p-2 border rounded focus:outline-none focus:border-blue-500"
                        required
                    >
                </div>

                <!-- ログインボタン -->
                <div class="flex flex-col gap-4">
                    <button type="submit" 
                            class="w-full py-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none">
                        ログイン
                    </button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

ログイン機能のルーティングを設定

routes/web.phpを編集


use App\Http\Controllers\Auth\LoginController;

// ログイン関連のルート
Route::middleware('guest')->group(function () {
    // ログイン画面表示
    Route::get('/login', [LoginController::class, 'showLoginForm'])
        ->name('login');
    
    // ログイン処理
    Route::post('/login', [LoginController::class, 'login']);
});

// ログアウト（認証済みユーザーのみ）
Route::middleware('auth')->group(function () {
    // ダッシュボード表示
    Route::get('/dashboard', function () {
        return view('dashboard');
    })->name('dashboard');

    // ログアウト処理
    Route::post('/logout', [LoginController::class, 'logout'])
        ->name('logout');
});