目次
組み込みの認証機能
Webアプリケーションには欠かせない認証の仕組。
- ユーザ登録画面
- ログイン画面
- ログアウト
これらが、Laravel6.0ではコマンド一発で生成できます。
Laravel6.0を覚える次の一歩として、これははずせないです。
今回は、認証機能を生成して、利用するDBのテーブルも用意して、きちんと動かせる状態にするところまでをやってみます。
それで、次回にそのソースを見て、基本的な構文などを理解していくという流れでやりたいと思います。
認証機能のインストールと使用手順
認証機能の説明と、使うための手順はこちらに詳しく書いてあります。
これを見ながらやれば問題なさそうです。
でも。
Laravel5.8までとは手順が変わったらしいですね。
とりあえず、一番簡単で「サクッと試せる」方法ってやつをやってみます。
Composerで「ui」をインストール
真新しくインストールした場合のみ必要です。
laravel/uパッケージをインストールしておく必要があります。
composer require laravel/ui --dev
laravel/ui パッケージがインストールされました。
php artisanコマンドでスカフィールド
上記ガイドには「認証に必要なルートとビューを全てあっという間にスカフォールドする」と書かれています。
スカフォールド（scaffold）・・つまり・・「必要なフォルダ構成やソースなどを自動的にセットして、すぐに試せる状態までもっていってくれる」わけです。
さて。
やってみます。
プロジェクトフォルダをカレントにして以下を実行するだけです。
php artisan ui vue --auth
実に簡単。
すぐ終わります。
上記の「vue」ってのは、JavaScriptの「vue.js」を使うということです。
なんですが。
JavaScript関連のパッケージについて、ここでダウンロードしません。
ただ、「package.json」というファイルを作るだけです。
npmコマンドで必要なjavascriptパッケージをダウンロード
JavaScript関連のダウンロードは、package.jsonにしたがって、npmコマンドを使って行います。
どのように実行するかは、コマンドの出力の最後のほうにでています。
必要部分だけ抜き出すと・・。
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」を実行します。
大量のパッケージがインストールされました。
今回インストールされたのは
"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」です。
いけた・・ということですね。
Node.jsは別途インストール必要かもしれない
ここで疑問がひとつ生まれます。
自分の環境には、既にNode.jsがインストールしてあり、npmコマンドもパスが通って使えるようになっていたから、問題ありませんでした。
でも、Node.jsがインストールされてない環境だとどうだったんでしょう？
ドキュメントのどこにも、Laravle6.0を使うなら、前提としてNode.jsも必要が・・ってことは書いてありません。
でも、vue.jsを使うなら、Node.jsが必要なのは当然だから、暗黙の了解事項として知っとけよ（笑）ということかもしれません。
とりあえず、Node.jsがインストールされてない環境だと、npmがエラーになって動かない・・のはありえると思います。
ということで、Node.jsをインストールした時の記事のリンクをおいときます。
生成されたルート設定の確認
routes/web.phpを見ると、以下の２つのルートが登録されてました。
Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');
上が認証画面そのもののルート。
下は認証が成功した時にデフォルトで遷移する画面へのパスです。
URLは「/register」をつければ良さそう。
つまり、今回の場合だと「http://localhost:8000/register」ですね。
認証用テーブルのマイグレーション
データベースを使うはずなのに、Create tableしてないぞ？と思ったら、上記のガイドにさらっと以下の記述がありました。
データベースをマイグレーションし、・・
おお・・そうだろうな・・。
ということで、MySQLをXAMPPのコンパネで起動しておきます。
マイグレーションのやり方はこちらを参考にします。
これによると「database/migrations」フォルダに必要なファイルがあるようです。
見てみると、確かに３つのファイルが生成されてます。
以下のコマンドを実行して、DBにテーブルを作ります。
php artisan migrate
すぐ、終わりました。
一応、DBも確認しときます。
おお、大丈夫そうですね。
認証機能の実行イメージ
ます、ビルトインサーバーを動かして。
php artisan serve
指定のURLへアクセスします。
すると、以下のような画面が表示されます。
背景色が白で、見えづらいですけど、ユーザ登録画面が表示されてます。
早速、ユーザ登録してみます。
ごく短い不適切なパスワードにしてみたら、ちゃんとエラーになります。
ちゃんと、登録しなおして、一度ログオフして、ログインしてみます。
デフォルトはEメールアドレスでのログインなんですね。
先ほど、登録したパスワードでやってみたら、きれいにログインできました。
ああ。
これは確かに楽だわ。
もちろん。
メッセージが英語だったり、背景色が真っ白でちょっと見えづらいとか、カスタマイズしたい点はありますが、一から作るのにくらべれば圧倒的に生産性は高いです。
今週はこんなところです。
ではでは。
