Zum Hauptinhalt springen

Passe dein Branding an

Omni-Anmeldeerlebnis​

Passe das Aussehen und das Gefühl deiner Anmeldeseite an, indem du zu Konsole > Anmeldeerlebnis > Branding navigierst. In diesem Abschnitt kannst du wichtige Branding-Elemente ganz einfach anpassen.

Markenfarbe

Definiere die Primärfarbe, die im gesamten Anmeldeerlebnis verwendet wird, einschließlich primärer Schaltflächen, Links und anderer Komponenten. Ersetze das standardmäßige Logto-Lila durch die Farbe deiner Marke. Für den Dunkelmodus kann eine separate Markenfarbe festgelegt werden.

Firmenlogo

Das Logo wird auf der Anmelde-Startseite, der Registrierungs-Startseite, der Lade-Seite und anderen Oberflächen mit unserer Erweiterung angezeigt.

  • Es gibt einige Einschränkungen für Bilder: Sie müssen unter 500 KB groß sein und im SVG-, PNG-, JPG-, JPEG- oder ICO-Format vorliegen.
  • Wenn du das Logofeld leer lässt, wird das Logo nicht in der Oberfläche angezeigt.
  • Eine Version des Logos für den Dunkelmodus kann ebenfalls hochgeladen werden.

Favicon

Ein Favicon ist ein kleines Symbol, das eine Website repräsentiert und im Browser-Tab, in Lesezeichen und anderen Bereichen der Browseroberfläche angezeigt wird.

  • Das Bild muss unter 500 KB groß sein und im SVG-, PNG-, JPG-, JPEG- oder ICO-Format vorliegen. Es wird empfohlen, ein quadratisches Bild hochzuladen, um eine gute Darstellung zu gewährleisten.
  • Eine Version des Favicons für den Dunkelmodus kann ebenfalls hochgeladen werden.
  • Außerdem wird jetzt der Browser-Titel für verschiedene Abläufe (Anmelden / Registrieren / Passwort vergessen usw.) anstelle eines benutzerdefinierten Titels verwendet.

Dunkelmodus

Aktiviere den Dunkelmodus, um das Erscheinungsbild der Anmeldeseite automatisch an die Systemeinstellungen des Benutzers anzupassen.

App-spezifisches Branding​

Wenn dein Multi-App-Geschäft App-spezifische Anmeldeerlebnisse benötigt, kannst du dies auf der Anwendungsdetailseite konfigurieren. Navigiere zu Konsole > Anwendungen.

Durch das Aktivieren des "App-spezifischen Anmeldeerlebnisses" kannst du spezifische Branding-Logos, Favicons, Farben und sogar benutzerdefiniertes CSS für jede App festlegen. Wenn eine Anmeldung von einer App mit aktiviertem App-spezifischen Branding initiiert wird, wird das Anmeldeerlebnis entsprechend den App-spezifischen Branding-Einstellungen angepasst; andernfalls werden die Standard-Einstellungen des Omni-Anmeldeerlebnisses verwendet.

Sowohl helle als auch dunkle Modus-Einstellungen sind für das App-spezifische Branding verfügbar. Die Einstellungen für den Dunkelmodus werden nur wirksam, wenn der Dunkelmodus in den Omni-Anmeldeerlebnis-Einstellungen aktiviert ist.

Organisationsspezifisches Branding​

Um das Logo der Organisation deines Kunden dynamisch im Anmeldeerlebnis anzuzeigen, kannst du die Organisationslogos auf der Seite mit den Organisationseinstellungen hochladen. Navigiere zu Konsole > Organisationen.

Durch das Aktivieren des "Organisationsspezifischen Anmeldeerlebnisses" kannst du, wie beim App-spezifischen Branding, auch spezifische Branding-Logos, Favicons, Farben und benutzerdefiniertes CSS für jede Organisation festlegen.

Wenn du dann eine Anmeldung auslöst, kannst du die Organisations-ID im Parameter organization_id übergeben, um Logto mitzuteilen, welches Organisationslogo angezeigt werden soll. Zum Beispiel, um das Organisationslogo für die Organisations-ID 123456 anzuzeigen:

  • Wenn du das Logto SDK verwendest, kannst du den Parameter organization_id im Objekt extraParams der Methode signIn übergeben.
  • Wenn du einen OIDC-Client verwendest, kannst du den Parameter organization_id beim Aufruf des Autorisierungsendpunkts übergeben.

Sowohl helle als auch dunkle Modus-Einstellungen sind für das organisationsspezifische Branding verfügbar. Die Einstellungen für den Dunkelmodus werden nur wirksam, wenn der Dunkelmodus in den Omni-Anmeldeerlebnis-Einstellungen aktiviert ist.

hinweis:

Wenn sowohl App-spezifisches Branding als auch organisationsspezifisches Branding aktiviert sind, hat das organisationsspezifische Branding Vorrang. Die vollständige Reihenfolge der Priorität ist: Organisationsspezifisches Branding -> App-spezifisches Branding -> Omni-Anmeldeerlebnis

Hier ist ein Beispiel, wie du den Parameter organization_id in der Methode signIn mit dem Logto Browser SDK übergibst:

index.ts

logtoClient.signIn({
  // ...andere Parameter
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
hinweis:

Wir führen das extraParams-Feature schrittweise in allen Logto SDKs ein. Wenn du es in deinem SDK noch nicht siehst, kontaktiere uns bitte.

Wie kann man das Anmeldeerlebnis für jede App oder Organisation anpassen?