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'Authentification (sign-in experience), 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é 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 maintenant 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 nécessite des expériences de connexion au niveau de l'application, 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 un branding 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'Authentification (sign-in experience) 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 (organization) de votre client dans l'Authentification (sign-in experience), vous pouvez télécharger les logos des Organisations (organizations) dans la page des paramètres de l’Organisation (organization). Naviguez vers Console > Organisations.

Ensuite, lors du déclenchement d'une connexion, vous pouvez passer l'ID de l’Organisation (organization) dans le paramètre organization_id pour indiquer à Logto quel logo d’Organisation (organization) afficher. Par exemple, pour afficher le logo de l’Organisation (organization) pour l'ID d’Organisation (organization) 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 (organization). 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 Logto browser SDK :

index.ts

logtoClient.signIn({
  // ...other parameters
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
remarque

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