Développement Laravel : Comment implémenter l'authentification SPA et API à l'aide de Laravel Sanctum ?-Laravel-php.cn

Développement Laravel : Comment implémenter l'authentification SPA et API à l'aide de Laravel Sanctum ?

WBOY

Libérer： 2023-06-13 12:36:10

original

1181 Les gens l'ont consulté

Laravel Sanctum est un package d'authentification léger qui vous permet d'implémenter facilement l'authentification API et l'authentification SPA (Single Page Application) dans les applications Laravel. Dans cet article, nous explorerons comment utiliser Laravel Sanctum pour implémenter l'authentification SPA et API.

Tout d’abord, voyons ce que sont les certifications SPA et API.

La certification SPA fait référence à une application monopage qui ne recharge pas la page entière, mais utilise AJAX pour demander des informations au serveur Web afin de mettre à jour une partie du contenu. Lors de l'utilisation de SPA, les API doivent être authentifiées pour garantir que seuls les utilisateurs authentifiés peuvent y accéder.

L'authentification API fait référence au processus d'authentification des demandes API. Lorsqu'un client envoie une demande, l'API doit vérifier que la demande provient de l'utilisateur attendu, garantissant ainsi que le point de terminaison de l'API n'est utilisé que par des utilisateurs authentifiés.

Voici les étapes à suivre pour utiliser Laravel Sanctum pour implémenter l'authentification SPA et API :

1 Installer Laravel Sanctum
Nous pouvons utiliser le gestionnaire de packages Composer pour installer Laravel Sanctum. Exécutez la commande suivante dans le projet Laravel :

composer require laravel/sanctum

Copier après la connexion

2. Exécutez le programme d'installation de Laravel Sanctum
Laravel Sanctum fournit un programme d'installation qui configure automatiquement notre application lors de l'installation. Nous pouvons exécuter ce programme d'installation à l'aide de la commande suivante :

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

Copier après la connexion

3. Exécuter des migrations
Nous devons exécuter des migrations Sanctum pour créer les tables de base de données nécessaires pour prendre en charge les opérations de Sanctum. Exécutez la commande suivante :

php artisan migrate

Copier après la connexion

4. Configurez l'application
Nous devons ajouter Laravel Sanctum à notre pile middleware :

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

Copier après la connexion

5. Émettez un jeton d'authentification à l'utilisateur
Dans Laravel Sanctum, nous pouvons utiliser la méthode tokenCan Vérifiez si le jeton dispose d'autorisations API spécifiques. Nous pouvons émettre un jeton d'authentification à l'utilisateur en utilisant la méthode 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',
    ]);
}

Copier après la connexion

Cela créera un jeton pour l'utilisateur nommé « token-name » avec les autorisations server:update.

6. Protéger les points de terminaison de l'API
Dans notre contrôleur, nous pouvons utiliser la méthode "middleware" pour protéger les points de terminaison de l'API :

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

    // Update the server
}

Copier après la connexion

Dans cet exemple, nous autorisons uniquement les utilisateurs disposant des autorisations server:update à accéder à la méthode de mise à jour.

7. Utilisation des jetons d'authentification dans SPA
Dans notre SPA, nous pouvons utiliser les directives @auth et @csrf Blade de Sanctum pour obtenir le jeton d'authentification :

<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>

Copier après la connexion

Dans cet exemple, nous avons utilisé Sanctum. Les directives @auth et @csrf Blade sont utilisé pour obtenir des jetons d’authentification utilisateur et des jetons CSRF.

Il s'agit de savoir comment implémenter l'authentification SPA et API à l'aide de Laravel Sanctum. L'utilisation de Laravel Sanctum facilite la sécurisation de nos points de terminaison API et de nos applications SPA et nous aide à mettre en œuvre les meilleures pratiques de sécurité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!