Laravel 8 - 로그인 및 회원가입

1. Laravel-UI 설치

설치 명령어
a. composer require laravel/ui
b. php artisan ui bootstrap --auth
c. npm install
d. npm run dev

laravel 프로젝트 폴더에서 a, b, c, d를 순서대로 실행하면 정상적으로 적용됨.

정상적으로 적용되었다면, 위의 사진처럼 우측 대각선 위에 로그인 및 회원가입 버튼이 생성됨.

---

2. controller 설정

2-1. LoginController

위치 : app/Http/Controllers/Auth/LoginController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
    use AuthenticatesUsers;

    protected $redirectTo = RouteServiceProvider::HOME;

    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }
    
    // 아래의 username을 추가하여 이메일 로그인에서 아이디 로그인으로 변경.
    public function username()
    {
        return 'user_id'; // 필드의 네임을 여러분의 선택.
    }
}

2-2. RegisterController

위치 : app/Http/Controllers/Auth/RegisterController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use App\Models\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;

class RegisterController extends Controller
{
    use RegistersUsers;

    protected $redirectTo = RouteServiceProvider::HOME;

    public function __construct()
    {
        $this->middleware('guest');
    }

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'user_id' => ['required', 'string', 'max:255', 'unique:users'], // 요기 추가
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'user_id' => $data['user_id'], // 요기 추가
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
            'user_level' => config('ext.user.user_level.default'), // 요기 추가
        ]);
    }
}

2-3. controller관련 추가 TIP

2-3-1. config('ext.user.user_level.default')

위치 : config/ext.php

이 부분은 config폴더에 ext.php파일을 생성하여 아래와 같은 코드를 작성함.
(DB에 넣기에는 애매한 간단한 설정을 객체형식으로 작성)

<?php
return [
    'user' => [
        'user_level' => [
            'default' => 1,
            'roles' => [
                'admin' => [
                    'label' => '관리자',
                    'level' => 1024,
                ],
                'user' => [
                    'label' => '회원',
                    'level' => 1,
                ]
            ]
        ],
    ],
];

2-3-2. protected $redirectTo = RouteServiceProvider::HOME;

방법 1

protected $redirectTo = RouteServiceProvider::HOME;

Login/RegisterController에 있는 부분임.
로그인 또는 회원가입 후 이동하는 페이지에 대한 설정임.

protected $redirectTo = '/';

위와 같은 방식으로 변경이 가능함. 또는,

방법 2
위치 : app/Providers/RouteServiceProvider.php

public const HOME = '/home';

RouteServiceProvider.php에 있는 위의 코드를 아래와 같이 변경함.

public const HOME = '/';

---

3. migration 설정 및 실행

위치 : database/migrations/2014_10_12_000000_create_users_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name')->comment('이름');
            $table->string('user_id')->unique()->comment('아이디'); // 요기 추가
            $table->unsignedSmallInteger('user_level')->comment('권한'); // 요기 추가
            $table->string('email')->unique()->comment('이메일');
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password')->comment('비밀번호');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('users');
    }
}

a. php artisan migrate

comment는 없었던 부분입니다. 제가 추가한 부분입니다.
user_id를 추가하여 아이디 필드(이메일이 아닌 아이디로 로그인을 하기위해 추가)
user_level을 추가하여 권한 필드(권한에 따라 페이지 접속을 제한하기 위해 추가)

a를 실행하면 migration이 진행됨.

---

4. 회원가입 UI 설정(register.blade.php)

위치 : resources/views/auth/register.blade.php

<div class="form-group row">
	<label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('아이디') }}</label>
	<div class="col-md-6">
		<input id="user_id" type="text" class="form-control @error('user_id') is-invalid @enderror"
               		name="user_id" value="{{ old('user_id') }}" required autocomplete="user_id">
          
		@error('user_id')
		<span class="invalid-feedback" role="alert">
			<strong>{{ $message }}</strong>
		</span>
		@enderror
	</div>
</div>

위의 코드를 추가함.

---

5. 로그인 UI 설정(login.blade.php)

위치 : resources/views/auth/login.blade.php

<div class="form-group row">
	<label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('아이디') }}</label>
	<div class="col-md-6">
		<input id="user_id" type="text" class="form-control @error('user_id') is-invalid @enderror" 
               		name="user_id" value="{{ old('user_id') }}" required autocomplete="user_id" autofocus>

		@error('user_id')
		<span class="invalid-feedback" role="alert">
			<strong>{{ $message }}</strong>
		</span>
		@enderror
	</div>
</div>

기본 로그인은 이메일로 되어있음.
위의 코드와 같이 이메일을 아이디로 변경함.

---

6. 오류 메세지 한글로 변경

위치 : config/app.php

'locale' => 'en',을 'locale' => 'ko',로 변경함.

위치 : resources/lang/en이라는 폴더가 있음.
en폴더를 복사해서 ko폴더를 만듬.

위치 : resources/lang/ko/auth.php

<?php

return [
    'failed' => 'These credentials do not match our records.',
    'password' => 'The provided password is incorrect.',
    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',

];

위와 같은 내용을 아래와 같은 내용으로 변경함.

<?php

return [
    'failed' => '정보가 일치하지 않습니다.',
    'password' => '비밀번호가 일치하지 않습니다.',
    'throttle' => '로그인 시도 가능 횟수를 초과 하였습니다. :seconds 초 후에 다시 시도해 주세요.',
];

아래와 같은 예시가 잘 실행됨.

---

위의 모든 과정을 완료하면 로그인 및 회원가입 기능 구현 완료