Laravel Sanctum으로 React 앱 인증하기 - 파트 1

웹 애플리케이션 구축을 위해 제가 선택한 기술 스택은 프론트 엔드의 React와 후면의 Laravel입니다. 이 접근 방식의 문제 중 하나는 권한이 있는 개인만 데이터베이스 리소스를 사용할 수 있도록 사용자를 인증하는 것입니다. Sanctum 패키지가 Laravel 7에 추가되었으므로 이 작업이 훨씬 더 간단해졌습니다.

이것이 어떻게 작동하는지 보여주기 위해 세 부분으로 구성된 간단한 응용 프로그램을 만들었습니다.

사용자가 액세스를 위해 등록합니다.

사용자가 로그인합니다

사용자가 로그아웃함

그것을 시도하고 here React client application 및 Laravel server application 에 대한 전체 코드를 볼 수 있습니다.

Sanctum이 있는 라라벨

Laravel Sanctum은 사용자 인증의 모든 작업을 처리합니다. 그러나 이 설정을 하기 위한 작은 세부 사항이 많이 있습니다. 한 번에 하나씩 수행하고 어떤 단계도 놓치지 마십시오. 그러면 매우 짧은 시간에 애플리케이션이 완벽하게 작동하게 될 것입니다.

이 가이드는 명령줄 사용 및 Laravel artisan 명령 실행을 포함하여 Laravel 애플리케이션을 설정하고 실행하는 데 기본적인 지식이 있다고 가정합니다.

데이터 베이스

먼저 정보를 저장하기 위한 데이터베이스가 필요합니다. 이 응용 프로그램에 MySQL을 사용하고 auth라는 데이터베이스를 만들었습니다.

라라벨 설치

그런 다음 Composer를 사용하여 Laravel 앱을 만들었습니다.

composer create-project --prefer-dist laravel/laravel APP_NAME

the Laravel site 에 새 프로젝트를 시작하는 자세한 지침이 있습니다.

.env 파일을 편집하여 애플리케이션 이름과 데이터베이스 정보를 업데이트합니다.

APP_NAME=Laravel_Sanctum_Authentication
APP_ENV=local
APP_KEY=base64:XXXXXXX
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=auth
DB_USERNAME=XXXXXXX
DB_PASSWORD=XXXXXXX

Sanctum 설치 및 구성

CD를 응용 프로그램 디렉터리에 넣고 Sanctum을 프로젝트에 추가합니다.

composer require laravel/sanctum

다음으로 Sanctum 구성 파일과 데이터베이스 테이블을 생성합니다.

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

php artisan migrate

API 미들웨어 그룹에 Sanctum 미들웨어를 추가하려면 app/Http/Kernel.php를 업데이트하십시오.

다음 코드 줄을 추가합니다.

use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

그리고

'api' => [
    EnsureFrontendRequestsAreStateful::class,
    'throttle:60,1',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

아래 그림과 같이:

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;
use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        \App\Http\Middleware\TrustProxies::class,
        \Fruitcake\Cors\HandleCors::class,
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            EnsureFrontendRequestsAreStateful::class,
            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

CORS 구성

프론트 엔드 React 애플리케이션에서 오는 경우를 제외하고 API에 대한 요청이 거부되도록 설정Cross-Origin Resource Sharing해야 합니다.

config/cors.php를 다음과 같이 변경합니다.

'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['https://auth.bob-humphrey.com', 'http://localhost:3000'],
    //'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,

보호해야 하는 끝점을 나타내도록 경로를 수정합니다(이 경우 api/* 및 sanctum/csrf-cookie).

'paths' => ['api/*', 'sanctum/csrf-cookie'],

요청을 수락할 URL을 지정하려면 허용된 출처를 수정하십시오. 이것은 React 앱의 생산 및 개발 URL, https://auth.bob-humphrey.com (내 앱의 경우) 및 http://localhost:3000 입니다.

'allowed_origins' => ['https://auth.bob-humphrey.com', 'http://localhost:3000'],

그런 다음 support_credentials를 true로 설정합니다.

'supports_credentials' => true,

사용자 컨트롤러

다음으로 사용자 컨트롤러를 만듭니다.

php artisan make:controller UserController

다음과 같이 보이도록 app/Http/Controllers/UserController를 편집합니다.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Log;
use App\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;

class UserController extends Controller
{
    public function register(Request $request)
    {
        $this->validator($request->all())->validate();
        $user = $this->create($request->all());
        $this->guard()->login($user);
        return response()->json([
            'user' => $user,
            'message' => 'registration successful'
        ], 200);
    }
    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            //'password' => ['required', 'string', 'min:4', 'confirmed'],
            // NO PASSWORD CONFIRMATION
            'password' => ['required', 'string', 'min:4'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }
    protected function guard()
    {
        return Auth::guard();
    }

    public function login(Request $request)
    {
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            // Authentication passed...
            $authuser = auth()->user();
            return response()->json(['message' => 'Login successful'], 200);
        } else {
            return response()->json(['message' => 'Invalid email or password'], 401);
        }
    }

    public function logout()
    {
        Auth::logout();
        return response()->json(['message' => 'Logged Out'], 200);
    }
}

컨트롤러에는 프런트 엔드에서 호출할 등록, 로그인 및 로그아웃 메서드가 포함되어 있습니다. 또한 데이터의 유효성을 검사하는 유효성 검사기 메서드와 데이터베이스에 새 사용자를 추가하는 만들기 메서드가 포함되어 있습니다.

API 경로

이제 다음과 같이 route/api를 업데이트합니다.

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/login', 'UserController@login');
Route::post('/register', 'UserController@register');
Route::get('/logout', 'UserController@logout');

/user 경로는 방금 설치한 Sanctum 미들웨어를 사용하도록 수정됩니다. 프런트 엔드 앱은 사용자가 먼저 인증하지 않는 한 이 끝점에서 성공적인 응답을 받을 수 없습니다. 완전한 API를 구축하는 경우 모든 API 경로는 Sanctum 미들웨어로 보호됩니다.

또한 로그인, 등록 및 로그아웃 기능에 대한 액세스를 제공하기 위해 세 개의 새로운 끝점을 추가했습니다. route/api.php 파일의 모든 끝점에는 "/api"접두사가 붙습니다. 따라서 로그인 경로의 끝점은 "/api/login"이고 등록 경로의 끝점은 "/api/register"등입니다.

테스트를 위해 새 사용자 추가

이 시점에서 Laravel은 사용자 인증을 처리하도록 완전히 설정되었습니다. 설정을 테스트할 수 있도록 데이터베이스에 새 사용자를 추가해 보겠습니다. 이를 수행하기 위해 tinker를 사용할 수 있습니다.

php artisan tinker

factory(App\User::class)->create(['email'=>'[email protected]','name'=>'Bill', 'password'=> bcrypt('bill')]);

exit     (to leave tinker)

2 부

백 엔드가 완료되었으며 이제 프런트 엔드를 만들 준비가 되었습니다. 2부에서는 사용자 등록, 로그인 및 로그아웃을 위한 양식을 사용하여 React 앱을 만드는 데 필요한 작업을 살펴보겠습니다.