Développement Laravel : Comment fournir une authentification API pour SPA à l'aide de Laravel Sanctum ?

Développement Laravel : Comment fournir une authentification API pour SPA à l'aide de Laravel Sanctum ?

Avec la popularité des applications à page unique (SPA), nous avons besoin d'un moyen fiable pour protéger nos API contre les accès non autorisés et les attaques. Laravel Sanctum est un système d'authentification léger fourni par Laravel qui permet une authentification facile pour SPA. Cet article vous montrera comment utiliser Laravel Sanctum pour fournir une authentification API pour votre SPA.

Utilisation de Laravel Sanctum

Laravel Sanctum est un package officiel de la version Laravel 7.x pour l'authentification API. Laravel Sanctum utilise le jeton de l'API pour identifier l'utilisateur et peut facilement effectuer plusieurs versions d'authentification à l'aide du jeton.

Installez Laravel Sanctum

Tout d'abord, assurez-vous que le framework Laravel est installé.

Pour installer Laravel sanctum, vous pouvez utiliser la commande suivante

composer require laravel/sanctum

Ajoutez le ServiceProvider à la liste des fournisseurs dans le fichier config/app.php.

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

],

Maintenant, vous pouvez exécuter les commandes suivantes pour publier les migrations de bases de données nécessaires et la configuration de Sanctum.

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

Exécutez la commande suivante pour exécuter la migration :

php artisan migrate

Utilisez Sanctum pour l'authentification par défaut

Sanctum contient des implémentations par défaut pour l'authentification par API et par application à page unique. L'authentification par défaut peut être activée à l'aide du trait SanctumTraitsHasApiTokens pour le modèle utilisateur.

Ajoutez le trait HasApiTokens au modèle utilisateur

<?php

namespace AppModels;

use IlluminateFoundationAuthUser as Authenticatable;
use IlluminateNotificationsNotifiable;
use LaravelSanctumHasApiTokens;

class User extends Authenticatable
{
    use Notifiable, HasApiTokens;

    // ...
}

Pour une meilleure explication, nous utiliserons un exemple SPA simple. Supposons que l'exemple d'URL soit http://spa.test et que l'API soit exposée via http://api.spa.test.

Configuration de CORS dans Laravel

Ajoutez le code suivant au fichier app/Providers/AppServiceProvider.php pour autoriser le partage de ressources d'origine croisée (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,
            ]]);
        }
    }
}

Remplacez http://spa.test dans le code ci-dessus par l'URL de votre SPA.

Instructions de validation des jetons et de protection de l'API

Dans le contrôleur, nous pouvons utiliser le middleware d'authentification de Sanctum pour sécuriser la route

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();
    // ...
}

Cela obtiendra le jeton d'autorisation Sanctum de l'en-tête de la requête et utilisera ce jeton pour authentifier l'utilisateur. Si le jeton d'autorisation n'est pas fourni dans l'en-tête, une erreur 401 non autorisée sera renvoyée.

Faire une demande de jeton d'autorisation

Dans notre SPA, nous pouvons utiliser la bibliothèque axios pour utiliser l'API et obtenir le jeton. Pour obtenir le jeton d'autorisation, nous devons d'abord obtenir le jeton CSRF, nous devons donc envoyer une requête GET pour l'obtenir.

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

Le code ci-dessus fera une requête POST dans http://api.spa.test, créera un nouveau jeton d'autorisation Sanctum sur le serveur et répondra avec le jeton en tant que réponse.data.token. Par la suite, nous pouvons ajouter le token à l'en-tête commun d'axios pour l'utiliser dans le SPA pour toutes les requêtes ultérieures.

Notez que cet exemple suppose qu'il existe une route nommée "login".

Sanctum nous fournit également une route de déconnexion pour révoquer les jetons d'autorisation.

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

Conclusion

Laravel Sanctum est un système d'authentification léger, simple et pratique, facile à intégrer et à utiliser et qui fournit des fonctions d'authentification par défaut, ce qui en fait une excellente solution pour l'authentification SPA. Une fois que vous utiliserez Sanctum, vous n’aurez plus besoin d’écrire votre propre système d’authentification. Cela nous permet de mettre en œuvre rapidement une authentification sécurisée pour notre API et permet à notre SPA d'interagir avec l'API en une fraction du temps.

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!