Laravel 開発: Laravel Sanctum を使用して SPA に API 認証を提供するにはどうすればよいですか?

Laravel 開発: Laravel Sanctum を使用して SPA に API 認証を提供するにはどうすればよいですか?

シングル ページ アプリケーション (SPA) の人気に伴い、API を不正なアクセスや攻撃から保護する信頼性の高い方法が必要です。 Laravel Sanctum は、Laravel が提供する SPA の認証を簡単に行う軽量の認証システムです。この記事では、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 を構成する

次のコードを app/Providers/AppServiceProvider.php ファイルに追加して、クロスドメイン リソース共有 (CORS) を許可します。

...
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 中国語 Web サイトの他の関連記事を参照してください。