02. ユーザー認証機能の追加
認証機能を追加します。
解説
ユーザー認証機能の追加について、すべきことは以下です。
- Breezeをインストールする。
- 認証ビュー、ルート、コントローラ、およびその他のリソースをアプリケーションへリソース公開する。
- マイグレーションする。
- 依存パッケージをインストールする。
- 認証ビューの動作確認する。
ユーザー認証機能の追加にあわせて、ダミーユーザー登録も実施します。ダミーユーザー登録について、すべきことは以下です。
- データベースシーダーを編集する。
- フレッシュマイグレーションする。
- ダミーユーザーのメールアドレスを取得する。
- ダミーユーザーでユーザー認証の動作確認する。
前提
「01. Laravelプロジェクトの作成」を実施していない場合は、実施します。
Breezeのインストール
Breezeパッケージのインストール
ログイン、ユーザー登録、パスワードのリセット、メールの検証、パスワードの確認など、Laravelの認証機能が実装された「Laravel Breeze」パッケージをインストールします。
以下のコマンドを実行し、「Laravel Breeze」パッケージをインストールします。
認証ビュー、ルート、コントローラ、およびその他のリソースをアプリケーションへリソース公開
「Laravel Breeze」パッケージをインストールしたら、以下のコマンドを実行し、認証ビュー、ルート、コントローラ、およびその他のリソースをアプリケーションへリソース公開します。
マイグレーション
以下のコマンドを実行し、マイグレーションを実行します。
依存パッケージのインストール
以下のコマンドを実行し、依存パッケージをインストールします。
ユーザー認証画面の確認
テスト用のWebサーバーの起動
以下のコマンドを実行し、テスト用のWebサーバーを起動します。
ホームページにアクセス
ブラウザで、以下のURLにアクセスします。
http://[テスト用のWebサーバーを起動したデバイスのIPアドレス]:8000
ページの右上に「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サーバーを終了します。
参考
- スターターキット 9.x Laravel
- 認証 9.x Laravel
- Artisanコンソール 9.x Laravel # tinker
- データベース:クエリビルダ 9.x Laravel
- コレクション 9.x Laravel # implode()
関連ページ
前項目:01. Laravelプロジェクトの作成
次項目:03. チャットページの作成