自分だけのクイズを作成しよう - Quipha
個人開発
個人開発
作ってみよう
作ってみよう
プログラミング
プログラミング
Laravel
Laravel
スポンサーリンク

【Laravel8/9/10】認証機能の導入 (Breeze)

Laravel

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

Laravelの認証機能(ログイン機構)を導入したいと思います。

というのも、Laravel7以前の導入の仕方と変わっていました。

今回は、シンプルで最小限の認証機能である、Breezeを導入します。

Jetstreamの方が、より堅牢な機能を持っているようですが、機会があれば別途、記事をまとめたいと思います。

参考
スターターキット 10.x Laravel
readouble.com

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

関連
【Laravel9】Langファイルを認識しない場合の対応
Laravel9でLangファイルについてうまく動作しない場合の対応をまとめました。
【Laravel】ローカル環境をそのまま外部公開【shareコマンド】
Laravelのローカル環境で作成しているアプリを、そのまま外部公開する方法をまとめます。
【Kindle本】Laravel 9 実践入門 を出版しました【Win/Mac対応】
「Laravel 9 実践入門: ～開発環境・実装・アプリ公開までの流れを完全網羅～」という書籍をKindleで出版いたしました。
【エックスサーバー】Laravelアプリからメール送信
エックスサーバーでLaravelの環境を構築し、アプリからメールを送信する手順をまとめました。
スポンサーリンク

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

Quipha
問題・問題集の作成、自分だけのクイズで勉強ができる！
chigusa-web.com

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。

【Kindle本】Laravel 9 実践入門 を出版しました【Win/Mac対応】
「Laravel 9 実践入門: ～開発環境・実装・アプリ公開までの流れを完全網羅～」という書籍をKindleで出版いたしました。
chigusa-web.com
2022/10/14

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

Laravelの構築

使用するバージョン
  • Windows 11 or macOS Monterey (M1)
  • Laravel Framework 8 or 9 or 10
  • Node.js
  • Composer

2022/02/09 Laravel9で問題なく動作することを確認しました。
2022/10/02 最新バージョンで確認しました。Viteに対応しました。
2023/03/11 Laravel10で確認しました。

Laravel Sailを使いプロジェクトを作成していますが、詳しくは以下の記事をご覧ください。

Windows
Laravel Sailで開発環境構築【Vite対応】
今回は、Laravel Sailを使って環境の構築を行いました。 SailはDockerですので、開発環境を簡単に用意することもできますし、カスタマイズすることも楽です。
chigusa-web.com
2023/05/12
Mac
【M1 Mac】Laravel Sailで開発環境構築【Vite対応】
Laravel Sailを使って環境の構築を行いました。 SailはDockerですので、開発環境を簡単に用意することもできますし、カスタマイズすることも楽です。
chigusa-web.com
2023/05/12

上記の手順まで済んでLaravelにアクセスすると、初期画面が表示されます。

Laravel Breezeのインストール

次に、Composerを使用してLaravel Breezeをインストールします。
プロジェクト直下で、以下のコマンドを実行します。

$ sail composer require laravel/breeze --dev

Composerでのインストールが完了したら、Artisanでのインストールを行います。
以下のコマンドにより、認証のためのビューやルート、コントローラなどが作成されます。

$ sail php artisan breeze:install

Laravel10では以下のように選択できるようになりました。
今回はBladeを更新するため「0」を入力し、Enterキーを押下しました。

Which stack would you like to install?

blade ............. 0
react ............. 1
vue ............... 2
api ............... 3

さらに以下の質問が聞かれますが、何も入力せずEnterキーを押下しました。

Would you like to install dark mode support? (yes/no) [no]
Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]

一部のファイルが更新され、また、認証に関する以下のファイルが追加されました。

認証用コントローラやビューなど
  • app/Http/Controllers/Auth/AuthenticatedSessionController.php
  • app/Http/Controllers/Auth/ConfirmablePasswordController.php
  • app/Http/Controllers/Auth/EmailVerificationNotificationController.php
  • app/Http/Controllers/Auth/EmailVerificationPromptController.php
  • app/Http/Controllers/Auth/NewPasswordController.php
  • app/Http/Controllers/Auth/PasswordResetLinkController.php
  • app/Http/Controllers/Auth/RegisteredUserController.php
  • app/Http/Controllers/Auth/VerifyEmailController.php
  • app/Http/Requests/Auth/LoginRequest.php
  • app/View/Components/AppLayout.php
  • app/View/Components/GuestLayout.php
  • resources/views/auth/confirm-password.blade.php
  • resources/views/auth/forgot-password.blade.php
  • resources/views/auth/login.blade.php
  • resources/views/auth/register.blade.php
  • resources/views/auth/reset-password.blade.php
  • resources/views/auth/verify-email.blade.php
  • resources/views/components/application-logo.blade.php
  • resources/views/components/auth-card.blade.php
  • resources/views/components/auth-session-status.blade.php
  • resources/views/components/auth-validation-errors.blade.php
  • resources/views/components/button.blade.php
  • resources/views/components/dropdown-link.blade.php
  • resources/views/components/dropdown.blade.php
  • resources/views/components/input.blade.php
  • resources/views/components/label.blade.php
  • resources/views/components/nav-link.blade.php
  • resources/views/components/responsive-nav-link.blade.php
  • resources/views/dashboard.blade.php
  • resources/views/layouts/app.blade.php
  • resources/views/layouts/guest.blade.php
  • resources/views/layouts/navigation.blade.php
  • routes/auth.php
  • tailwind.config.js
  • tests/Feature/AuthenticationTest.php
  • tests/Feature/EmailVerificationTest.php
  • tests/Feature/PasswordConfirmationTest.php
  • tests/Feature/PasswordResetTest.php
  • tests/Feature/RegistrationTest.php

