PR

Laravel 認証の実装ガイド:Fortify・Breeze・Jetstreamの比較(日本語対応)

Laravel Jetstreamのログイン画面 セキュリティ
記事内に広告が含まれています。
スポンサーリンク

 ユーザー認証は,Webアプリケーション開発において不可欠な部分です.しかし,堅牢な認証ロジックやUIを一から設計し,ソースコードを記述するのは時間がかかるだけでなく,思わぬ脆弱性を作り込んでしまう原因にもなります.

 そこで,本記事では Laravelの認証ライブラリを使って,初心者の方でも簡単にWebアプリケーションにログイン機能を実装できる方法をご紹介します.
さらに,Laravelの認証パッケージであるFortifyBreezeJetstreamの違いや選び方,セキュリティ強化のための多要素認証(MFA)の実装方法についても,実際のコード例を交えて,初心者でも簡単に導入できるようにご紹介します.

スポンサーリンク
スポンサーリンク

Laravel 認証のパッケージ比較:Fortify・Breeze・Jetstream

 Laravelでは,認証機能を簡単に実装できるパッケージが複数用意されています.ここでは,代表的な認証パッケージであるFortifyBreezeJetstreamの3つを比較し,それぞれの特徴を紹介します.

Fortify

 Fortifyは,パスワードリセット,ユーザー登録,メール認証など 基本的な認証機能を提供(コマンド実行で,ロジック部分を生成)しつつも,UI部分のカスタマイズが容易である点が大きな特徴です.
オリジナルのUI構築を希望する場合など,高いカスタマイズ性が求められる場面に向いています

初心者オススメ度:3.0

Breeze

 Breezeは,Laravelの認証をシンプルにセットアップできるパッケージです.Vue.jsやTailwind CSSを使用した基本的なUIがセットアップされており,ロジック部分に加え,UI部分も生成してくれます.シンプルな認証を素早く実装したい場合に便利です.

初心者オススメ度:5.0

Jetstream

 Jetstreamは,Fortifyをベースにしたライブラリです.チーム認証(グループ)や二段階認証(2FA)などに対応しており,高度な認証機能を提供することが可能です.JetstreamもBreeze同様,バックエンドのロジックのみならず,フロントエンドのUI部分も生成してくれます.
Jetstreamだけでかなり本格的なアプリケーションの基礎を構築できます

初心者オススメ度:4.0

スポンサーリンク

Jetstreamの導入

 どのライブラリについて詳しくご紹介するか迷いましたが,今回はモダンな認証に必要不可欠の機能であるサインアップ(会員登録),サインイン(ログイン),パスワード再発行,メール認証,二要素認証(2FA)をコマンド1つで簡単に実装できるJetstreamについてご紹介することにしました.

環境構築

 はじめに,LaravelおよびLaravelのパッケージ・ライブラリを利用するには,LAMP環境とComposer(PHPのパッケージ管理ツール)が必要です.
LAMP環境については,特にこだわりが無ければ「XAMPP」がオススメです.ソフトウェアをインストールするだけでPHP+MySQL(データベース)環境をPC上に構築でき,管理もGUIで行うことができるため,初心者の方でも比較的使いやすいツールになっています.

新規プロジェクトの作成・パッケージ追加

 早速,Laravelの新規プロジェクトを作成してみましょう.「Laravel で教務情報システム(Webアプリ)を作ろう!」シリーズの一環として作成しているので,ここではプロジェクト名を「kyoumu」としています.この部分については,実際に作りたいアプリに応じて好きに(分かりやすい名前に)変えてください.

composer create-project laravel/laravel kyoumu --prefer-dist

Tips(ログインID対応)

 Laravelの認証は,デフォルトでメールアドレスとパスワードの組み合わせで実行されるようになっています.それでも基本的には問題無いのですが,実運用ではログインIDとパスワードの組み合わせが用いられる場合があることに加え,単純にメールアドレス(長い文字列)を毎回入力するのが面倒なので,ログインIDとパスワードの組み合わせによる認証方式に切り替えたいと思います.

 デフォルトのusersスキーマには,「ログインID」相当の文字列を格納しておくカラムがありませんので,カスタマイズして追加しておく必要があります.

