Laravelでログイン機能を実装する方法（準備編）

# Laravelでログイン機能を実装する方法（準備編）

Laravelでログイン機能などの認証機能を実装する時は、`Laravel UI`というパッケージを
使用すると簡単に実装できる。（Laravelのバージョンが9系の場合）
Laravel UIの場合、CSSフレームワークはBootStrapになる。

## 1.Laravel UIをインストールする。
①VS Codeのターミナルまたはコマンドプロンプトを開き、
　Laravelをダウンロードしたディレクトリまで移動する。
②以下のコマンドを実行する。
```
composer require laravel/ui
```
③2分程度待ち、以下のように出たらOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/cebedfea-65cf-bc96-68ec-f3425a56507a.png)


## 2. Bootstrapをインストールする。
①Bootstrapの認証機能用のファイルを同時にインストールする。
```
php artisan ui bootstrap --auth
```
※`--auth`をつけることで認証機能用のファイルもインストールできる。

③以下のように出たらOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/02d3cc98-0270-b42a-3e3b-e4d1adbb71b7.png)

④以下のコマンドを実行する。
```
npm install
```
このコマンドを実行することで、Laravelをダウンロードしたフォルダ直下の
package.jsonに書かれたファイルを一括でインストールできる。

⑤以下のように出たらOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/e1340724-3f1a-e4da-1e7f-93602b4825d2.png)

### 2で追加した認証用ファイルについて
2で追加した認証用ファイルは以下の通り。
* `app/Http/Controllers`フォルダ内
    * Authフォルダ：アカウント作成やログイン、パスワードの再設定などに必要な各種コントローラ
    * HomeController.php：ログイン後に表示するビュー（home.blade.php）を呼び出すためのコントローラ
* `resources/views`フォルダ内
    * authフォルダ：アカウント作成やログイン、パスワードの再設定などに使われる各種ビュー
    * `layouts/app.blade.php`：上記の各種ビューに対する親ビュー（すべてのビューで共通するレイアウトのファイル）
    * home.blade.php：ログイン後に表示するビュー

* 追加されたルーティング（`routes/web.php`）
```
Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
```
メモ：認証機能用のルーティングを一括設定する場合は、`Auth::routes()`と記述するだけで設定可能。


## 3.Bootstrapをビルドする。
BootstrapはSassで書かれているためcssに変える。
①以下のコマンドを実行する。
```
npm run build
```
②以下のように出たらOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/208e968d-ae38-5ebf-6a0d-4c597f72bb59.png)
③ブラウザでログインページとアカウント作成ページを確認する。
　↓画像の赤枠の部分をクリックする。
![laravelsetumei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/5ff6aa0d-b814-1e31-52d6-e73d9681913a.png)
ログインページやアカウント作成ページが開いたらOK。


## 4.認証機能を日本語にする
①以下のコマンドを順番に実行する。
```
php -r "copy('https://readouble.com/laravel/8.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"

php -f install-ja-lang.php

php -r "unlink('install-ja-lang.php');"
```
②（日本語を変更する。）
　`resources/lang/ja` 内に日本語化された各ファイルがある。

③`config/app.php` のlocalをjaに変更する。
　※localをjaにすることで、①で作成した日本語のファイルを参照してくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/75bf9f65-5326-355f-cc36-204ca677e647.png)
④ログインページの日本語を設定する。
1． `resources/lang/ja.json`を作成する。
　**※`resources/lang`内にja.jsonを作成する。**
2．ja.jsonに以下を記述する。
```ja.json
{
	"Login": "ログイン",
	"Email Address": "メールアドレス",
	"Password": "パスワード",
	"Remember Me": "ログイン状態を保存する",
	"Forgot Your Password?": "パスワードをお忘れですか？",
	"Reset Password": "パスワード再設定",
	"Send Password Reset Link": "パスワード再設定リンクを送信",
	"Register": "新規登録",
	"Name": "ユーザー名",
	"Confirm Password": "パスワード（確認用）",
	"Logout": "ログアウト",
	"Reset Password Notification": "パスワード再設定のお知らせ",
	"Hello!": "こんにちは！",
	"You are receiving this email because we received a password reset request for your account.": "あなたのアカウントでパスワード設定のリクエストがありました。",
	"This password reset link will expire in :count minutes.": "このパスワード再設定リンクの有効期限は :count 分です。",
	"If you did not request a password reset, no further action is required.": "心当たりがない場合は、本メールを破棄してください。",
	"Regards": "よろしくお願いいたします",
	"If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser:": "「:actionText」ボタンを押しても何も起きない場合、以下のURLをコピーしてWebブラウザに貼り付けてください。"
}

```
＜ja.jsonを作成する理由＞
例：`resources/views/auth/login.blade.php`を日本語で表示する場合。
```login.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Login') }}</div>  // この部分

```
`__()`ヘルパーで指定されているキーを呼び出す時に、`config/app.php`の
localeに'ja'を指定した場合、`resources/lang/ja.json`を参照する為。

⑤ブラウザでログインページとアカウント作成ページを確認する。
　↓画像の赤枠の部分をクリックする。
![laravelsetumei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/5ff6aa0d-b814-1e31-52d6-e73d9681913a.png)