Laravel#2 ユーザー情報と認証機能の実装(7.x)
「あるユーザーの投稿一覧を表示する」機能を実装したい。
すると後から実装するくらいなら、先に実装した方が応用利くのではないかと思って序盤からいきなり取り組もうと考えた次第です。
そのためにはまずユーザー情報のテーブルが必要、ですので今回はユーザー情報テーブルとついでに認証機能を追加したいと思います。
実行環境
本記事を書いているのが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 devはCSSファイルのコンパイルを行ってます。
npm install && npm run dev
テーブルの作成
php artisan ui vue --authを実行した時点でmigrationファイルは自動的に作成されています。
通常通りmigrateを行えば問題ありません。
$ php artisan migrate
認証機能をテスト
php artisan serveでローカルサーバーを立ち上げてhttp://127.0.0.1:8000/にアクセスしましょう。
以下のページが表示されているはずです。
右上にあるLoginとRegisterボタンを押すとしっかりログインや登録画面に飛びます。
実はphp artisan ui vue --authを実行した時点でLaravelプロジェクト内のファイルが以下のように変更されています。
・\app\Http\ControllersにHomeController.phpが追加
・\app\Http\Controllers\Authに複数のコントローラが生成
・\routesのweb.phpにHomeControllerに関する記述が追加され、自動でルーティングされている
・\resources\views内のファイルもログイン機能実装に合わせて更新
なのでトップ画面右上にログイン/登録ボタンが追加され、それらを押すときちんとページが飛ぶようになっております。