プロジェクト > database > migrations > 数字の羅列_create_users_table.php に,以下の内容を追記してください.

Schema::create('users', function (Blueprint $table) {        
            $table->string('login_id');
            $table->integer('role');
        });

デフォルトで記述されているカラムについては,省略しています.
また,こちらも任意ですがロール(権限)に関するカラムも追加しています.
教務情報システムであれば,(0:システム管理者,1:事務職員,2:教育職員,3:学生)のような情報を保存することを想定しています.

続いて,Jetstreamパッケージをインストール(プロジェクトに追加)します. 以下のコマンドを実行してください.

cd kyoumu(適宜 フォルダ名は変更してください.)
composer require laravel/jetstream
php artisan jetstream:install livewire
// チーム(グループ機能)を付ける場合は,php artisan jetstream:install livewire --teams

php artisan serve // localhostでのサーバ起動

また,認証ロジックも併せて変更しておきます. app > Providers > FortifyServiceProvider.phpに以下の内容を追記してください.

use App\Models\User;
use Illuminate\Support\Facades\Hash;

public function boot(): void
    {
        /* 以下の内容を追記 */

        Fortify::authenticateUsing(function (Request $request) {
            $user = User::where('login_id', $request->login_id)->first();
     
            if ($user &&
                Hash::check($request->password, $user->password)) {
                return $user;
            }
        });

また, config > fortify.php を以下の内容に書き換えます.

// 'username' => 'email',
'username' => 'login_id',

UI(フォーム)もカスタマイズしていきましょう. resources > views > auth のregister.blade.phpに以下を追記します.

<div class="mt-4">
                <x-label for="role" value="{{ __('ロール') }}" />
                <select id="role" name="role" class="block mt-1 w-full" required>
                    <option value="1">システム管理者</option>
                    <option value="2">事務職員</option>
                    <option value="3">教育職員</option>
                    <option value="4">学生</option>
                </select>

                <div class="mt-4">
                    <x-label for="role" value="{{ __('ログインID') }}" />
                    <x-input id="login_id" class="block mt-1 w-full" type="text" name="login_id" :value="old('login_id')" required autocomplete="username" />
                </div>

また,login.blade.phpのEmailをログインID仕様に書き換えてください.

以上でロールの追加およびログインID方式のカスタマイズは完了です.

早速ページを見てみましょう.デフォルトでは(ポート番号が競合していない場合),http://127.0.0.1:8000/でアクセスできます.

すると,画面右上に「Log in」,「Register」の文字が出ているはずです.
クリックしてみると,各フォームも出来上がっており,既に動作します.

Laravelのサインアップフォーム
画像は,既に日本語対応が済んでいるバージョンです.日本語対応については,後述します.

ここまで実質ノーコードで会員登録とログインを実装できました.

日本語対応

 せっかくなので,日本語対応にしておきましょう.「laravel-lang」というライブラリを使って,日本語対応を実装していきます.

はじめに,プロジェクトのenvファイルを変更します. 以下のように変更してください.

// デフォルトでは,UTCやenになっているため,日本仕様に変更
APP_TIMEZONE=Asia/Tokyo
APP_LOCALE=ja
APP_FALLBACK_LOCALE=ja
APP_FAKER_LOCALE=ja_JP

そして,以下のコマンドを実行して日本語化に必要なライブラリを追加します.

composer require laravel-lang/common
php artisan lang:add ja

また,composer.jsonに以下の内容を追記しておきます.

{
    "scripts": {
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force",
            "@php artisan lang:update"
        ]
    }
}

全ての手順が完了したら,「php artisan serve」でlocalhostを再起動します.
「Log in」や「Register」のページをリロードすると,日本語に変わっていることが確認できます.

スポンサーリンク

多要素認証(MFA)について

 Laravel Jetstreamを導入すると,Google Authenticatorアプリによる二要素認証(2FA)が自動で実装されます.特に操作やコーディングは必要ありません.

ログイン後,右上のユーザメニュー(プルダウン)からプロフィール画面にアクセスすると,二要素認証をセットアップすることができます.

Laravel Jetstreamの二要素認証(2FA)
スポンサーリンク
スポンサーリンク
セキュリティ
シェアする
しばをフォローする
タイトルとURLをコピーしました