Apportez votre propre interface de connexion à Logto Cloud
Ce tutoriel vous guidera à travers le processus de création et de déploiement de votre propre interface de connexion personnalisée sur Logto Cloud.
CharlesDeveloper
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.
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.
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.
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.
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/.
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.
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
Allez dans votre application et cliquez sur le bouton "Se connecter".
Vous devriez être redirigé vers votre page de connexion personnalisée à http://localhost:9000/.
Entrez le nom d'utilisateur et le mot de passe, et cliquez sur le bouton "Soumettre".
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.
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.
