Aller au contenu principal

Apportez votre propre interface utilisateur

Logto vous permet d'apporter votre propre interface utilisateur pour remplacer complètement l'interface d'expérience de connexion intégrée, en plus des options de personnalisation de l'interface pré-construites. Cette fonctionnalité vous permet de télécharger un fichier zip contenant vos ressources UI 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 tenant.

remarque:

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

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

Commencer avec le projet officiel​

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

Après avoir récupéré le code, il 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 experience de manière autonome (sans pnpm), remplacez les dépendances workspace: 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 ultérieurement.

Exigences pour les ressources UI personnalisées​

Avant de télécharger vos ressources UI personnalisées, assurez-vous qu'elles respectent les exigences suivantes :

  • Les ressources à télécharger doivent être regroupées dans un seul fichier zip.
  • Le fichier zip doit contenir un fichier index.html à la racine.
  • Le fichier zip ne doit pas dépasser 20 Mo.
  • Le fichier zip ne doit contenir aucun fichier individuel de plus de 10 Mo.
  • Le fichier zip ne doit pas contenir plus de 200 fichiers au total.

Téléchargez vos ressources UI 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 > Connexion & compte > Branding > Apportez votre interface.
  2. Cliquez pour sélectionner ou faites glisser-déposer votre fichier zip créé à l'étape précédente, le processus de téléchargement démarrera automatiquement.
  3. Une fois le téléchargement terminé, enregistrez les modifications, et votre interface personnalisée sera immédiatement servie.
  4. La fenêtre "Aperçu de la connexion" sera désactivée lorsque vous utilisez votre interface 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 du navigateur.

Développez votre interface personnalisée​

Interagir avec Experience API​

Votre interface personnalisée doit interagir avec l’Experience API pour effectuer diverses actions telles que la connexion, l'inscription, la réinitialisation du mot de passe, l'association de comptes sociaux, l'activation de MFA, et plus encore. Pour mieux comprendre les flux utilisateurs et les détails d'implémentation, 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 la marque, le logo de l'entreprise, le favicon, la politique de mot de passe, les phrases localisées, voire le CSS personnalisé, via l’endpoint de l’Experience API de connexion.

Projets d'exemple​

Nous proposons une collection de projets d'exemple pour vous aider à comprendre et à commencer rapidement la mise en œuvre d'une interface personnalisée. Veuillez consulter le dépôt GitHub Logto Experience project pour plus de détails.

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

Développement local et débogage​

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

  • Proxifier les requêtes Experience API de votre machine locale vers l'endpoint Logto Cloud.
  • Tester localement la mise en œuvre de votre interface personnalisée.

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

Veuillez consulter Déboguer et tester votre interface personnalisée localement pour plus de détails.

Téléchargez vos ressources UI personnalisées avec la CLI​

En plus du téléchargement via la Console, vous pouvez également utiliser la CLI Logto pour télécharger vos ressources UI personnalisées. Ceci est particulièrement utile pour les workflows de déploiement automatisés.

Veuillez consulter Télécharger des ressources UI personnalisées avec la CLI pour plus de détails.

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

Si vous souhaitez revenir à l'expérience de connexion intégrée de Logto, il suffit de cliquer sur le bouton de suppression sur la carte "Apportez votre interface". Après avoir enregistré les modifications, l'interface de connexion sera rétablie à celle par défaut de Logto.

RFCS : Experience API

 Exemples d'expérience

Apportez votre propre interface de connexion à Logto Cloud