"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

はじめてLaravel6.0:認証機能を「php artisan ui vue --auth」で生成/Windows10

Laravel6.0を覚える次のステップとして、プリセットで用意されているコマンド一発で生成できる「認証機能」を使えるようにしてみます

f:id:arakan_no_boku:20191003220222p:plain


はじめに

 

Webアプリケーションには欠かせない認証の仕組。

  • ユーザ登録画面
  • ログイン画面
  • ログアウト

これらが、Laravel6.0ではコマンド一発で生成できます。

Laravel6.0を覚える次の一歩として、これははずせないです。

今回は、認証機能を生成して、利用するDBのテーブルも用意して、きちんと動かせる状態にするところまでをやってみます。

それで、次回にそのソースを見て、基本的な構文などを理解していくという流れでやりたいと思います。

 

認証機能を生成する

 

認証機能の説明と、使うための手順はこちらに詳しく書いてあります。

readouble.com

これを見ながらやれば問題なさそうです。

でも。

Laravel5.8までとは手順が変わったらしいですね。

とりあえず、一番簡単で「サクッと試せる」方法ってやつをやってみます。

 

Composerで「ui」をインストール

 

真新しくインストールした場合のみ必要です。

laravel/uパッケージをインストールしておく必要があります。

composer require laravel/ui --dev

f:id:arakan_no_boku:20191005105949p:plain

laravel/ui パッケージがインストールされました。

 

php artisanコマンドでスカフィールド

 

上記ガイドには「認証に必要なルートとビューを全てあっという間にスカフォールドする」と書かれています。

スカフォールド(scaffold)・・つまり・・「必要なフォルダ構成やソースなどを自動的にセットして、すぐに試せる状態までもっていってくれる」わけです。

さて。

やってみます。

プロジェクトフォルダをカレントにして以下を実行するだけです。

php artisan ui vue --auth

実に簡単。

すぐ終わります。

上記の「vue」ってのは、JavaScriptの「vue.js」を使うということです。

なんですが。

JavaScript関連のパッケージについて、ここでダウンロードしません。

ただ、「package.json」というファイルを作るだけです。

 

npmコマンドで必要なjavascriptパッケージをダウンロード

 

JavaScript関連のダウンロードは、package.jsonにしたがって、npmコマンドを使って行います。

どのように実行するかは、コマンドの出力の最後のほうにでています。

f:id:arakan_no_boku:20191005112049p:plain

必要部分だけ抜き出すと・・。

Please run "npm install && npm run dev" to compile your fresh scaffolding.

どうやら

  • npm install
  • npm run dev

を実行しろってことみたいです。

Node.jsの世界ですね。

npmとは「Node.js」用のパッケージ管理ツールですから。

そして。

  • 「npm install」は、package.jsonに書かれた設定に基づいて、必要なJavaScriptパッケージをダウンロード・インストールするコマンド。
  • 「npm run dev」は、それらをコンパイルして実行可能な状態にするコマンド。

です。

やってみましょう。

まず「npm install」を実行します。

f:id:arakan_no_boku:20191005112425p:plain

大量のパッケージがインストールされました。

今回インストールされたのは

"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"

でした。

続いて「npm run dev」です。

f:id:arakan_no_boku:20191005112620p:plain

いけた・・ということですね。 

 

Node.jsを別途インストール必要かもしれないな

 

ここで疑問がひとつ生まれます。

自分の環境には、既にNode.jsがインストールしてあり、npmコマンドもパスが通って使えるようになっていたから、問題ありませんでした。

でも、Node.jsがインストールされてない環境だとどうだったんでしょう?

ドキュメントのどこにも、Laravle6.0を使うなら、前提としてNode.jsも必要が・・ってことは書いてありません。

でも、vue.jsを使うなら、Node.jsが必要なのは当然だから、暗黙の了解事項として知っとけよ(笑)ということかもしれません。

とりあえず、Node.jsがインストールされてない環境だと、npmがエラーになって動かない・・のはありえると思います。

ということで、Node.jsをインストールした時の記事のリンクをおいときます。

arakan-pgm-ai.hatenablog.com

 

生成されたルート設定の確認

 

routes/web.phpを見ると、以下の2つのルートが登録されてました。

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

 上が認証画面そのもののルート。

下は認証が成功した時にデフォルトで遷移する画面へのパスです。

URLは「/register」をつければ良さそう。

つまり、今回の場合だと「http://localhost:8000/register」ですね。

 

データベースのマイグレーションをやっておく

 

データベースを使うはずなのに、Create tableしてないぞ?と思ったら、上記のガイドにさらっと以下の記述がありました。

データベースをマイグレーションし、・・

おお・・そうだろうな・・。

ということで、MySQLをXAMPPのコンパネで起動しておきます。

f:id:arakan_no_boku:20191005105419p:plain

 

マイグレーションのやり方はこちらを参考にします。

readouble.com

これによると「database/migrations」フォルダに必要なファイルがあるようです。

見てみると、確かに3つのファイルが生成されてます。

f:id:arakan_no_boku:20191005122525p:plain

以下のコマンドを実行して、DBにテーブルを作ります。

php artisan migrate

すぐ、終わりました。

f:id:arakan_no_boku:20191005123328p:plain

一応、DBも確認しときます。

f:id:arakan_no_boku:20191005123250p:plain

おお、大丈夫そうですね。

 

さて、認証機能を動かしてみよう

 

ます、ビルトインサーバーを動かして。

php artisan serve 

指定のURLへアクセスします。

http://localhost:8000/register 

すると、以下のような画面が表示されます。

f:id:arakan_no_boku:20191005123820p:plain

背景色が白で、見えづらいですけど、ユーザ登録画面が表示されてます。

早速、ユーザ登録してみます。

f:id:arakan_no_boku:20191005124204p:plain

ごく短い不適切なパスワードにしてみたら、ちゃんとエラーになります。

f:id:arakan_no_boku:20191005124354p:plain

ちゃんと、登録しなおして、一度ログオフして、ログインしてみます。

f:id:arakan_no_boku:20191005124701p:plain

デフォルトはEメールアドレスでのログインなんですね。

先ほど、登録したパスワードでやってみたら、きれいにログインできました。

f:id:arakan_no_boku:20191005124859p:plain

ああ。

これは確かに楽だわ。

もちろん。

メッセージが英語だったり、背景色が真っ白でちょっと見えづらいとか、カスタマイズしたい点はありますが、一から作るのにくらべれば圧倒的に生産性は高いです。

これが、Laravelが人気な理由なんですね。

少し、得心しました。

今週はこんなところです。

ではでは。