テーブルのマイグレーションを行います。

$ sail artisan migrate

引き続き、CSSなどのアセットをビルドします。

$ sail npm install
$ sail npm run dev

最新のLaravelの場合、MixではなくViteへ置き換わっていますので、以下のように表示されます。
開発用のアセット(JS, CSS)は開発サーバー上に配置されます。

  VITE v3.1.3  ready in 285 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.23.0.7:5173/

  LARAVEL v9.32.0  plugin v0.6.1

  ➜  APP_URL: http://localhost

Laravel8の場合は、Mixになりますので、上記の表示はされません。

Viteについては以下の記事にもまとめました。

【Laravel】Viteの使い方
LaravelでViteを使ってみました。
chigusa-web.com
2023/10/09
スポンサーリンク

ログイン

以下のURLにアクセスします。

http://localhost/login

ログイン画面が表示されました。

ユーザを作成してみましょう。
ユーザ登録画面を開きます。任意でユーザを作成します。

http://localhost/register

ユーザ作成と同時にログインされ、ダッシュボード画面が表示されました。

ちなみにユーザ情報は、「users」テーブルに作成されます。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

【初心者向け】Laravelを始めよう
Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。
chigusa-web.com
2023/05/12

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう！
Laravelアプリケーションを外部公開する方法をまとめました。

【Heroku】Laravel+MySQLで作成したアプリを公開【完全版】
Herokuを使って、Laravelプロジェクトを公開する手順をまとめました。 個人で開発したアプリケーションを手軽に公開することもできます。
chigusa-web.com
2023/10/09
【エックスサーバー】Laravelで作成したWebアプリを公開
今回はエックスサーバーでLaravelの環境を構築し、Webアプリを公開する手順をまとめました。
chigusa-web.com
2023/10/09

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

【Laravel】敢えて試すSQLインジェクション【仕組みを知るには実装】
敢えてSQLインジェクションの脆弱性を含んだシステムを作成します。対策や仕組みを知るには実際に試してみましょう。人気のあるLaravelというフレームワークで試します。
chigusa-web.com
2023/05/12
【OWASP ZAP】インストールと基本的な使い方【Web脆弱性診断】
OWASP ZAPを使用して、Webの脆弱性診断を行ってみます。オープンソースで無料で使うことができます。
chigusa-web.com
2023/05/12

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

【GitHub】プロジェクトリポジトリにプッシュ
今回は、GitHubリポジトリへプッシュする手順をまとめました。
chigusa-web.com
2023/05/12
【Laravel】プロジェクトをGitHubからクローンした後にやること
今回は、GitHubのリポジトリにあるLaravelプロジェクトを、クローンして開発環境を構築しサイトが起動するところまでの手順をまとめました。
chigusa-web.com
2023/05/12

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

【GitHub Copilot】登録方法の解説と試してみた
GitHub Copilotを試してみました。登録方法の解説や、実際に試した結果をまとめました。
chigusa-web.com
2023/09/01

さいごに

簡単に認証機能が導入できました。
機会があれば、Jetstreamの認証機能の導入も試したいと思います。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

関連
【Laravel】ファサードの作成と実践・検証
Laravelのファサードを作成する手順をまとめました。独自のファサードを作成し、使い方もまとめましたので、実践に役立つと思います。
【ConoHa WING】Laravelアプリを公開
【ConoHa WING】Laravelアプリを公開
Laravelで作成したWebアプリケーションを、ConoHa WINGで構築し公開する手順をまとめました。
【FullCalendar】導入とスケジュールの登録【実装】
FullCalendarを使って、Webアプリケーションにカレンダー機能を実装してみました。カレンダー機能が簡単に導入でき、便利な機能が沢山ありますので、スケジュール機能の実装などに役立つと思います。
Laravelのデプロイ先
Laravelのデプロイ先
Laravelで作成したアプリのデプロイ先をまとめました。
＼オススメ／
スポンサーリンク

コメント

  1. Seiichi より:
    2022年7月5日 22:44

    本日 午後にLaravel Breezeのインストールの件で質問させていただいた者です

    あれから色々調べましたら $ sail npm run dev の後に、画面がストップしていたよう見えた現象ですがViteというのが立ち上がっていただけでした

    https://github.com/laravel/vite-plugin/issues/28

    $ sail npm run build を行うことにより
    public/build が作成され css js が見れるようになり
    通常どおりログイン機能を実行することができました

    返信