Aller au contenu principal

Adaptez à votre marque

Expérience de connexion omni​

Personnalisez l'apparence de votre page de connexion en naviguant vers Console > Expérience de connexion > Personnalisation. Cette section vous permet d'ajuster facilement les principaux éléments de votre marque.

Couleur de la marque

Définissez la couleur principale utilisée dans toute l'expérience de connexion, y compris les boutons principaux, les liens et autres composants. Remplacez la couleur violette par défaut de Logto par la couleur de votre marque. Pour le mode sombre, une couleur de marque distincte peut être spécifiée.

Logo de l'entreprise

Le logo sera affiché sur la page d'accueil de connexion, la page d'inscription, la page de chargement et d'autres interfaces avec notre extension.

  • Il existe certaines limitations pour les images : elles doivent être inférieures à 500 Ko et au format SVG, PNG, JPG, JPEG ou ICO.
  • Si vous laissez le champ du logo vide, le logo ne s'affichera pas dans l'interface.
  • Une version du logo pour le mode sombre peut également être téléchargée.

Favicon

Un favicon est une petite icône représentant un site web et s'affiche dans l'onglet du navigateur, les favoris et d'autres zones de l'interface du navigateur.

  • L'image doit être inférieure à 500 Ko et au format SVG, PNG, JPG, JPEG ou ICO. Il est recommandé de télécharger une image carrée pour garantir un bon rendu.
  • Une version du favicon pour le mode sombre peut également être téléchargée.
  • De plus, le titre du navigateur pour les différents flux (Connexion / Inscription / Mot de passe oublié, etc.) est désormais utilisé à la place d'un titre personnalisé.

Mode sombre

Activez le mode sombre pour ajuster automatiquement l'apparence de la page de connexion en fonction des préférences système de l'utilisateur.

Personnalisation spécifique à l'application​

Si votre activité multi-applications nécessite des expériences de connexion au niveau de l'application, vous pouvez configurer cela dans la page de détails de l'application. Rendez-vous sur Console > Applications.

En activant "Expérience de connexion au niveau de l'application", vous pouvez définir des logos, favicons, couleurs et même CSS personnalisé spécifiques pour chaque application. Lorsqu'une connexion est initiée depuis une application avec la personnalisation activée, l'expérience de connexion sera adaptée selon les paramètres de personnalisation de l'application ; sinon, elle reviendra aux paramètres par défaut de l'expérience de connexion omni.

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

Personnalisation spécifique à l'organisation​

Pour afficher dynamiquement le logo de l'organisation de votre client dans l'expérience de connexion, vous pouvez télécharger les logos des organisations dans la page des paramètres de l'organisation. Rendez-vous sur Console > Organisations.

En activant "Expérience de connexion au niveau de l'organisation", comme pour la personnalisation au niveau de l'application, vous pouvez également définir des logos, favicons, couleurs et CSS personnalisé spécifiques pour chaque organisation.

Ensuite, lors du déclenchement d'une connexion, vous pouvez transmettre 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 de l'organisation avec l'identifiant 123456 :

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

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

remarque:

Si la personnalisation au niveau de l'application et celle au niveau de l'organisation sont toutes deux activées, la personnalisation au niveau de l'organisation aura la priorité. L'ordre de priorité complet est : Personnalisation au niveau de l'organisation -> Personnalisation au niveau de l'application -> Expérience de connexion omni

Voici un exemple de transmission du paramètre organization_id dans la méthode signIn en utilisant le SDK Logto browser :

index.ts

logtoClient.signIn({
  // ...autres paramètres
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
remarque:

Nous déployons progressivement la fonctionnalité extraParams sur tous les SDK Logto. Si vous ne la voyez pas encore dans votre SDK, veuillez nous contacter.

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