この記事のゴール
- Laravel/Jetstreamをインストールして、ユーザー認証機能を使えるようにする。
- ユーザーを登録して実際にログインしてみる。
- ２段階認証の設定をして２段階認証でログインしてみる。
- セッション管理をしてみる。
前提条件
- Laravel の新規プロジェクト環境構築が完了している。
※Breezeはインストールしないでください。
※開発環境構築の必要がある場合はこちらの記事を参考にしてください。
Laravel/Jetstreamとは
Laravel 公式パッケージのひとつです。
２段階認証や、ログインセッション管理機能があり、
Breezeよりも堅牢な認証システムを簡単に導入できます。
※新規プロジェクト作成時にのみ導入できます。
※既存プロジェクトへの追加導入はできません。
公式サイトの説明は次の通りです。
Laravel Jetstream
Laravel Jetstream is a beautifully designed application starter kit for Laravel and provides the perfect starting point for your next Laravel application. Jetstream provides the implementation for your application’s login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features.
Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding.
Laravel Jetstream v4.x – Introduction
自動翻訳結果は次の通りです。
Laravelジェットストリーム
Laravel Jetstream は、Laravel 用に美しくデザインされたアプリケーション スターター キットであり、次の Laravel アプリケーションの完璧な開始点を提供します。 Jetstream は、アプリケーションのログイン、登録、電子メール検証、2 要素認証、セッション管理、Laravel Sanctum 経由の API、およびオプションのチーム管理機能の実装を提供します。Jetstream は Tailwind CSS を使用して設計されており、Livewire または Inertia スキャフォールディングを選択できます。
スタックの選択
Jetstreamのインストール時に選択できるスタック：
- Livewire + Blade
- Livewire + Blade + team-support
- Inertia + Vue
- Inertia + Vue + team-support
- Inertia + Vue + SSR(Server Side Rendering)
※上記のそれぞれについて、ダークモードを選択することができます。
インストール作業の終盤で選択することになります。
プロジェクトの特性に合わせて選択してください。
Livewire も Inertia も機能および機構的には似たようなものです。
どちらもPHP(Laravel)のAPIとデータ連携したリアクティブなフロントエンドを
簡単に構築できるツールです。
それぞれの公式ドキュメントへのリンクを掲載しておきます。
時間のあるときに読んでみてください。
Jetstream インストール
Laravel新規プロジェクトのコンテナを起動した状態で、
sail-shell へ接続します。
./vendor/bin/sail shell次のコマンドで Jetstream をインストールします。
composer require laravel/jetstream
数十秒で完了します。
次に、スタックの選択をします。
各スタックに合わせてコマンドを実行します。
1. Livewire + Blade
php artisan jetstream:install livewire２．Livewire + Blade + team-support
php artisan jetstream:install livewire --teams３．Inertia + Vue
php artisan jetstream:install inertia４．Inertia + Vue + team-support
php artisan jetstream:install inertia --teams５．Inertia + Vue + SSR
php artisan jetstream:install inertia --ssrここでは、上記１．の Livewire + Blade のインストール画面を掲載します。
数十秒で完了します。
以降の手順は各スタック共通です。
npm install
数秒で完了します。
npm run build
数秒で完了します。
マイグレーションを実行します。
これでインストールは完了です。
ブラウザでのアクセスとユーザー登録
ブラウザで localhost へアクセスします。
このような感じで、画面右上に「Log in」「Register」と表示されています。
「Register」のリンクをクリックして、ユーザー登録画面へ移動します。
開発環境で使うユーザー名、Email、パスワードは、超適当で忘れにくいものにしましょう。
実際のサービス等で利用している本物の情報を使うと情報漏洩のリスクを負ってしまいます。
ここでは、Email「hoge@hoge.hoge」、パスワード「hogehoge」などにしています。
メール送信されてもmailpitでメールがストップするので、
メールアドレスも適当で問題ありません。
必要事項を入力して「REGISTER」をクリックすると、
ログインした状態になり、「DASH BOARD」へ画面遷移します。
２段階認証の設定
２段階認証はログインユーザー各自の判断で設定します。
ダッシュボード画面右上のユーザー名をクリックするとプルダウンメニューが表示されます。
「Profile」を選択してプロフィール編集画面へ移動します。
プロフィール編集画面中央部に２段階認証の設定項目があります。
２段階認証を有効にするために「ENABLE」ボタンをクリックします。
画面にQRコードが表示されます。
これをスマホアプリの「Google Authenticator」でスキャンし、
表示された６桁の数字コードを、
この「Profile」編集画面のQRコードの下にある「Code」欄に入力して
「CONFIRM」ボタンをクリックすると設定完了です。
※６桁の数字コードの有効期限は３０秒間です。
※３０秒経過する毎に６桁の数字コードは更新されます。
※更新された直後に確認してから入力すると余裕をもって入力できます。
２段階認証の設定が完了すると、次のような画面になります。
パスワードを喪失した際のリカバリーキーが表示されているので、
セキュアなパスワード管理ツールなどで保存しておきましょう。
Bitwardenなどは堅牢かつ便利なツールとして有名です。
※筆者は、漏洩調査機能が気に入っています。
２段階認証を無効にしてIDとパスワードのみでのログインに戻す場合は、
「Profile」編集画面で「DISABLE」の赤いボタンをクリックします。
２段階認証を使ったログイン
では、２段階認証を有効にした状態で、一度ログアウトしてみましょう。
画面右上のユーザー名をクリックしてプルダウンメニューから「Log Out」を選択します。
トップページに戻るので、画面右上の「Log in」をクリックしてログイン画面へ移動します。
「Email」と「Password」を入力して「LOG IN」ボタンをクリックすると、
２段階認証の「Code」入力画面が表示されます。
「Google Authenticator」で表示されている６桁のコードを入力してから
「LOG IN」ボタンをクリックします。
ログインに成功すると、ダッシュボードへ画面遷移します。
セッション管理
プロフィール編集画面の下の方に「Browser Sessions」の項目があります。
今回は開発環境構築直後なので、PCからのセッションしか表示されていませんが、
Laravel Dusk 等でログインテストをすると、
セッションが追加されます。
「LOG OUT OTHER BROWSER SESSIONS」ボタンをクリックすると、
パスワード入力画面が表示されます。
パスワード入力してから「LOG OUT OTHER BROWSER SESSIONS」をクリックすると、
「This device」以外のセッションは全て強制ログアウト状態になります。
以上、おつかれさまでした。
コメント