Nuxt 3 Laravel Sanctum Authentification: Sécutez votre spa et votre API avec facilité

L'authentification robuste est primordiale dans le développement Web moderne pour protéger les données utilisateur et l'intégrité des applications. Le module nuxt-sanctum-authentication fournit une intégration transparente entre Nuxt 3 et Laravel Sanctum, simplifiant les complexités de l'application à une seule page (SPA) et de l'authentification basée sur les jetons API. Ce module gère efficacement les tâches comme la protection CSRF, la gestion des jetons de porteurs et prend en charge le rendu côté serveur (SSR) et le rendu côté client (RSE). Que vous construisiez un système de connexion sécurisé ou un projet axé sur l'API, ce module offre une solution simple.

Avant de continuer, explorez ces ressources utiles:

• Référentiel de modules: nuxt-sanctum-authentification
• Documentation: Nuxt Sanctum Authentication Documentation
• Référentiel de démonstration: nuxt-sanctum-authentification-Demo

Intégration de Laravel Sanctum avec Nuxt 3

Installation du module nuxt-sanctum-authentication

Le module nuxt-sanctum-authentication rationalise l'intégration entre Nuxt 3 et Laravel Sanctum, gérant les subtilités de l'authentification SPA et API, y compris la manipulation des jetons CSRF et les jetons de porteur.

Installez le package dans votre application Nuxt 3:

npm install @qirolab/nuxt-sanctum-authentication

Configuration nuxt.config.ts

Après l'installation, ajoutez le module à votre nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["@qirolab/nuxt-sanctum-authentication"],
  sanctum: {
    apiUrl: "http://api.yourapp.test",  // Replace with your Laravel API URL
  },
});

Cette configuration spécifie l'URL de l'API pour votre application Laravel.

Implémentation de la fonctionnalité de connexion

Créez une page de connexion dans votre application Nuxt 3 où les utilisateurs entrent leurs informations d'identification. Utilisez le useSanctum() composable pour gérer les demandes de connexion. Un exemple de base:

<template>
  <form>
    <input v-model="form.email" type="email" placeholder="Email">
    <input v-model="form.password" type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

Ce formulaire soumet des informations d'identification de l'utilisateur au backend via le point de terminaison de connexion de Sanctum, assurant une communication sécurisée à l'aide de jetons CSRF.

Spa vs API Token Authentication

Le module est par défaut à l'authentification SPA basée sur les cookies. Pour l'authentification des jetons API, modifiez le authMode dans nuxt.config.ts:

sanctum: {
  apiUrl: "http://api.yourapp.test",
  authMode: "token",  // Enables token-based authentication
}

résoudre les problèmes de COR

Les erreurs de partage de ressources croisées (COR) sont courantes lors de la configuration de l'authentification des originaux croisés. Ajustez votre laravel config/cors.php:

'paths' => ['api/*', 'sanctum/csrf-cookie', '/login'],

Inclure le point de terminaison de connexion dans le tableau paths pour activer les demandes CORS.

tests et sécurité

Après la configuration, testez votre page de connexion. Inspectez la demande de connexion dans les outils de développement de votre navigateur (onglet réseau). Une réponse réussie sans erreurs CORS indique une configuration correcte. La combinaison de Nuxt 3 et Laravel Sanctum fournit une solution d'authentification robuste et facilement implémentée pour les spas et les API.

Avantages de nuxt-sanctum-authentication

Ce module simplifie l'authentification entre Nuxt 3 et Laravel Sanctum en manipulant les jetons CSRF, les jetons de porteur et soutenant de manière transparente SSR et CSR.

Conclusion

sécuriser votre application Nuxt 3 avec Laravel Sanctum est simplifié avec le module nuxt-sanctum-authentication. Ce guide fournit un chemin clair pour implémenter une authentification sécurisée et efficace pour vos utilisateurs.

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!