Comment puis-je personnaliser l'expérience de connexion pour chaque application ou organisation ?

Configurer un flux de connexion pour votre application est assez courant, mais parfois vous rencontrez un scénario un peu complexe,

1. Vous gérez une entreprise multi-applications.
2. Vous avez une application multi-locataires qui prend en charge différents espaces de travail.

L'approche la plus simple consiste à maintenir une expérience de connexion universelle pour toutes les applications et organisations. Par exemple, HubSpot propose une large gamme de produits, mais leur expérience de connexion est cohérente sur l'ensemble de ceux-ci. Cela aide à mettre l'accent sur la marque parent, comme HubSpot, plutôt que sur des produits individuels comme Marketing Hub.

Connexion au niveau de l'application#

Certaines entreprises suivent une stratégie multi-produit mais préfèrent maintenir un seul pool d'utilisateurs. Par exemple, Atlassian, une entreprise SaaS bien connue, propose plusieurs logiciels comme Jira et Confluence. Voici leur écran de connexion.

L'URL de connexion inclut le paramètre ?bundle=jira-software pour indiquer qu'il s'agit de l'interface de connexion pour le produit Jira.

L'URL de connexion inclut le paramètre ?bundle=confluence pour spécifier qu'il s'agit de l'interface de connexion pour le produit Confluence.

Différences dans l'interface utilisateur de connexion entre les apps :

1. Ils utilisent différents logos pour indiquer le produit spécifique.
2. Ils ont des looks distincts, tels que des polices et des styles de boutons variés.

Cependant, les principales méthodes d'authentification restent cohérentes sur toutes les applications. Cela garantit que les utilisateurs ont un profil unifié, y compris leurs identifiants (email, comptes sociaux) et facteurs d'authentification (par exemple, mots de passe), pour une gestion d'identité plus efficace.

Connexion au niveau de l'organisation#

Un autre exemple est Notion, une application multi-locataires qui permet à différents clients d'héberger des espaces de travail distincts. Par exemple, si vous entrez

Si "Silverhand" est le nom de l'espace de travail, Notion affichera l'interface utilisateur de connexion spécifique à l'organisation. La seule différence est le logo ; tout le reste reste le même.

Comment pouvons-nous personnaliser l'expérience de connexion pour chaque application ou organisation ?#

Tout d'abord, vous avez besoin d'une solution d'identité et d'authentification comme fondation pour construire dessus. Prenons Logto comme exemple pour montrer les solutions. Logto offre plusieurs options pour y parvenir :

Configurez-le directement sur Logto Cloud#

C'est la solution rapide et la plus simple si vous voulez juste un logo personnalisé et une couleur de bouton.

Configurer au niveau de l'application#

En activant "expérience de connexion au niveau de l'application", vous pouvez configurer une marque spécifique et des couleurs pour chaque application. Lorsqu'une connexion est initiée depuis une application avec un marquage au niveau de l'application activé, l'expérience de connexion sera personnalisée selon les paramètres de marquage au niveau de l'application ; sinon, elle utilisera par défaut les paramètres de l'expérience de connexion omni.

Les paramètres en mode clair et en mode sombre sont disponibles pour le marquage au niveau de l'application. Les paramètres en mode sombre ne prendront effet que lorsque le mode sombre est activé dans les paramètres de l'expérience de connexion omni.

Configurer au niveau de l'organisation#

Ensuite, lors du déclenchement d'une connexion, vous pouvez passer l'identifiant de l'organisation dans le paramètre organization_id pour indiquer à Logto quel logo d'organisation afficher. Par exemple, pour afficher le logo d'organisation pour l'identifiant de l'organisation 123456 :

• Si vous utilisez le SDK Logto, vous pouvez passer le paramètre organization_id dans l'objet extraParams de la méthode signIn.
• Si vous utilisez un client OIDC, vous pouvez passer le paramètre organization_id lors de la demande du point de terminaison d'autorisation.

Voici un exemple de comment passer le paramètre organization_id dans la méthode signIn en utilisant le SDK navigateur Logto :

Apportez votre propre UI si vous avez besoin d'une personnalisation plus poussée#

Si personnaliser le logo et la couleur n'est pas suffisant — par exemple, si vous souhaitez masquer des options spécifiques de connexion sociale ou changer complètement l'apparence — vous pouvez télécharger votre propre interface utilisateur sur Logto Cloud.

Pour afficher différentes interfaces utilisateur en fonction de l'application ou de l'organisation, utilisez les paramètres de recherche organization_id et app_id. Ensuite, écrivez un script pour contrôler l'interface utilisateur en fonction de ces paramètres. Pour plus de détails, consultez le tutoriel "Apportez votre propre interface utilisateur".