
本記事では、laravel8.xにてjetstreamをインストールし、認証機能(ログイン/新規登録など)を実装する方法をご紹介させて頂いております。また、動作確認(ダッシュボードやプロフィールページ含む)も併せて掲載させて頂きましたので、参考になれば幸いです。
✅ Jetstreamのインストール方法と使い方
Jetstreamとは??
laravelのバージョンが8になり、新たに認証機能が実装できるパッケージとして登場したJetstreamですが、インストールを行うだけで、以下のような6つの機能を扱うことが可能となっており、2パターンの開発技術(LivewireとInertia.js)が準備されてますため、アプリケーションを開発する上で、開発者のスキルにあわせて、使用するテンプレート言語を選択することが出来ます。
✅ 新規アカウント登録
✅ 本登録メールによる認証
✅ 2段階認証
✅ セッション管理
✅ チームにおける管理
以下、公式ページになりますので、参考までに共有致します。
LivewireとInertia.js
では、LivewireとInertia.jsではどのような違いがあり、何を基準に選択をすればいいのかという点についてお話しさせて頂ければと思います。
テンプレート言語としてLaravel Bladeを使用しており、動的なインターフェースを簡単に構築できるようにするライブラリになります。Vue.jsというJavaScriptフレームワークに経験がない方やjavaScript自体に苦手意識がある方は、こちらを選択しましょう。
Livewireとは異なり、テンプレートとなる言語として、Vue.jsを用いており、Vue.jsにおけるアプリケーション開発に近い形で開発を行うことができるライブラリとなっております。Vue.jsを用いた開発に慣れている方に最適であり、特徴としては、単一のWebページでコンテンツ切り替えを行い、ブラウザの挙動に縛られないアプリケーション(SPA)の開発に長けています。
インストール
Jetstreamのインストール

では、JetStreamのインストールを行なっていきましょう。なお、コマンドの入力は、Windowsの場合は、コマンドプロンプト, Macはターミナルより行いましょう。
※ composer及びlaravelのプロジェクトは作成済みであることが前提になっておりますので、ご注意くださいませ。
composer require laravel/jetstream
Livewireのインストール

今回は、開発上にてVue.jsを用いない方向ですので、Inertia.jsではなく、Livewireのインストールを行なっていきます。
php artisan jetstream:install livewire
データーベース設定

インストールが完了しましたら、もしデータベースの設定を終えていない方は、以下の手順で作業を実施しましょう。
今回は、シンプルにSQL言語としては、SQLiteを用いていきますが、既にMySQlの環境が整っている場合は、MySQLを用いて頂いてもOKです。
laravelのプロジェクトフォルダ内から.envファイルを見つけ、SQL言語の変更する

以下のコマンドをWindowsの場合は、コマンドプロンプト, Macはターミナルにて入力し、マイグレーションの実行をする
php artisan migrate
無事にエラーもなく、マイグレーションが完了したら終了です。
動作確認

では、参考までにはなりますが、新規アカウント登録/ログイン/ログアウトの各機能の確認をしていこうと思います。
まず、以下のコマンドでサーバーを起動しましょう。
php artisan serve
ブラウザで確認時に、以下と同じようになればOKです。
新規アカウント登録機能
Registerをクリックし、新規アカウント登録画面へと移動

以下の内容でアカウントを登録してみましょう。 入力が終わったら、REGISTERボタンをクリックです。
Email : sample123@test.com
Password : sampletest
ダッシュボードへ遷移したら、アカウントの登録は完了です。
ログイン/ログアウト機能
続いて、ログイン/ログアウト機能です。 現在は、ログインしている状態なので、ダッシュボード上からログアウトしましょう。

正常にログアウトが出来たら、Loginボタンをクリックしましょう。

ログイン画面に遷移できたら、EmailとPasswordを入力し、ログインできるか試してみましょう。
LOGINボタンをクリックし、ダッシュボードへ遷移出来たらOKです。
プロフィールページ
最後に、ログインしたアカウントのプロフィールを確認しましょう。
ダッシュボードの右上から確認が可能です。

以下のプロフィールページへ遷移出来たらOKです。
コメント