Laravel 6.x Authentication

Laravel 6.x에 인증(Authentication) 기능을 추가하는 것은 Laravel 5.x에서 하던 방법과 크게 다르지 않다. Laravel이 6.x로 오면서 UI 부분이 좀 바뀌었는데 그 부분만 별도로 추가해 주면 손 쉽게 가능하다. 

 

프로젝트 생성

먼저 프로젝트를 하나 생성하도록 하자. 프로젝트 이름은 demo-project.  

 

$ composer create-project laravel/laravel demo-project --prefer-dist

 

UI 패키지 추가

Laravel 6.x Release Note를 보면 다음과 같은 설명이 있다. 

 

The frontend scaffolding typically provided with previous releases of Laravel has been extracted into a laravel/ui Composer package. This allows the first-party UI scaffolding to be developed and versioned separately from the primary framework. As a result of this change, no Bootstrap or Vue code is present in default framework scaffolding, and the make:auth command has been extracted from the framework as well.

 

기존의 front-end는 laravel/ui로 분리 되었고, make:auth는 아예 사라졌다. 실제로 make 명령어 리스트를 봐도 보이지 않는다.

 

$ php artisan list

Laravel Framework 6.3.0
...
make
  make:channel         Create a new channel class
  make:command         Create a new Artisan command
  make:controller      Create a new controller class
  make:event           Create a new event class
  make:exception       Create a new custom exception class
  make:factory         Create a new model factory
  make:job             Create a new job class
  make:listener        Create a new event listener class
  make:mail            Create a new email class
  make:middleware      Create a new middleware class
  make:migration       Create a new migration file
  make:model           Create a new Eloquent model class
  make:notification    Create a new notification class
  make:observer        Create a new observer class
  make:policy          Create a new policy class
  make:provider        Create a new service provider class
  make:request         Create a new form request class
  make:resource        Create a new resource
  make:rule            Create a new validation rule
  make:seeder          Create a new seeder class
  make:test            Create a new test class

 

laravel/ui 패키지 추가는 아래 명령어로 가능하다.

 

$ composer require laravel/ui --dev

 

패키지를 이용하려면 router, controller, view, view에서 사용하는 자바 스크립트 코드, css 파일 등이 필요하다.

 

Frontend Code 추가

Frontend 코드는 Vue와 React 템플릿 중 선택이 가능하다. artisan의 ui 명령어에 type 인자로 vue 또는 react을 넘겨주면 가능하다. Vue를 사용하고 싶으면 아래와 같은 명령어를 내리면 된다. 

 

$ php artisan ui vue

 

React용 명령어도 별반 다르지 않다.

 

$ php artisan ui react

 

위의 두 명령어를 내리면 front-end를 Vue 또는 React를 사용해서 개발할 수 있도록 하는 것일 뿐 인증에 관련한 것들은 생성이 되지 않는다. 인증 관련 기능을 활성활 하려면 --auth 옵션을 붙여줘야 한다. 

 

$ php artisan ui vue --auth

 

React는 위의 명령어에서 vue 대신 react를 써주면 된다.

 

자 이제 앱을 구동 시켜보면 보이지 않던 Login과 Register를 볼 수 잇다.

 

$ php artisan serve

 

 

로그인을 눌러보면 로그인 화면이 보인다. 

 

 

하지만 뭔가 제대로 보이지 않는다. 로그를 보니 app.js, app.css를 찾지 못한다는 에러가 보인다. 사실 인증 기능 활성화 명령어를 내리면 추가로 해야할 일들이 결과 메세지에 나와있다.

 

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

 

package.json이 변경 되었기 때문에 npm install을 해야하고. resource/js/app.js와 resource/sass/app.scss를 패키징 후 public 폴더에 넣어야 하므로 npm run dev 명령을 실행햐 줘야한다. 

 

라라벨 앱을 멈추고 npm 명령어를 실행해 준다. 

 

$ npm install && npm run dev

 

이제 다시 라라벨 앱을 구동시킨다. 

 

$ php artisan serve

 

Login 페이지를 들어가 보면 문제 없이 잘 작동한다.

 

 

작동 원리

Laravel 프로젝트 생성할 때 LoginController와 RegisterController는 이미 생성이 되었다. 라우터가 등록되지 않아서 http://localhost:8080/login을 요청하면 404 페이지를 반환하게 된다.

 

auth 기능을 활성화 하면 /routes/web.php에 Auth::routes(); 가 추가된다. 이 Auth::routes();는 이미 생성된 LoginController, RegisterController 등을 각각 /login, /register 등으로 연결을 시켜준다. 저 라인을 빼고 실행하면 /login URL은 404를 반환하게 된다. 

 

기본으로 제공하는 /login URL 대신 다른 것을 사용하고 싶은 경우 Auth::routes(); 를 지우고 직접 라우터를 설정해 주면 된다.

 

관련글 목록
Laravel public folder를 public_html로 변경 Laravel public folder를 public_html로 변경