Aller au contenu principal

Apportez votre propre interface utilisateur

Logto vous permet d'apporter votre propre interface utilisateur pour remplacer complètement l'interface de l'expérience de connexion intégrée, en plus des options de personnalisation de l'interface utilisateur préconstruites. Cette fonctionnalité vous permet de télécharger un fichier zip contenant vos ressources d'interface utilisateur personnalisées (HTML, CSS, JavaScript, images, etc.), de les héberger sur les serveurs de Logto Cloud et de les utiliser comme expérience de connexion pour les utilisateurs de votre locataire.

remarque

Cette fonctionnalité nécessite que votre interface utilisateur personnalisée soit compatible avec les applications monopage (SPA), et il est recommandé d'utiliser toujours une version de production pour des performances optimales.

Explorer la fonctionnalité d'interface utilisateur personnalisée dans Logto Console

Commencez avec le projet officiel

La façon la plus rapide de lancer une interface utilisateur de connexion personnalisée est de cloner le projet d'expérience Logto. Il s'agit de l'interface utilisateur de l'expérience de connexion intégrée de Logto qui couvre toutes les fonctionnalités et les meilleures pratiques de Logto. Vous pouvez la personnaliser pour répondre à vos besoins.

Après avoir récupéré le code, il vous suffit d'exécuter la commande suivante pour construire le projet :

pnpm install && pnpm build
remarque

L'ensemble du projet Logto est un monorepo pnpm. Si vous souhaitez exécuter le package d'expérience de manière autonome (sans pnpm), remplacez workspace: les dépendances dans package.json par des numéros de version spécifiques (comme ^1.0.0).

Une fois la construction terminée, vous trouverez toutes les ressources compilées dans le répertoire dist. Ensuite, créez une archive ZIP du répertoire dist - cette archive sera utilisée pour le téléchargement vers Logto Cloud plus tard.

Exigences pour les ressources d'interface utilisateur personnalisées

Avant de télécharger vos ressources d'interface utilisateur personnalisées, assurez-vous qu'elles répondent aux exigences suivantes :

  • Les ressources téléchargées doivent être emballées sous forme d'un seul fichier zip.
  • Le fichier zip doit contenir un fichier index.html dans le répertoire racine.
  • Le fichier zip ne doit pas dépasser 20 Mo.
  • Le fichier zip ne doit pas contenir de fichier dépassant 10 Mo.
  • Le fichier zip ne doit pas contenir plus de 200 fichiers au total.

Téléchargez vos ressources d'interface utilisateur personnalisées

remarque

Procédez avec prudence lors de l'utilisation de cette fonctionnalité en production, car elle affectera immédiatement l'expérience de connexion de vos utilisateurs.

  1. Accédez à Console > Expérience de connexion > Branding > Apportez votre interface utilisateur.
  2. Cliquez pour sélectionner ou faites glisser et déposez votre fichier zip créé à l'étape précédente, et le processus de téléchargement commencera automatiquement.
  3. Une fois le téléchargement terminé, enregistrez les modifications, et votre interface utilisateur personnalisée sera immédiatement servie.
  4. La fenêtre "Aperçu de la connexion" sera désactivée lorsque vous utilisez votre interface utilisateur de connexion personnalisée. Cependant, vous pouvez toujours cliquer sur le bouton "Aperçu en direct" pour tester votre page de connexion personnalisée dans un nouvel onglet de navigateur ouvert.

Développez votre interface utilisateur personnalisée

Interagir avec Experience API

Votre interface utilisateur personnalisée doit interagir avec Experience API pour effectuer diverses actions telles que la connexion, l'inscription, la réinitialisation du mot de passe, la liaison de comptes sociaux, l'activation de MFA, et plus encore. Pour mieux comprendre les flux utilisateurs et les détails de mise en œuvre, nous vous recommandons de consulter notre RFC de conception de l'Experience API qui fournit des spécifications techniques complètes et des exemples.

Vous devez également accéder à d'autres configurations de l'expérience de connexion, telles que les couleurs de marque, le logo de l'entreprise, le favicon, la politique de mot de passe, les phrases de langue localisées, voire le CSS personnalisé, via le point de terminaison de l'Experience API de connexion.

Projets d'exemple

Nous fournissons une collection de projets d'exemple pour vous aider à comprendre et à commencer à implémenter rapidement une interface utilisateur personnalisée. Veuillez consulter le dépôt GitHub Logto Experience project pour plus de détails.

De plus, nous continuerons à travailler sur la fourniture de projets d'exemple plus simplifiés et basés sur des scénarios pour couvrir les cas d'utilisation les plus courants. Restez à l'écoute pour nos futures mises à jour !

Développement et débogage local

Pour le développement et le débogage local, nous fournissons l'outil CLI Logto Tunnel pour :

  • Proxifier les requêtes Experience API de votre machine locale vers le point de terminaison Logto Cloud.
  • Tester votre implémentation d'interface utilisateur personnalisée localement.

Cela permet aux utilisateurs de tester et de déboguer l'interface utilisateur personnalisée localement avant de la télécharger sur Logto Cloud.

Veuillez vous référer à Déboguer et tester votre interface utilisateur personnalisée localement pour plus de détails.

Téléchargez vos ressources d'interface utilisateur personnalisées en utilisant le CLI

En plus de télécharger via la Console, vous pouvez également utiliser le Logto CLI pour télécharger des ressources d'interface utilisateur personnalisées. Cela est particulièrement utile pour les flux de travail de déploiement automatisés.

Veuillez vous référer à Télécharger des ressources d'interface utilisateur personnalisées en utilisant le CLI pour plus de détails.

Restaurer l'expérience de connexion intégrée de Logto

Si vous souhaitez restaurer l'expérience de connexion intégrée de Logto, cliquez simplement sur le bouton de suppression sur la carte Apportez votre interface utilisateur. Après avoir enregistré les modifications, l'interface utilisateur de l'expérience de connexion sera rétablie à la valeur par défaut de Logto.

Ressources connexes

RFCS : Experience API

Exemples d'expérience

Apportez votre propre interface utilisateur de connexion à Logto Cloud