Apportez votre interface utilisateur

Logto vous permet d'apporter votre propre interface utilisateur pour remplacer complètement l'interface d'Authentification (sign-in) 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 l'héberger sur les serveurs Logto Cloud et de l'utiliser comme l'Expérience (sign-in) pour vos utilisateurs locataires.

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 d'initier une interface utilisateur d'Authentification (sign-in) personnalisée est de cloner le projet d'Expérience Logto. Il s'agit de l'interface utilisateur d'Authentification (sign-in) 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 vérifié le code, exécutez simplement 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: 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 de l'interface utilisateur personnalisée

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 (sign-in) de vos utilisateurs.

1. Accédez à Console > Expérience (sign-in) > 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 l'Authentification (sign-in)" sera désactivée lorsque vous utilisez votre interface utilisateur d'Authentification (sign-in) personnalisée. Cependant, vous pouvez toujours cliquer sur le bouton "Aperçu en direct" pour tester votre page d'Authentification (sign-in) personnalisée dans un nouvel onglet de navigateur ouvert.

Développez votre interface utilisateur personnalisée

Interagissez avec l'Experience API

Votre interface utilisateur personnalisée doit interagir avec l' Experience API pour effectuer diverses actions telles que l'Authentification (sign-in), l'inscription, la réinitialisation du mot de passe, la liaison de comptes sociaux, l'activation de l'Authentification multi-facteurs (MFA), et plus encore. Pour mieux comprendre les flux utilisateur et les détails de l'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 (sign-in), telles que les couleurs de la 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.

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 du projet d'Expérience Logto 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 Logto Tunnel CLI pour :

• Proxifier les requêtes de l'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 workflows 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'interface utilisateur d'Authentification (sign-in) intégrée de Logto

Si vous souhaitez restaurer l'interface utilisateur d'Authentification (sign-in) 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 d'Authentification (sign-in) sera rétablie à la valeur par défaut de Logto.

Ressources connexes

RFCS : Experience API

Exemples d'Expérience

Apportez votre propre interface utilisateur d'Authentification (sign-in) à Logto Cloud