Solution d'authentification full-stack avec Logto sur Netlify : Protection des applications web et des fonctions serverless
Montre comment sécuriser les applications web Netlify et les fonctions serverless avec l'authentification Logto, avec des exemples de code source et un aperçu de démonstration en direct.
YijunDeveloper
Arrêtez de perdre des semaines sur l'authentification des utilisateurs
Lancez des applications sécurisées plus rapidement avec Logto. Intégrez l'authentification des utilisateurs en quelques minutes et concentrez-vous sur votre produit principal.
Netlify est une plateforme puissante pour déployer et héberger des projets web modernes, offrant une intégration Git transparente, des constructions automatisées et des fonctions serverless pour un flux de développement rapide et évolutif.
Dans ce guide complet, vous apprendrez à :
Mettre en œuvre l'authentification dans une Application Monopage (SPA) en utilisant Logto sur Netlify, illustré avec un exemple Vite + React
Sécuriser vos fonctions serverless Netlify avec l'authentification Logto
Déployer une application prête pour la production en utilisant notre implémentation de référence : example-vite-react-logto
Naviguez vers la page "Applications" dans la Console Logto
Créez une nouvelle application
Sélectionnez votre framework frontend (React dans notre exemple)
Remarque : Vous pouvez créer n'importe quelle Application Monopage (SPA) ou application native selon vos besoins
Suivez le guide d'intégration fourni dans :
Le guide intégré de la Console Logto, ou
Le guide d'intégration d'authentification officiel React
Depuis la page des détails de l'application, notez :
Votre identifiant d'application
Le point de terminaison Logto (trouvé dans la section "Endpoints & Credentials", généralement au format https://<your-instance>.logto.app/)
Ces informations d'identification seront nécessaires dans les étapes suivantes.
Notez que dans notre démo, nous utilisons la route /callback pour gérer la redirection de connexion de Logto. Les URI de redirection dans Logto doivent être configurés comme https://<your-site-name>.netlify.app/callback. Après la déconnexion des utilisateurs, nous revenons à la page d'accueil, donc nous définissons les URI de redirection après déconnexion sur https://<your-site-name>.netlify.app.
Ensuite, définissez les informations de notre application Logto créée dans les variables d'environnement de Netlify (Votre site web -> configuration du site -> Variables d'environnement) :
Ensuite, nous utilisons ces configurations dans notre projet frontend :
Vous pouvez voir le code final intégré ici : example-vite-react-logto.
Notez que lorsque nous déployons sur Netlify et nous connectons via Logto, notre URL ne redirige pas automatiquement vers notre page de rappel. C'est parce que Netlify ne prend pas en charge le routage côté client pour les applications monopages (SPA) par défaut.
Quand vous visitez des chemins comme /callback, Netlify essaiera de trouver les fichiers correspondants sur le serveur au lieu de rediriger la demande vers votre application React.
À ce stade, nous devons créer un fichier _redirects dans le répertoire public de votre projet Netlify pour indiquer à Netlify de rediriger toutes les demandes vers votre index.html :
Alternativement, vous pouvez créer un fichier netlify.toml dans la racine de votre projet :
Les fonctions Netlify offrent une manière simple mais puissante de construire des API backend. Avec les fonctions Netlify, nous pouvons écrire de la logique côté serveur sans nous soucier de la configuration et de la maintenance traditionnelles des serveurs.
Ces fonctions sont contrôlées par version, construites et déployées en même temps que votre site web, rendant le processus de développement et de déploiement fluide entre le frontend et le backend.
Commençons à construire nos API backend en utilisant les fonctions Netlify.
Tout d'abord, nous devons créer un répertoire functions sous le répertoire netlify du projet, puis créer un fichier hello.ts :
Quand nous visitons https://<your-site-name>.netlify.app/.netlify/functions/hello, cette fonction sera appelée et renverra "Hello world!".
Si vous trouvez que le chemin /.netlify/functions/hello semble un peu étrange, vous pouvez configurer une redirection pour invoquer la fonction en ajoutant une règle de redirection dans le fichier public/_redirects :
De cette façon, quand nous visitons https://<your-site-name>.netlify.app/api/hello, cela appellera notre fonction et retournera "Hello world!". C'est en fait la manière courante de construire des API en utilisant les fonctions Netlify.
Et nous pouvons accéder à cette API dans notre projet frontend en utilisant fetch :
Maintenant que nous avons une API backend, nous devons nous assurer que seuls les utilisateurs authentifiés peuvent y accéder. Nous protégerons nos fonctions Netlify en utilisant le mécanisme d'authentification de Logto.
Pour protéger nos points de terminaison API :
Créez une ressource API dans la Console Logto pour représenter notre API backend :
Allez dans "Ressources API" dans la Console Logto et créez une nouvelle API
Définissez un nom et un identifiant API (par exemple, https://api.backend.com)
Notez l'identifiant de l'API sur la page des détails de la ressource API car nous en aurons besoin plus tard
Configurez votre application pour utiliser cette ressource API en ajoutant l'identifiant à vos variables d'environnement Netlify :
Mettez à jour votre configuration Logto pour inclure cette ressource API :
Lors de l'envoi de demandes vers des points de terminaison protégés, votre frontend doit inclure un jeton d'accès valide. Voici comment le demander et l'utiliser :
Maintenant, implémentons la validation du token dans notre backend pour nous assurer que seules les demandes avec des jetons d'accès valides sont traitées.
Tout d'abord, nous devons installer la dépendance jose pour nous aider à vérifier le jeton JWT :
Ensuite, nous pouvons implémenter la validation du token dans notre backend :
Maintenant, mettons à jour notre fonction Netlify pour utiliser la fonction verifyLogtoToken :
Voilà ! Maintenant, notre fonction Netlify est protégée par Logto et seules les demandes avec des jetons d'accès valides seront traitées.
Ce guide démontre comment intégrer l'authentification Logto dans une application web déployée sur Netlify.
En configurant des applications Logto et des ressources API, nous avons mis en œuvre l'authentification côté frontend et protégé les points de terminaison des Fonctions Netlify.
Pour un contrôle d'accès plus granulaire, vous pouvez exploiter les capacités RBAC (Contrôle d'accès basé sur les rôles) de Logto en définissant des rôles et des permissions dans la Console Logto et en validant les rôles des utilisateurs au sein des Fonctions Netlify.
