NO IMAGE

【Laravel】サンプルプログラム ログイン機能作成(Laravel ui)

migrateコマンドを使用して、Databaseにテーブルを作成します。
また、Laravelの拡張機能を用いて、ほとんどコーディングを行わずにログイン機能を作成します。

事前準備

今回は「npm」コマンドを利用する必要があります。
Node Package Managerの略称で、Node.jsのパッケージ(便利機能)を管理するためのものになっています。
詳細は省きますので、興味がある方は「Node.js」についても調べてみてください。
公式サイトより、インストーラをダウンロードして実行することでインストールできます。

Laravelのログイン機能を実装

それではログイン機能の実装に入ります。
基本的にはコマンドの実行でほとんど終了してしまうので、コーディングは不要です。

パッケージの(laravel/ui)インストール

コマンドを実行して、インストールを行っていきます。

composer require laravel/ui:^1.0

ログイン画面の作成

パッケージがインストールできると、php artisanコマンドでuiのメソッドが呼び出せるようになります。
Vueを用いたログイン機能作成のメソッドを呼び出していきます。

php artisan ui vue --auth

migrateの実行

migrateコマンドを実行して、必要なテーブルを作成します。

php artisan migrate
ここでエラーとなった場合は、.envのDB接続情報関連の記述ミスが考えられます。
記述内容を確認してみましょう。
Vueなどの準備
コマンドを実行して、Vueなどの必要なパッケージのインストールとビルドを行います。
npm install
npm run dev

※本番環境の場合は「npm run dev」ではなく、「npm run production」となります。

コマンドが実行できたら、システムを起動してみましょう。

ログイン機能の確認

システムを起動してトップページを開くと、右上に「LOGIN」と「REGISTER」のリンクがあるかと思います。
コチラをクリックすることで、ログイン機能を表示することが可能です。

ログインページ

「LOGIN」をクリックするとログインページが表示されます。
シンプルなデザインですが、このまま使っても差し支えない程度には整ったデザインになっていますね。
今はユーザが登録されていないのでログインができません。ユーザを登録した後にログイン機能を確認しましょう。

初期状態のログインページ

ユーザ登録

「REGISTER」をクリックすると、ユーザ登録ページが表示されます。
機能のコーディングはしていませんが、この登録機能もすでに使える状態になっています。
適当に入力して登録後、DBの中身をのぞいてみてください。

パスワードは「入力した内容」では登録されません。
入力した内容を一定ルールで変換して登録します。データ流出などの際にパスワードが知られないようにするための工夫です。
ログインの際は登録時に入力した内容で問題ありません。
つまり、パスワードを忘れてしまうとDBを直接見ても分からないので注意しましょう。
SQLiteのデータを確認するためには、別途ソフトが必要となります。
お好みでソフトをご用意ください。私は「A5 Mk2」を使用しています。
ユーザ登録を行うと自動でログインされます。

ログアウト

ログイン機能を確認するために、一度ログアウトしましょう。ログアウト機能もすでに実装されている状態になっています。
右上のユーザ名をクリックして「Logout」からログアウトを行うことが出来ます。

ログイン

それではログインページログインをしてみましょう。
先ほど登録した、メールアドレスとパスワードを使用してログインが行えます。

ログインではメールアドレスではなくユーザ名を使用したい、あるいはどちらも使用したいという場合もあります。
コチラはログイン機能のカスタマイズを行うことで可能となっています。

最後に

今回はここまでとなります。
ログイン機能はシステムの中でも軽い機能として見積もられるのですが、実際に作るのは結構めんどくさかったりします。
「ログインがあるなら、ログアウトが必要」「ログイン者の情報を別の画面で使用したい」といったように、付随してくる機能があるので、考えることが増えがちになってしまいます。
そんなログイン機能をノーコードでここまで実装できるので、「Laravel ui」とても素晴らしいものだと思います。
今回はこのまま使用していきますが、カスタマイズも可能なので必要に応じてカスタマイズを行ってください。