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.

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

  • Es gibt einige Einschränkungen für Bilder: Sie müssen unter 500KB groß sein und im SVG-, PNG-, JPG-, JPEG- oder ICO-Format vorliegen.
  • Wenn du das Logo-Feld 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 Browser-Oberfläche angezeigt wird.

  • Das Bild muss unter 500KB 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.

Logto-Branding ausblenden​

Standardmäßig zeigen die sofort einsatzbereiten Anmeldeseiten „Powered by Logto“ am unteren Rand an. Aktiviere die Option „Logto-Branding ausblenden“, um das Logto-Zeichen zu entfernen und ein sauberes, professionelles Anmeldeerlebnis zu schaffen, das ausschließlich deine eigene Markenidentität präsentiert.

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 von „App-spezifisches Anmeldeerlebnis“ kannst du für jede App spezifische Branding-Logos, Favicons, Farben und sogar benutzerdefiniertes CSS festlegen. Wenn eine Anmeldung von einer App mit aktiviertem App-spezifischem Branding ausgelöst wird, wird das Anmeldeerlebnis entsprechend den App-spezifischen Branding-Einstellungen angepasst; andernfalls werden die Standard-Einstellungen des Omni-Anmeldeerlebnisses verwendet.

Sowohl Einstellungen für den hellen als auch für den dunklen Modus 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 von „Organisationsspezifisches Anmeldeerlebnis“ kannst du, wie beim App-spezifischen Branding, für jede Organisation spezifische Branding-Logos, Favicons, Farben und benutzerdefiniertes CSS 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 Einstellungen für den hellen als auch für den dunklen Modus 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({
  // ...weitere 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?