ホーム > プログラミング > 他のユーザーがログイン中かどうかを表示するアプリを作る > 02. ユーザー認証機能の追加

02. ユーザー認証機能の追加

認証機能を追加します。

解説

ユーザー認証機能の追加について、すべきことは以下です。

ユーザー認証機能の追加にあわせて、ダミーユーザー登録も実施します。ダミーユーザー登録について、すべきことは以下です。

前提

01. Laravelプロジェクトの作成」を実施していない場合は、実施します。

Breezeのインストール

Breezeパッケージのインストール

ログイン、ユーザー登録、パスワードのリセット、メールの検証、パスワードの確認など、Laravelの認証機能が実装された「Laravel Breeze」パッケージをインストールします。

以下のコマンドを実行し、「Laravel Breeze」パッケージをインストールします。

認証ビュー、ルート、コントローラ、およびその他のリソースをアプリケーションへリソース公開

「Laravel Breeze」パッケージをインストールしたら、以下のコマンドを実行し、認証ビュー、ルート、コントローラ、およびその他のリソースをアプリケーションへリソース公開します。

マイグレーション

以下のコマンドを実行し、マイグレーションを実行します。

依存パッケージのインストール

以下のコマンドを実行し、依存パッケージをインストールします。

ユーザー認証画面の確認

テスト用のWebサーバーの起動

以下のコマンドを実行し、テスト用のWebサーバーを起動します。

ホームページにアクセス

ブラウザで、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000/chat



ページの右上に「Log in」と「Register」のリンクが追加されました。

「Log in」リンクをクリックすると、「Log in」ページに遷移します。


「Register」リンクをクリックすると、「Register」ページに遷移します。

テスト用のWebサーバーの終了

動作を確認したら、「ctrl + c」を押下し、起動した開発用のWebサーバーを終了します。

ダミーユーザーの作成

続いて、ダミーユーザーを作成します。

データベースシーダーの編集

以下のコマンドを実行し、データベースシーダー(データベース初期値設定)のファイルを開きます。



内容を以下のようにします。



解説)
ダミーユーザーを10人分作成するコードは既に記述されていますが、コメントアウトされています。
ダミーユーザーを10人分作成するコードをアンコメントします。

「ctrl + o」を押下し、ファイルを上書き保存します。
「ctrl + x」を押下し、ファイルを閉じます。

フレッシュマイグレーション

以下のコマンドを実行し、フレッシュマイグレーションを実行し、合わせてシード(初期値設定)も実行します。



解説)

・migrate:fresh
データベースから全テーブルをドロップし、それからmigrateコマンドを実行します。
・--seed
migrate後に、シード(初期値設定)を実行します。

ダミーユーザーのメールアドレスの取得

作成したダミーユーザーのメールアドレスを取得します。

以下のコマンドを実行し、作成したダミーユーザーのメールアドレスを取得します。



解説)

・php artisan tinker
Laravelの対話型実行環境「tinker」を起動します。
・App\Models\User::orderBy('id)->get()
データベースのUserテーブルから「id」順でデータをすべて取得します。
・->implode('email', " ");
implode関数は、コレクション内のアイテムを連結します。
コレクション内のデータの中から、第1引数で指定されたアイテムを、第2引数をセパレータとして、連結します。
今回の使用方法においては、ユーザーデータ内の「email」を、「(スペース)」をセパレータとして、連結します。



データベースに登録されているユーザーのメールアドレスの一覧が表示されます。

表示されたメールアドレスの一覧をメモ帳等に控えておきます。

以下のコマンドを実行し、tinkerを終了します。

ユーザー認証機能の動作確認

テスト用のWebサーバーの起動

以下のコマンドを実行し、テスト用のWebサーバーを起動します。

ホームページにアクセス

ブラウザで、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000

ユーザー認証に成功のケースの動作確認

ページ右上の「Log in」リンクをクリックし、「Log in」ページに遷移します。

「Email」欄に、適当なダミーユーザーのメールアドレスを入力。
「Password」欄に、「password」と入力。(※ダミーユーザーのパスワードは全員「password」でユーザー登録されています)
「Log in」ボタンをクリックします。



ユーザー認証に成功し、ログイン状態となり、「You're logged in!」と表示されます。
メールアドレスとパスワードが登録されているユーザの情報と合致している場合は、ユーザー認証に成功し、ログイン状態となります。

右上のユーザー名の横のプルダウンをクリックし、「Log out」をクリックすると、ログイン状態は解除されます。

ユーザー認証に失敗のケースの動作確認

ページ右上の「Log in」リンクをクリックし、「Log in」ページに遷移します。

「Email」欄に、適当なダミーユーザーのメールアドレスを入力。
「Password」欄に、「password」以外を入力。
「Log in」ボタンをクリックします。



ユーザー認証に失敗し、ログインできず、「Whoops! Something went wrong! These credentials do not match our records」と表示されます。
メールアドレスとパスワードが登録されているユーザの情報と合致しない場合は、ユーザー認証に失敗し、ログインできません。

テスト用のWebサーバーの終了

動作を確認したら、「ctrl + c」を押下し、起動した開発用のWebサーバーを終了します。

参考

関連ページ

前項目:01. Laravelプロジェクトの作成

次項目:03. チャットページの作成


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.