内容
以下の順番にまとめます。
1. MacへのXAMPP+Laravelインストール
2. ユーザログイン機能の追加 ←いまここ
[3. MVCとルーティングの説明]
(https://qiita.com/sonrisa/items/809adf872e6fb3657f81)
[4. ユーザリストの表示]
(https://qiita.com/sonrisa/items/929486929ed8d851a24e)
[5. ユーザリストのペジネーション表示]
(https://qiita.com/sonrisa/items/86efb8caebe207ab8fa8)
6. ユーザ管理APIの追加
7. Vue.jsとAPIベースのユーザ管理アプリの追加準備
8. Vue.jsとAPIベースのユーザ管理アプリの追加
[9. Vue.jsとAPIベースのユーザ管理アプリへのペジネーション追加]
(https://qiita.com/sonrisa/items/d58c56b638924d8c6810)
[10. APIへのJWTAuth認証の追加]
(https://qiita.com/sonrisa/items/97c1f3e8491f76dc2ce2)
11. Vue.jsとAPIベースのユーザ管理アプリへの認証の追加
2. ユーザログイン機能の追加
先程作成したLaravelプロジェクト「userauth」にユーザ登録とログインの機能を追加します。
2.1. Laravelプロジェクトに認証機能を追加します。
$ php artisan make:auth
Authentication scaffolding generated successfully.
2.2. AppServiceProvider.phpの修正
MySQLのver5.7.7より前では、PRIMARY_KEYおよびUNIQUE_KEYを付けたカラムには最大767bytesまでしか入らないのですが、Laravel5.4からは標準charasetがutf8mb4となったことで1文字あたりの最大byte数が4bytesに増えたこともあり、デフォルトのままではエラーが発生します。そのため、「app/Providers/AppServiceProvider.php」を以下のとおり修正します。
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema; // 追加
...(中略)
public function boot()
{
Schema::defaultStringLength(191); // 追加
}
...(中略)
2.3. Laravelの環境設定ファイルである.envファイルの編集
プロジェクトフォルダの直下にLaravelプロジェクトがグローバルで利用する環境変数を設定するファイル.envファイルがあります。ユーザ登録のためのデータベースとテーブルを用意する必要がありますので、下記の通りMySQLデータベースに関連する情報を設定します。
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=test # インストール時にテスト用に作成されたデータベース。必要に応じてcreate databaseしたデータベースをセットしてもかまいません。
DB_USERNAME=root # 本番ではアクセス用のユーザを作成が推奨されますが、ここでは簡単にrootを使います。
DB_PASSWORD=secret # 「Laravel5.5こと始め 〜1. MacへのXAMPP+Laravelインストール〜」で設定したパスワードを設定します。
2.4. Laravelのマイグレーション機能を使ってユーザテーブルを作成
Laravelは非常に高度なデータベースのマイグレーション機能をもっています。認証機能を有効にすると「database/migration」フォルダに下記のPHPファイルがコピーされます。
$ ls database/migrations/
2014_10_12_000000_create_users_table.php 2014_10_12_100000_create_password_resets_table.php
名前から推測できるとおり、「2014_10_12_000000_create_users_table.php」はユーザ情報を保存する「users」テーブルを作成するPHPスクリプトで、「2014_10_12_100000_create_password_resets_table.php」はパスワードリセット用のトークンを保存する「password_resets」テーブルを作成するPHPスクリプトになります。
勘のよい方はご察知のとおり、「php artisan」コマンドを利用するとこのスクリプトが実行されて、create tableされるわけです。
$ php artisan migrate:fresh
Dropped all tables successfully.
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated: 2014_10_12_100000_create_password_resets_table
phpMyAdmin( http://localhost/phpmyadmin )を参照すると「test」データベースに「users」テーブルと「password_resets」テーブルが新規作成されていることがわかります。
![スクリーンショット 2018-06-15 12.39.47.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F263562%2Fc56409ba-e76b-213f-19dd-cf7ec70d0ada.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8aeb40c2360b7ed8146f3d9e4141ab7e)
2.5. ユーザ登録の確認
開発用サービスを立ち上げて、ユーザ登録と参照、修正、削除を試します。
2.5.1 開発用サービスの立ち上げ
$ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>
2.5.2 ユーザ登録
ブラウザから http://localhost:8000/ にアクセスして、右上の「REGISTER」ボタンを押下します。
![スクリーンショット 2018-06-15 12.48.58.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F263562%2F4c3d6da6-7be6-98f8-e905-04dd3902860e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b5d30b4b5406a74a963373589c45fef5)
登録画面が表示されますので、必要情報を入力して「Register」ボタンを押下します。「Register」画面でユーザ情報を入力し、「Register」ボタンを押下します。
![スクリーンショット 2018-06-25 13.38.32.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F263562%2F4a6ac6a0-cd65-b8e9-2745-b78614e78037.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6aff174ac17a9c65ea5dec472df92c07)
すると、ユーザ登録が完了し、登録したユーザとして即ログインがなされます。
![スクリーンショット 2018-06-15 12.52.14.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F263562%2Fa9ddecb3-448e-2a69-01aa-5c3208a258d6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=25acef5a30ca3ebd96d594958f283c82)
phpMyAdmin( http://localhost/phpmyadmin )を参照するとユーザが登録されていることが見て取れます。
![スクリーンショット 2018-06-25 13.42.18.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F263562%2F2ac60fc3-90c3-9f16-e03c-26f97df7107d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8da59d945b0497e36c3eb863267c34a8)
以上、「2. ユーザログイン機能の追加」が完了です。
次は、「3. MVCとルーティングの説明」です。