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

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

WBOYoriginal: 2023-06-13 12:36:101169parcourir

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

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"

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

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

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

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',
    ]);
}

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
}

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Développement Laravel : Comment analyser et optimiser les applications à l'aide de Laravel Telescope ?Article suivant：Développement Laravel : Comment analyser et optimiser les applications à l'aide de Laravel Telescope ?

Articles Liés

Voir plus