SAMURAI TERAKOYA

Laravel8 : Jetstreamを活用した認証機能(ログインなど)の実装〜動作確認

laravel

本記事では、laravel8.xにてjetstreamをインストールし、認証機能(ログイン/新規登録など)を実装する方法をご紹介させて頂いております。また、動作確認(ダッシュボードやプロフィールページ含む)も併せて掲載させて頂きましたので、参考になれば幸いです。

✅   laravel8.xにて、認証機能を実装する方法
✅   Jetstreamのインストール方法と使い方

Jetstreamとは??

laravelのバージョンが8になり、新たに認証機能が実装できるパッケージとして登場したJetstreamですが、インストールを行うだけで、以下のような6つの機能を扱うことが可能となっており、2パターンの開発技術(LivewireとInertia.js)が準備されてますため、アプリケーションを開発する上で、開発者のスキルにあわせて、使用するテンプレート言語を選択することが出来ます。

✅   ログイン/ログアウト
✅   新規アカウント登録
✅   本登録メールによる認証
✅   2段階認証
✅   セッション管理
✅   チームにおける管理

以下、公式ページになりますので、参考までに共有致します。

404 Not Found

LivewireとInertia.js

では、LivewireとInertia.jsではどのような違いがあり、何を基準に選択をすればいいのかという点についてお話しさせて頂ければと思います。

◇   Livewire

テンプレート言語としてLaravel Bladeを使用しており、動的なインターフェースを簡単に構築できるようにするライブラリになります。Vue.jsというJavaScriptフレームワークに経験がない方やjavaScript自体に苦手意識がある方は、こちらを選択しましょう。

◇   Inertia.js

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ボタンをクリックです。

Name : Sample
Email : sample123@test.com
Password : sampletest

ダッシュボードへ遷移したら、アカウントの登録は完了です。

ログイン/ログアウト機能

続いて、ログイン/ログアウト機能です。 現在は、ログインしている状態なので、ダッシュボード上からログアウトしましょう。

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

ログイン画面に遷移できたら、EmailとPasswordを入力し、ログインできるか試してみましょう。
LOGINボタンをクリックし、ダッシュボードへ遷移出来たらOKです。

プロフィールページ

最後に、ログインしたアカウントのプロフィールを確認しましょう。
ダッシュボードの右上から確認が可能です。

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

まとめ

8.x系になった今でもこれまで通りにlaravel/uiを用いた認証機能の実装も可能ですが、Jetstreamを活用することで、ログイン/ログアウト機能を含む6つの機能を使えるほか、開発環境に合わせたJavScriptパッケージの使い分けも可能です。かつ、ダッシュボード及びプロフィールページも用意されていることに加え、各ページにおけるレスポンシブデザインを含むレイアウトデザインも充実しているため、利用しようか迷っている方にもオススメです。

コメント

タイトルとURLをコピーしました