Self-Curation

新卒社会人で営業マンになりました

Laravel#2 ユーザー情報と認証機能の実装(7.x)

f:id:scuration:20200802232227p:plain

「あるユーザーの投稿一覧を表示する」機能を実装したい。

すると後から実装するくらいなら、先に実装した方が応用利くのではないかと思って序盤からいきなり取り組もうと考えた次第です。

そのためにはまずユーザー情報のテーブルが必要、ですので今回はユーザー情報テーブルとついでに認証機能を追加したいと思います。

実行環境

本記事を書いているのが2020年7月で環境は以下のようになります。

OS:Windows10

XAMPP
PHP:7.4.8
・DB:mariaDB(myphpadmin:5.0.2)
Apache:2.4.43

Laravel Framework 7.21.0

ユーザー情報のテーブルを作成

ComposerでLaravelプロジェクトを作成すると、実は最初からUser.phpというモデルファイルを用意してくれてます。


以下migrateコマンドを実行することでusersというテーブルが作成されます。

C:\PHP\SampleProject>php artisan migrate


初期状態のusersテーブルには以下8つのカラムが存在するので確認してみてください。

id、name、email、email_veifield_at、password、remember_token、created_at、updated_at

簡単な認証機能の実装

laravel/uiのインストール


Laravel5まではphp artisan make:authを叩くだけでユーザー認証機能を実装可能でしたが、6以降で出来なくなったようです。


どういうことかと申し上げると、
・5.xまではBootstrapとVueというJavascriptフレームワークを標準提供していた。
→ログイン機能実装に使われており、5.xでは最初から利用可能な設定になっていた。
・6.xではBootstrapやVueといったJavascriptフレームワークが標準で含まれないので手動インストールが必要になる
ということです。

まずは以下のコマンドを叩いてComposerからlaravel/uiパッケージをインストールしましょう。

$ composer require laravel/ui


このように差分が適応されます。

Using version ^2.1 for laravel/ui
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing laravel/ui (v2.1.0): Downloading (100%)
Writing lock file
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/tinker
Discovered Package: laravel/ui
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
46 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

認証スカフォールドのインストール


スカフォールドとは簡単に言うとひな形(テンプレート、フレームワーク)のことです。


今回のケースでは認証に必要なフロントエンド機能一式(認証スカフォールド)を作成します。
この認証スカフォールドが先ほどインストールしたLaravel/uiパッケージに含まれているという訳でございます。


以下のコマンドを実行しましょう。

$ php artisan ui vue --auth


このように表示されれば成功です。
package.jsonファイルにvueの認証スカフォールドが追加されました。

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.


npm install && npm run devを実行してください」と表記されているので指示通り実行します。
npm installはpakage.jsonに追加されたパッケージをインストール、npm run devCSSファイルのコンパイルを行ってます。

npm install && npm run dev

テーブルの作成

php artisan ui vue --authを実行した時点でmigrationファイルは自動的に作成されています。

通常通りmigrateを行えば問題ありません。

$ php artisan migrate

認証機能をテスト

php artisan serveでローカルサーバーを立ち上げてhttp://127.0.0.1:8000/にアクセスしましょう。


以下のページが表示されているはずです。

f:id:scuration:20200810183428p:plain

右上にあるLoginとRegisterボタンを押すとしっかりログインや登録画面に飛びます。


実はphp artisan ui vue --authを実行した時点でLaravelプロジェクト内のファイルが以下のように変更されています。

・\app\Http\ControllersにHomeController.phpが追加

・\app\Http\Controllers\Authに複数のコントローラが生成

・\routesのweb.phpにHomeControllerに関する記述が追加され、自動でルーティングされている

・\resources\views内のファイルもログイン機能実装に合わせて更新



なのでトップ画面右上にログイン/登録ボタンが追加され、それらを押すときちんとページが飛ぶようになっております。