Apportez votre propre interface de connexion à Logto Cloud

Contexte#

Logto offre une interface utilisateur d'expérience de connexion prête à l'emploi qui couvre toutes les fonctionnalités de Logto, y compris la connexion, l'inscription, la récupération de mot de passe, la connexion unique (SSO) et plus encore. Les utilisateurs peuvent également personnaliser l'apparence et la convivialité de l'interface utilisateur d'expérience de connexion grâce à notre fonctionnalité "CSS personnalisé".

Cependant, certains utilisateurs souhaitent encore personnaliser en profondeur leur expérience de connexion (à la fois l'interface utilisateur et les flux d'authentification) pour correspondre à leur image de marque et à leurs exigences commerciales spécifiques. Nous vous avons entendu ! Et nous sommes ravis d'annoncer que la fonctionnalité "Apportez votre propre UI" est maintenant disponible sur Logto Cloud.

Dans ce tutoriel, nous vous guiderons à travers les étapes pour créer et déployer votre propre interface de connexion personnalisée sur Logto Cloud.

Prérequis#

Avant de commencer, assurez-vous d'avoir les éléments suivants :

• Un compte Logto Cloud avec un plan d'abonnement
• Une application intégrée à Logto (Démarrières rapides)
• Logto tunnel CLI installé
• Connaissance de base en HTML, CSS et JavaScript

Pour des raisons de simplicité, nous utiliserons la méthode classique de connexion "nom d'utilisateur & mot de passe" dans les étapes suivantes. N'oubliez pas de changer votre méthode de connexion dans la Console de Logto.

Créez votre interface de connexion personnalisée#

L'exigence minimale pour une interface de connexion est d'avoir un fichier index.html, avec un formulaire de connexion comprenant au moins un champ de saisie pour le nom d'utilisateur, un champ de saisie pour le mot de passe, et un bouton de soumission. J'ai utilisé ChatGPT pour générer un HTML d'exemple, et voici la page de connexion rose amusante que j'ai créée.

J'ai omis les styles CSS pour simplifier, et voici à quoi ressemble le HTML simple :

Vous pouvez également commencer avec un modèle de votre framework frontal préféré, comme Create React App, Next.js ou Vue CLI.

Puisque Logto est open-source, une autre recommandation est de cloner le projet Logto Experience, et de modifier le code pour répondre à vos besoins. Il s'agit de l'interface utilisateur complète d'expérience de connexion intégrée de Logto, écrite en React et TypeScript.

Configurer Logto tunnel CLI#

Logto tunnel CLI est un outil qui non seulement sert vos pages HTML, mais vous permet également d'interagir avec l'API Experience de Logto depuis vos pages HTML dans un environnement de développement local.

En supposant que votre page index.html soit située dans /path/to/your/custom-ui, et que votre ID de locataire Logto soit foobar, vous pouvez exécuter la commande de cette façon :

Ou, si vous utilisez un framework d'interface utilisateur qui a un serveur de développement intégré, et que votre page est servie à http://localhost:4000, vous pouvez exécuter la commande comme ceci :

Après avoir exécuté la commande, le service de tunnel sera démarré sur votre machine locale http://localhost:9000/.

Déclencher la connexion depuis votre application#

Allez à l'application que vous avez créée précédemment, et changez le point de terminaison Logto de https://foobar.logto.app/ en http://localhost:9000/ dans votre configuration SDK de Logto.

Prenons notre exemple de projet React :

Cliquez sur le bouton "Se connecter" dans votre application. Au lieu de voir l'interface utilisateur de connexion intégrée de Logto, vous devriez maintenant être redirigé vers votre page de connexion personnalisée.

Interagir avec l'API Experience de Logto#

Dans cette étape, nous interagirons avec l'API Experience de Logto dans votre interface utilisateur personnalisée. Tout d'abord, créons un fichier script.js et ajoutons la référence dans votre index.html.

Placez le code suivant dans votre fichier script.js.

Ce script complétera le flux de connexion par nom d'utilisateur et mot de passe avec l'aide de ces API :

• PUT /api/experience - Démarrer l'interaction de connexion
• POST /api/experience/verification/password - Vérifier le nom d'utilisateur et le mot de passe
• POST /api/experience/identification - Identifier l'utilisateur pour l'interaction en cours
• POST /api/experience/submit - Soumettre l'interaction de connexion

Référez-vous à la documentation de l'API Experience de Logto pour plus de détails.

Testez votre page de connexion personnalisée#

1. Allez dans votre application et cliquez sur le bouton "Se connecter".
2. Vous devriez être redirigé vers votre page de connexion personnalisée à http://localhost:9000/.
3. Entrez le nom d'utilisateur et le mot de passe, et cliquez sur le bouton "Soumettre".
4. Si tout est configuré correctement, vous devriez être redirigé vers votre application, avec les informations de l'utilisateur authentifié.

Déployez votre interface de connexion personnalisée sur Logto Cloud#

Une fois que vous avez terminé de développer et de tester votre interface de connexion personnalisée localement, vous pouvez la déployer sur Logto Cloud. Créez simplement un fichier zip de votre dossier UI personnalisé et téléchargez-le dans la section "Custom UI" de votre Console Logto.

Après le téléchargement, enregistrez les changements et votre interface de connexion personnalisée sera mise en ligne dans votre locataire Logto Cloud, remplaçant l'expérience de connexion intégrée de Logto.

Enfin, retournez dans votre application et changez l'URI du point de terminaison en votre point de terminaison Logto cloud : https://foobar.logto.app/. Cette fois, vous pouvez arrêter le service de tunnel Logto, et votre application devrait désormais fonctionner directement avec l'UI personnalisée hébergée en ligne.

Conclusion#

Dans ce tutoriel, nous vous avons guidé à travers le processus d'implémentation et de déploiement de votre propre interface de connexion personnalisée sur Logto Cloud.

Avec cette fonctionnalité, vous pouvez maintenant personnaliser en profondeur votre interface de connexion et vos flux d'authentification pour correspondre à votre image de marque et à vos exigences commerciales spécifiques.

Bon codage ! 🚀