Laravel（8.20.1）で認証画面を準備する

Laravelでは簡単にユーザー認証機能を作ることができます。
今日はその方法について書いてみたいと思います。

Lravelのバージョンは8.20.1です。

Laravelの認証画面は初期設定では「/public/login」に用意されるのですが、現段階で「/public/login」にアクセスすると404 not foundが表示されます。

1.laravel/uiパッケージを入手する

はじめに認証のベース機能を追加する「laravel/ui」パッケージを以下のコマンドで入手します。

composer require laravel/ui

はい。この状態で「/public/login」にアクセスしてみると。。。

まだNot found。

2.laravel/ui を使用可能にする

1.で入手した「laravel/ui」パッケージを使用します。

php artisan ui vue --auth

ではこれで「「/public/login」」にアクセスしてみると

お、片鱗が見えてきました。

この時点で「/routes/web.php」を確認してみると少し変化が起きています。
もともとweb.phpの中身は以下のようになっていますが

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

2.のコマンドを打つとweb.phpが以下のように自動で変更されています。

<?php

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Auth; <- ここは自分で追加しましょう

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

// ここから下が「php artisan ui vue --auth」コマンドで新しく追加された。
Auth::routes(); // 認証系のルーティング諸々を設定してくれている

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

3.認証画面を完成させる

最後に認証画面をCSSやJavascriptで装飾して整えます。

npm install && npm run dev

上記コマンドはnode.jsのコマンドなので予めnode.jsをインストールしておく必要ありです。

では「/public/login」にアクセスしてみると

でけた！！！

簡単ですね！

この状態で画面右上の「Register」ボタンを押してユーザー等をしてもエラーが出て先に進むことはできません。

データベースの中にusersテーブルを作る必要があります。

4.データベースにusersテーブルを作る

ではデータベース内にusersテーブルを作ります。
と言ってもメチャクチャ簡単で、以下のコマンドを実行するだけ！

php artisan migrate

これでデータベースの中にusersテーブルが作成されました。
Laravelでは最初から「database」>「migrations」ディレクトリの中に「○○○○_○○_○○_create_users_table.php」という名前のマイグレーションファイルが用意されています。

「php artisan migrate」コマンドを打つことで「○○○○_○○_○○_create_users_table.php」の内容を参照してusersテーブルを作ってくれます。

はいこれでOK。

「/public/register」に移動してユーザー登録してみましょう。
今度はちゃんとユーザーを作成することができると思います。

「/public/login」に移動してメールとパスワードを入れるともちろんログイン可能です。

認証画面のCSSが効いてない？

上記の方法で画面を作成してもCSSが効かない場合があります。
そんなときは以下の方法を試してみましょう。

npm install

続けて以下を入力

npm run dev