PHP バックエンド

Laravelのログイン/ユーザ登録/パスワードリセットとログイン画面をキレイに表示

こんにちは!TodoONadaの土門(@shimidai2100)です。

Laravelにはログイン機能が提供されております。

composer と artisanを利用することで誰でも簡単にログインユーザ登録パスワードリセット機能が提供されます。

またLaravelのマニュアルだとログイン画面のレイアウトがキレイに表示されないという事象があります。

その点もこの記事では解説していきたいと思います。

ログイン機能のダウンロードとインストールします。

composer を使用してLaravelパッケージ一覧からlaravel/uiを取得します。

取得後にartisanコマンドでインストールします。

composer require laravel/ui

php artisan ui vue --auth

実行ログは以下になります。

root@af9bfbf61ece:/work# php artisan migrate
Cannot load Xdebug - it was already loaded
Nothing to migrate.
root@af9bfbf61ece:/work# composer require laravel/ui
Cannot load Xdebug - it was already loaded
1/5: https://packagist.jp/p/provider-latest$24f7749cf0676d65fab6ddba4f0e6a1cf750171b7ca6277553f2b9f90bfc71d0.json
2/5: https://packagist.jp/p/provider-2020-04$c13f9a1d06a349ae30a2c4b6e4abb4f7ac61fa8f01d407f49f799d34c9303e7e.json
3/5: https://packagist.jp/p/provider-2017$e120a60fa9e383b04583c4c98d214898b1831dd8a3a01087e43018913f79e008.json
4/5: https://packagist.jp/p/provider-2019-07$d5fba403bb091c37fc431ce187e648a7f2d4c5298baf2cb72c6dfba59c2da492.json
5/5: https://packagist.jp/p/provider-2020-01$08e20ed00139c45682220c59179291a6cafb36281f29c126180f648e0afebc55.json
Finished: success: 5, skipped: 0, failure: 0, total: 5
Using version ^2.0 for laravel/ui
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
1/1: https://codeload.github.com/laravel/ui/legacy.zip/15368c5328efb7ce94f35ca750acde9b496ab1b1
Finished: success: 1, skipped: 0, failure: 0, total: 1
Package operations: 1 install, 0 updates, 0 removals
- Installing laravel/ui (v2.0.3): Loading from cache
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.
31 packages you are using are looking for funding.

root@af9bfbf61ece:/work# php artisan ui vue --auth
Cannot load Xdebug - it was already loaded
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

 

以下の画面のようにLOGIN REGISTER のボタンが出てくれば正常に動作せています。

ログイン画面のキレイに表示される

ただ実際にログイン画面に遷移してみると以下のようにCSSが反映されておらず、キレイに表示されていません。

 

これはLaravelのパッケージが不足しているために発生します。

解消するためにはnpmでWebpackパッケージをインストールしてあげましょう。

npm install

npm run dev

以下が実行ログです。

root@af9bfbf61ece:/work# npm install
npm WARN npm npm does not support Node.js v10.19.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN notice [SECURITY] set-value has the following vulnerability: 1 high. Go here for more details: https://www.npmjs.com/advisories?search=set-value&version=2.0.1 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.

added 1094 packages from 494 contributors in 140.864s
root@af9bfbf61ece:/work# npm run dev
npm WARN npm npm does not support Node.js v10.19.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/

> @ dev /work
> npm run development

npm WARN npm npm does not support Node.js v10.19.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/

> @ development /work
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 14372ms                                                                                                                                                       7:36:00 PM

       Asset     Size   Chunks             Chunk Names
/css/app.css  177 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.4 MiB  /js/app  [emitted]  /js/app

 

完了すると以下のようにキレイに表示することができます。

関連記事

-PHP, バックエンド

Copyright© スタートアップIT企業社長のブログ , 2020 All Rights Reserved.