Apportez votre propre interface de connexion à Logto Cloud

Contexte#

Logto propose une interface utilisateur 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 de connexion grâce à notre fonctionnalité "CSS personnalisé".

Cependant, certains utilisateurs souhaitent toujours personnaliser profondément leur expérience de connexion (à la fois l'interface utilisateur et les flux d'authentification) pour s'adapter à leur 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 désormais disponible dans Logto Cloud.

Dans ce tutoriel, nous vous guiderons étape par étape 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émarrages rapides)
• Logto tunnel CLI installé
• Connaissances de base en HTML, CSS et JavaScript

Pour simplifier, nous utiliserons la méthode classique de connexion "nom d'utilisateur & mot de passe" dans les étapes suivantes. N'oubliez pas de modifier votre méthode de connexion dans la Console 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 qui inclut 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 exemple de HTML, et voici une jolie page de connexion rose.

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

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

Étant donné que Logto est open source, une autre recommandation est de cloner le projet Logto Experience, et de modifier le code pour l'adapter à vos besoins. Il s'agit de l'interface complète de connexion intégrée à 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 l'environnement de développement local.

Supposons que votre page index.html se trouve dans le répertoire /path/to/your/custom-ui, et que votre ID de locataire Logto soit foobar, vous pouvez exécuter la commande suivante :

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

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

Déclencher la connexion depuis votre application#

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

Prenons comme exemple notre projet d'application de React :

Cliquez sur le bouton "Se connecter" dans votre application. Au lieu de voir l'interface 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 allons interagir avec l'API Experience de Logto dans votre interface personnalisée. Tout d'abord, créons un fichier script.js et ajoutons la référence dans votre index.html.

Mettez 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 APIs :

• 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

Reportez-vous à la documentation API Logto Experience 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 à l'adresse http://localhost:9000/.
3. Entrez le nom d'utilisateur et le mot de passe, puis cliquez sur le bouton "Soumettre".
4. Si tout est correctement configuré, vous devriez être redirigé vers votre application avec les informations d'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 en local, vous pouvez la déployer sur Logto Cloud. Créez simplement un fichier zip de votre dossier d'UI personnalisé et téléchargez-le dans la section "UI personnalisée" de votre Console Logto.

Après le téléchargement, sauvegardez les modifications, et votre interface de connexion personnalisée sera 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 de retour à votre point de terminaison cloud Logto : https://foobar.logto.app/. Cette fois, vous pouvez arrêter le service de tunnel Logto, et votre application devrait maintenant fonctionner directement avec l'UI personnalisée hébergée en ligne.

Conclusion#

Dans ce tutoriel, nous vous avons guidé à travers le processus de mise en œuvre et de déploiement de votre propre interface de connexion personnalisée sur Logto Cloud.

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

Bon codage ! 🚀