Solution d'authentification full-stack avec Logto sur Netlify : Protection des applications web et des fonctions serverless

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

Consultez l'aperçu de la démonstration en ligne.

Prérequis#

Voici les éléments dont vous aurez besoin pour commencer ce tutoriel :

• Un compte Netlify
• Un compte Logto Cloud ou une instance Logto auto-hébergée

Créer une application React avec Vite#

Suivez le Guide de démarrage de Vite pour créer une application React.

Suivez le guide de création et sélectionnez la pile technologique de votre choix. Dans cet article, nous choisirons React + TypeScript.

Ensuite, entrez dans le répertoire racine du projet, installez les dépendances selon le guide, et exécutez l'application.

Déployer l'application en utilisant Netlify#

Suivez les guides Get started with Netlify pour déployer votre application.

Une fois que vous avez déployé votre application, vous pouvez voir le site en ligne à https://<your-site-name>.netlify.app.

Notez bien cette URL car nous en aurons besoin plus tard pour configurer Logto.

Intégrer Logto dans votre application#

Pour commencer avec l'authentification Logto :

1. Naviguez vers la page "Applications" dans la Console Logto
2. 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
3. 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
4. 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 :

Maintenant, notre routage devrait fonctionner correctement.

Créer des API backend avec les fonctions Netlify#

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 :

Protéger vos fonctions Netlify avec Logto#

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 :

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

2. Configurez votre application pour utiliser cette ressource API en ajoutant l'identifiant à vos variables d'environnement Netlify :

3. Mettez à jour votre configuration Logto pour inclure cette ressource API :

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

Test de notre démo#

Maintenant, déployez votre application sur Netlify et testez-la ! Vous pouvez vous référer à l'aperçu de la démonstration en ligne ici.

1. Visitez le site en direct à https://<your-site-name>.netlify.app
2. Cliquez sur le bouton "Se connecter" dans la barre de navigation
3. Connectez-vous avec un compte utilisateur Logto, et vous verrez que vous êtes connecté.
4. Cliquez sur l'onglet "Ressource Protégée" dans la barre de navigation, et vous serez redirigé vers la page protégée.
5. Cliquez sur le bouton "Voir la Ressource Protégée", et vous verrez les données de réponse du point de terminaison api/hello.
6. Cliquez sur le bouton "Se déconnecter" dans la barre de navigation, et vous serez redirigé vers la page d'accueil.

Conclusion#

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.