Laravel Sail にてユーザ認証機能を使ってみる

2023.05.17

概要

Laravel Breeze を利用してユーザ認証機能を確認してみる。

参考Webページ

Laravel Breeze について

ログイン、ユーザ登録、パスワードリセット、メール確認、パスワード確認などの認証機能と、
ユーザ自身が名前・メールアドレス・パスワードを更新できる
シンプルなプロファイルページを含む機能を、小さくシンプルにLaravelへ実装したもの。

Tailwind CSSでスタイルしたシンプルなBladeテンプレートで構成されているらしい。

インストール

パッケージを追加する

$ cd プロジェクトフォルダ
$ ./vendor/bin/sail composer require laravel/breeze --dev

上記コマンドを実行後、次の結果が表示される。

Info from https://repo.packagist.org: #StandWithUkraine
./composer.json has been updated
Running composer update laravel/breeze
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking laravel/breeze (v1.21.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading laravel/breeze (v1.21.0)
  - Installing laravel/breeze (v1.21.0): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.  

  laravel/breeze .............................................................................................................................. DONE
  laravel/sail ................................................................................................................................ DONE
  laravel/sanctum ............................................................................................................................. DONE
  laravel/tinker .............................................................................................................................. DONE
  nesbot/carbon ............................................................................................................................... DONE
  nunomaduro/collision ........................................................................................................................ DONE
  nunomaduro/termwind ......................................................................................................................... DONE
  spatie/laravel-ignition ..................................................................................................................... DONE

81 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found
Using version ^1.21 for laravel/breeze

インストール

$ ./vendor/bin/sail artisan breeze:install

上記コマンド実行後、いくつかENTERキーなどを押して、次の結果が表示されて完了する。

  Which stack would you like to install?
  blade ............................. 0  
  react ............................. 1  
  vue ............................... 2  
  api ................................ 3  
❯ 0 ※ 0を入力してENTER。 
  Would you like to install dark mode support? (yes/no) [no]
❯ ※ 何も入力せずENTER（noを選択したことになる） 
  Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]
❯ ※ 何も入力せずENTER（noを選択したことになる） 
   INFO  Installing and building Node dependencies.  
added 112 packages, and audited 113 packages in 17s
20 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
> build
> vite build
vite v4.3.7 building for production...
✓ 49 modules transformed.
public/build/manifest.json             0.26 kB │ gzip:  0.13 kB
public/build/assets/app-74be5a14.css  30.46 kB │ gzip:  5.88 kB
public/build/assets/app-e7c8c463.js   69.13 kB │ gzip: 25.73 kB
✓ built in 1.17s
   INFO  Breeze scaffolding installed successfully.

migrateコマンドでDBにテーブルを作成

次のコマンドを実行すると、
プロジェクト内のマイグレーションファイルの内容をDBに反映させることができる。

$ ./vendor/bin/sail artisan migrate

上記コマンドを実行すると、次の結果が表示される。

   INFO  Preparing database.  
  Creating migration table ........................ 20ms DONE
   INFO  Running migrations.  
  2014_10_12_000000_create_users_table ........................ 38ms DONE
  2014_10_12_100000_create_password_reset_tokens_table ........................ 43ms DONE
  2019_08_19_000000_create_failed_jobs_table ........................ 30ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ........................ 43ms DONE

完了後に5つのテーブルが作成されるので、phpmyadminから確認すると良い。

機能の確認

http://localhost/へWebブラウザでアクセスすると、
右上にログインとレジスターと書かれたリンクが2つできる。

レジスターをクリックし、適当な情報を入力して登録すると、
その作成したアカウントのダッシュボードが表示される。

プロファイルページを表示することもでき、
ユーザ名やメールアドレス等の変更、アカウントの削除などの操作ができる。

アカウントを作成した後、phpmyadminのusersテーブルにて、
DBにも反映されていることを確認できる。

補足

インストール時に選択するstackについて

  • blade
    Laravelに含まれるテンプレートエンジン。
  • react
    Meta社とコミュニティによって開発されているUI開発のための、JavaScriptライブラリ。
    シングルページアプリケーションやモバイルアプリケーションの
    開発におけるベースとして使用できるらしい。
  • vue
    Webアプリケーション（シングルページアプリケーションも可）の
    UI開発のためのOSSのJavaScriptフレームワーク。
  • api
    Next.jsなどを利用する時に使うらしい。
    Next.jsはNode.js上に構築されたOSSのReactのフレームワークらしい。
    サーバサイドスクリプトや静的Webサイトの生成などの、
    ReactベースのWebアプリケーション機能を有効にするらしい。

コメント

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