Laravel 開発: Laravel Sanctum を使用して SPA および API 認証を実装するにはどうすればよいですか?-Laravel-php.cn

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

WBOY

リリース： 2023-06-13 12:36:10

オリジナル

1151 人が閲覧しました

Laravel Sanctum は、Laravel アプリケーションに API 認証と SPA (Single Page Application) 認証を簡単に実装できる軽量の認証パッケージです。この記事では、Laravel Sanctum を使用して SPA および API 認証を実装する方法を説明します。

まず、SPA 認証と API 認証とは何かを見てみましょう。

SPA 認定とは、ページ全体をリロードするのではなく、AJAX を使用して Web サーバーに情報を要求し、部分的なコンテンツを更新する単一ページアプリケーションを指します。 SPA を使用する場合、認証されたユーザーのみが API にアクセスできるようにするために、API を認証する必要があります。

API 認証とは、API リクエストの認証プロセスを指します。クライアントがリクエストを送信するとき、API はリクエストが予期されたユーザーからのものであることを検証する必要があります。これにより、API エンドポイントが認証されたユーザーのみによって使用されることが保証されます。

Laravel Sanctum を使用して SPA および API 認証を実装する方法の手順は次のとおりです:

1. Laravel Sanctum のインストール
Composer パッケージマネージャーを使用して Laravel Sanctum をインストールできます。 Laravel プロジェクトで次のコマンドを実行します:

composer require laravel/sanctum

ログイン後にコピー

2. Laravel Sanctum インストーラーを実行します
Laravel Sanctum は、インストール中にアプリケーションを自動的に構成できるインストーラーを提供します。次のコマンドを使用してこのインストーラーを実行できます:

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

ログイン後にコピー

3. 移行の実行
Sanctum の移行を実行して、Sanctum の操作をサポートするために必要なデータベーステーブルを作成する必要があります。次のコマンドを実行します:

php artisan migrate

ログイン後にコピー

4. アプリケーションを構成します
Laravel Sanctum をミドルウェアスタックに追加する必要があります:

'api' => [
    'middleware' => ['auth:sanctum'],
    'throttle:60,1',
    'prefix' => 'api',
    'namespace' => 'AppHttpControllersAPI',
],

ログイン後にコピー

5. ユーザーに認証トークンを発行します
Laravel でSanctum さん、tokenCan メソッドを使用して、トークンに特定の API 権限があるかどうかを確認できます。 createToken メソッドを使用してユーザーに認証トークンを発行できます。

use IlluminateHttpRequest;

/**
 * Store a newly created resource in storage.
 *
 * @param  IlluminateHttpRequest  $request
 * @return IlluminateHttpResponse
 */
public function store(Request $request)
{
    $user = User::find(1);
    $token = $user->createToken('token-name', ['server:update'])->plainTextToken;

    return response()->json([
        'access_token' => $token,
        'token_type' => 'Bearer',
    ]);
}

ログイン後にコピー

これにより、server:update 権限を持つユーザーの「token-name」という名前のトークンが作成されます。

6. API エンドポイントの保護
コントローラーでは、「ミドルウェア」メソッドを使用して API エンドポイントを保護できます:

public function update(Request $request, $id)
{
    if (!$request->user()->tokenCan('server:update')) {
        abort(403, 'Unauthorized');
    }

    // Update the server
}

ログイン後にコピー

この例では、サーバーを持つユーザーのみを許可します。 :update 権限は更新メソッドにアクセスします。

7. SPA での認証トークンの使用
SPA では、Sanctum の @auth および @csrf Blade 命令を使用して認証トークンを取得できます:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <!-- Meta -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container-fluid">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    @auth
        <script>
            window.Laravel = {!! json_encode([
                'csrf_token' => csrf_token(),
                'api_token' => Auth::user()->api_token
            ]) !!};
        </script>
    @endauth
</body>

ログイン後にコピー

この例では、ユーザー認証トークンと CSRF トークンを取得するための Sanctum の @auth および @csrf Blade ディレクティブ。

Laravel Sanctum を使用して SPA および API 認証を実装する方法については以上です。 Laravel Sanctum を使用すると、API エンドポイントと SPA アプリケーションの保護が容易になり、セキュリティのベストプラクティスの実装に役立ちます。

以上がLaravel 開発: Laravel Sanctum を使用して SPA および API 認証を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。