Laravel 개발: Laravel Sanctum을 사용하여 SPA에 API 인증을 제공하는 방법은 무엇입니까?

Laravel 개발: Laravel Sanctum을 사용하여 SPA에 API 인증을 제공하는 방법은 무엇입니까?

SPA(단일 페이지 애플리케이션)의 인기로 인해 무단 액세스 및 공격으로부터 API를 보호할 수 있는 안정적인 방법이 필요합니다. Laravel Sanctum은 SPA에 대한 간편한 인증을 제공하기 위해 Laravel에서 제공하는 경량 인증 시스템입니다. 이 글은 Laravel Sanctum을 사용하여 SPA에 API 인증을 제공하는 방법을 보여줍니다.

Laravel Sanctum 사용

Laravel Sanctum은 API 인증을 위한 Laravel 7.x 버전의 공식 패키지입니다. Laravel Sanctum은 API의 토큰을 사용하여 사용자를 식별하고, 토큰을 사용하여 여러 인증 빌드를 쉽게 수행할 수 있습니다.

Laravel Sanctum 설치

먼저 Laravel 프레임워크가 설치되어 있는지 확인하세요.

laravel sanctum을 설치하려면 다음 명령을 사용하세요.

composer require laravel/sanctum

ServiceProvider를 config/app.php 파일의 공급자 목록에 추가하세요.

'providers' => [
    // ...
    LaravelSanctumSanctumServiceProvider::class,

],

이제 다음 명령을 실행하여 필요한 데이터베이스 마이그레이션 및 Sanctum 구성을 게시할 수 있습니다.

php artisan vendor:publish --provider="LaravelSanctumSanctumServiceProvider"

다음 명령을 실행하여 마이그레이션을 실행하세요.

php artisan migrate

기본 인증을 위해 Sanctum 사용

Sanctum에는 API 및 단일 페이지 애플리케이션 인증을 위한 기본 구현이 포함되어 있습니다. 사용자 모델에 대한 SanctumTraitsHasApiTokens 특성을 사용하여 기본 인증을 활성화할 수 있습니다.

사용자 모델에 HasApiTokens 특성 추가

<?php

namespace AppModels;

use IlluminateFoundationAuthUser as Authenticatable;
use IlluminateNotificationsNotifiable;
use LaravelSanctumHasApiTokens;

class User extends Authenticatable
{
    use Notifiable, HasApiTokens;

    // ...
}

더 나은 설명을 위해 간단한 SPA 예제를 사용하겠습니다. 예제의 URL이 http://spa.test이고 API가 http://api.spa.test를 통해 노출된다고 가정합니다.

Laravel에서 CORS 구성

CORS(교차 출처 리소스 공유)를 허용하려면 app/Providers/AppServiceProvider.php 파일에 다음 코드를 추가하세요.

...
use IlluminateSupportFacadesSchema;
use IlluminateSupportFacadesURL;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Schema::defaultStringLength(191);

        if (config('app.env') === 'production') {
            URL::forceScheme('https');
        }

        $headers = [
            'Access-Control-Allow-Origin' => '*',
            'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers' => 'Origin, Content-Type, Accept, Authorization, X-Request-With',
            'Access-Control-Allow-Credentials' => 'true',
        ];
        $this->app['router']->middleware('api')->get('/sanctum/csrf-cookie', function () {
            return response()->json(['status' => 'success']);
        });

        foreach ($headers as $key => $value) {
            config(['cors.supportsCredentials' => true]);
            config(['cors.paths.api/*' => [
                'allowedOrigins' => ['http://spa.test'],
                'allowedHeaders' => [$key],
                'allowedMethods' => ['*'],
                'exposedHeaders' => [],
                'maxAge' => 86400,
            ]]);
        }
    }
}

위 코드의 http://spa.test를 SPA의 URL로 바꾸세요.

토큰 검증 및 API 보호 지침

컨트롤러에서 Sanctum의 인증 미들웨어를 사용하여 경로를 보호할 수 있습니다

public function index(Request $request)
{
    $user = $request->user();
    // ...
}

public function store(Request $request)
{
    $user = $request->user();
    // ...
}

public function destroy(Request $request, string $id)
{
    $user = $request->user();  
    // ...
}

public function update(Request $request, string $id)
{
    $user = $request->user();
    // ...
}

이것은 요청 헤더에서 Sanctum 인증 토큰을 가져오고 해당 토큰을 사용하여 사용자를 인증합니다. 인증 토큰이 헤더에 제공되지 않으면 401 Unauthorized 오류가 반환됩니다.

인증 토큰 요청하기

SPA에서는 axios 라이브러리를 사용하여 API를 사용하고 토큰을 얻을 수 있습니다. 인증 토큰을 얻으려면 먼저 CSRF 토큰을 가져와야 하므로 이를 얻기 위해 GET 요청을 보내야 합니다.

axios.get('http://api.spa.test/sanctum/csrf-cookie').then(response => {
    axios.post('http://api.spa.test/login', {
        username: this.username,
        password: this.password
    }).then(response => {
        axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.token}`;
        this.$router.push({ name: 'home' });
    });
});

위 코드는 http://api.spa.test에서 POST 요청을 만들고, 서버에 새로운 Sanctum 인증 토큰을 생성하고, 해당 토큰을 response.data.token으로 응답합니다. 그런 다음 토큰을 axios의 공통 헤더에 추가하여 모든 후속 요청에 대해 SPA에서 사용할 수 있습니다.

이 예에서는 "login"이라는 경로가 있다고 가정합니다.

Sanctum은 인증 토큰을 취소할 수 있는 로그아웃 경로도 제공합니다.

axios.post('http://api.spa.test/logout').then(response => {
    delete axios.defaults.headers.common['Authorization'];
    this.$router.push({ name: 'login' });
});

결론

Laravel Sanctum은 가볍고 간단하며 실용적인 인증 시스템으로 통합 및 사용이 쉽고 기본 인증 기능을 제공하므로 SPA 인증에 탁월한 솔루션입니다. Sanctum을 사용하면 더 이상 자체 인증 시스템을 작성할 필요가 없습니다. 이를 통해 API에 대한 보안 인증을 신속하게 구현할 수 있으며 SPA가 짧은 시간 내에 API와 상호 작용할 수 있습니다.

위 내용은 Laravel 개발: Laravel Sanctum을 사용하여 SPA에 API 인증을 제공하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!