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 > Branding. Cette section vous permet d'ajuster facilement les éléments clés de votre marque.

Couleur de la marque

Définissez la couleur principale utilisée tout au long de l'expérience de connexion, y compris les boutons principaux, les liens et d'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 expansion.

  • Il y a 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 est affichée 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 effet de présentation.
  • Une version du favicon pour le mode sombre peut également être téléchargée.
  • De plus, le titre du navigateur pour 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.

Branding spécifique à l'application​

Si votre entreprise multi-applications a besoin d'expériences de connexion au niveau des applications, vous pouvez configurer cela dans la page des détails de l'application. Naviguez vers Console > Applications.

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

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

Branding 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. Naviguez vers Console > Organisations.

Ensuite, lors du déclenchement d'une connexion, vous pouvez passer l'ID 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 pour l'ID d'organisation 123456 :

  • Si vous utilisez Logto SDK, 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 requête du point de terminaison d'autorisation.

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

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

index.ts

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

Nous déployons progressivement la fonctionnalité extraParams à 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 ?