Intégration avec Webflow

Introduction#

Webflow est une plateforme SaaS pour la création et l'hébergement de sites web, offrant un éditeur visuel en ligne qui simplifie le processus de conception, de construction et de lancement de sites web avec un minimum de code.

Cet article te guidera à travers l'intégration de Logto avec tes projets Webflow, permettant ainsi une authentification des utilisateurs en toute transparence.

Prérequis#

1. Un compte Webflow avec la fonctionnalité de code personnalisé activée (requiert au moins le plan « Basic »).
2. Une instance Logto en cours d'exécution, soit auto-hébergée, soit en utilisant Logto Cloud.

Étapes d'intégration#

Préparation#

1. Accède à la console Logto, crée une application en utilisant le modèle « Vanilla JS » ou « Créer sans framework », et sélectionne « Application monopage » comme type d'application.
2. Dans le tableau de bord Webflow, crée un nouveau site.

Intégration du SDK JS#

Dans cette étape, nous allons ajouter du code personnalisé au niveau global à ton site. Comme Webflow est un site web statique, nous utiliserons le SDK @logto/browser (Vanilla JS) pour l'authentification des utilisateurs. Comme NPM ne peut pas être utilisé, nous importerons notre SDK via un service CDN comme jsdelivr.com.

1. Sur le tableau de bord Webflow, survole ton site nouvellement créé, et clique sur l'icône d'« Engrenage » dans le coin supérieur droit.
2. Dans la page des paramètres qui s'ouvre, trouve « Code personnalisé » dans le menu de navigation à gauche, et colle le code JavaScript suivant dans la section « Code dans la partie tête ». Tu peux trouver ton ID d'application et l'URL de l'endpoint dans les détails de l'application Logto.

Implémenter la connexion#

1. Accède à la console Logto, dans les paramètres de l'application, trouve le champ « Rediriger les URI » et saisis https://your-awesome-site.webflow.io/callback, puis clique sur « Enregistrer les modifications ».
2. Retourne dans le designer Webflow et ajoute un bouton « Connexion » sur la page d'accueil. Pour simplifier ce tutoriel, nous donnerons également l'ID « sign-in » au bouton pour une référence ultérieure en utilisant getElementById().

3. Maintenant, ajoutons du code personnalisé au niveau de la page d'accueil. Clique sur l'icône en forme d'engrenage dans le menu de la page, et trouve la section de code personnalisé au bas. Colle le code ci-dessous pour lier le gestionnaire de clics au bouton de connexion.

4. Crée une nouvelle page « Callback » dans Webflow et mets simplement du texte statique « Redirection... » dessus. Nous gérerons la logique de rappel de connexion sur cette page avec le code personnalisé suivant.

5. Maintenant, tu peux tester le flux de connexion en déployant ton site Webflow. Après le déploiement, le bouton « Connexion » devrait apparaître sur ta page d'accueil. Clique dessus pour naviguer vers la page de connexion hébergée par Logto. Une fois connecté, tu seras d'abord redirigé vers la page « Callback », où tu pourras voir le texte « Redirection... », puis de retour sur ta page d'accueil.

Implémenter la déconnexion#

1. Dans la console Logto, localise « Rediriger les URI après déconnexion » dans les paramètres de l'application et saisis l'URL de ton site Webflow https://your-awesome-site.webflow.io.
2. Retourne dans le designer Webflow et ajoute un bouton « Déconnexion » sur ta page d'accueil. De la même manière, donne l'ID « sign-out » au bouton et ajoute le code suivant au « Code personnalisé » au niveau de la page.

Gérer l'état d'authentification#

Dans le SDK Logto, on peut généralement utiliser la méthode logtoClient.isAuthenticated() pour vérifier l'état de l'authentification; si l'utilisateur est connecté, la valeur sera true; sinon, elle sera false.

Sur ton site Webflow, tu peux aussi l'utiliser pour afficher et masquer de manière programmée les boutons de connexion et de déconnexion. Applique le code personnalisé suivant pour ajuster les boutons CSS en conséquence.

Récupérer le nom d'utilisateur et afficher un message de bienvenue#

1. Ajoute un conteneur flex avec l'ID « container » sur la page d'accueil, et insère un élément « Titre 1 » dans le conteneur avec l'ID « username ».
2. Récupère automatiquement les informations de l'utilisateur après une connexion réussie, remplace le nom d'utilisateur dans l'élément « Titre 1 » et affiche le conteneur. Nous pouvons faire cela avec le code personnalisé suivant.

Point de contrôle : Teste ton application#

Maintenant, teste ton site Webflow :

1. Déploie et visite l'URL de ton site, le bouton de connexion devrait être visible.
2. Clique sur le bouton de connexion, le SDK lancera le processus de connexion, te redirigeant vers la page de connexion Logto.
3. Après t'être connecté, tu seras redirigé vers ton site, où tu verras le nom d'utilisateur et le bouton de déconnexion.
4. Clique sur le bouton de déconnexion pour te déconnecter.

Résumé#

Ce tutoriel t'a guidé à travers l'intégration de Webflow avec Logto. En utilisant le SDK @logto/browser, tu peux facilement intégrer l'authentification des utilisateurs sur n'importe lequel de tes sites Webflow en quelques étapes seulement.

Veuillez te référer au guide complet d'intégration Webflow sur notre site de documentation pour plus de détails, comme la récupération du jeton d'accès JWT et la gestion du RBAC (contrôle d'accès basé sur les rôles), etc.

La démonstration Webflow peut être trouvée ici en mode lecture seule, et le site déployé est disponible à l'adresse https://charless-trendy-site-f191c0.webflow.io/.