Laravelでログイン機能付きサイト作成 with XAMPP(2/4)　認証機能の有効化編

## 目標

**`Laravel`の認証機能を有効化する**


## 前回の記事
[Laravelの基礎学習 with XAMPP](https://qiita.com/kaitaku/items/e3f0b144b5eb182e9681)
※設定や各アプリの起動などはこの記事に記載したので、不明点などがあったら、この記事を。

## 認証機能の有効化
### Laravelプロジェクトの作成

Laravelインストーラーを利用して、新規Laravelプロジェクトを作成する。
ターミナルを開いて、次のコマンドを実行。

```
$ laravel new project(プロジェクト名)
```

インストールが完了したら、内蔵サーバーを起動してちゃんと動くか確認する。

```
$ php artisan serve
```

http://127.0.0.1:8000/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218398/6256001e-fb22-0cd8-1671-759fd194c3d7.jpeg" width="800px">


### データベースの設定
#### データベースへ接続
`Laravel`が問題なくインストールできていることを確認できたら、`XAMPP`を起動し、今回のプロジェクト用データベースを作成。
`(プロジェクト名)\.env`を開いて、このプロジェクトを`MySQL`と接続するための情報を入力する。

```(プロジェクト名)\.env
DB_CONNECTION=mysql
DB_HOST=
DB_PORT=
DB_DATABASE=
DB_USERNAME=
DB_PASSWORD=
```

#### マイグレーション(テーブル作成)
今回は`Laravel`の機能であるマイグレーションを利用して、テーブルとそのカラムを作成する。
既存の`(プロジェクト名)\database\migratios\2014_10_12_000000_create_users_table.php`を利用してマイグレーションを行う。
変更前の`(プロジェクト名)\database\migratios\2014_10_12_000000_create_users_table.php`は以下のような内容になっている。

```(プロジェクト名)\database\migratios\2014_10_12_000000_create_users_table.php
public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }
```

[前回の記事](https://qiita.com/kaitaku/items/e3f0b144b5eb182e9681)で触れられなかった3つのコードについて解説する。

- **`$table->string('email')->unique();`**は同じテーブル内で同じデータの値が格納されないための設定。マイグレーションで設定するだけでなく、バリデーションにも`unique:(テーブル名)`を作成する必要があることに忘れないように。
- **`$table->timestamp('email_verified_at')->nullable();`**は登録時にそのメールアドレスに確認用のメールが送信されることを定義している。
- **`$table->rememberToken();`**はログイン画面において『ユーザーIDを記録する』といった機能を有効にする際に利用されるカラム。

今回はローカル環境における作業のため、3つのうち上の2つを削除し、わかりやすいカラム名にする。
具体的には次のようにコードを変更。

```(プロジェクト名)\database\migratios\2014_10_12_000000_create_users_table.php
public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name')->unique();
            $table->string('email')->unique();
            $table->string('password');
            $table->rememberToken();
            $table->text('comment')->default('こんにちは!!');
            $table->timestamps();
            $table->boolean('delete_flag')->default(false);
        });
    }
```

以上の内容で作成される`users`テーブルのカラムの設定は次の内容。

| カラム名        | 設定             |
|:--------------:|:----------------:|
| id             | AUTO_INCREMENTS  |
| name           | string           |
| email          | string           |
| password       | email            |
| remenber_token | string           |
| comment        | text             |
| create_at      | timestamp        |
| update_at      | timsestamp       |
| delete_flag    | boolean          |

ターミナルを開いて、次のコマンドでマイグレーションを実行し、`users`テーブルを作成する。

```
$ php artisan migrate
```

マイグレーションが終了したら、`phpMyAdmin`から`users`テーブルを確認し、作成したかったカラムと設定になっているかを確かめる。

`Laravel`には`シーディング`というテーブルにデータを挿入する機能があるが、認証機能経由で登録しないとログインできないため、今回は使用しない。

#### バリデーション

マイグレーションの際に設定したバリデーションを有効化するには、`(プロジェクト名)\app\Http\Controllers\Auth`にある`RegisterController.php`を編集する。

```(プロジェクト名)\app\Http\Controllers\Auth\RegisterController.php
 protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255', 'unique:users'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }
```

マイグレーションで`unique`を設定したら、このファイルにも**`unique:(テーブル名)`**で設定する必要があることを忘れないように。

### 認証機能
#### 認証機能の有効化
`Laravel`の[公式ドキュメント](https://readouble.com/laravel/7.x/ja/authentication.html)を読むと、認証機能有効化に関する記述があるので、それに従っていく。

まずはターミナルで次のコマンドを実行して、認証機能有効化に必要なコードやファイルをインストールする。

```
$ composer require laravel/ui
$ php artisan ui vue --auth
$ npm install
$ npm run dev
```

上のコマンドの処理が完了し、サーバーを起動して、 http://127.0.0.1:8000/ を開くと`LOGIN`と`REGISTER(登録画面)`が作成されており、認証機能が有効化されたことが確認できる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218398/23a589e7-87d6-32f6-d1cb-21cec116c68f.jpeg" width="800px">


#### ユーザー登録とログイン
では実際に、認証機能を使ってみる。
右上に作成された`REGISTER`をクリックし、[登録画面](http://127.0.0.1:8000/register)を開く。
そして、登録したいユーザー情報を各項目に入力する。

![screenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218398/9bd53049-e769-8834-33bd-898e1b1e68fe.jpeg)

入力が完了すると、[ホーム画面](http://127.0.0.1:8000/home)に遷移する。

![screenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218398/41c69cfb-83a1-deeb-4071-517981f246f4.jpeg)

`phpMyAdmin`を開いて、今回作成したユーザーデータを確認してみると、パスワードが管理者にもわからないよう暗号化されていることがわかる。
![screenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218398/d6a3300f-c9aa-664f-1a88-e2247357a45d.jpeg)

これで認証機能を有効化できたことが確認できた。

#### 認証項目の追加

有効化自体は終わったが、論理削除がされているかどうかなどEメールやパスワード以外の項目で認証の確認をしたいこともある。
そのような場合は、`app\Http\Auth\LoginContoller.php`に以下の内容を追記する。

```app\Http\Auth\LoginContoller.php
use Illuminate\Http\Request;

protected function credentials(Request $request)
{
    $temporary = $request->only($this->username(), 'password');
    $temporary['delete_flag'] = 0;

    return $temporary;
}
```

**`$temporary['delete_flag'] = 0;`**で論理削除されているかどうかを確かめている。

## 次回の記事
今回は`Laravel`のプロジェクトで、認証機能の有効化を果たした。
次回の記事では今回のプロジェクトにユーザー情報を変更できるページを作成していく。
[Laravelでログイン機能付きサイト作成 with XAMPP(3/4) ユーザー情報変更機能編](https://qiita.com/kaitaku/items/d7faf24a68ba933607f0)

## 参考資料
- [認証 7.x Laravel](https://readouble.com/laravel/7.x/ja/authentication.html)
- [Laravel でインデックスを作成、削除する - Qiita](https://qiita.com/sato_ryu/items/311df38b81ab427447ca)
- [Laravel5.7: ユーザー登録確認用のメールを送信する - Qiita](https://qiita.com/sutara79/items/c913d7eedd5456635ea5)
- [Laravel で認証パラメータを追加する](https://qiita.com/moobay9/items/7a511cbee840ce20ee6d)