Passe dein Branding an

Omni-Anmeldeerfahrung

Passe das Aussehen und die Haptik deiner Anmeldeseite an, indem du zu Konsole > Anmeldeerfahrung > Branding navigierst. In diesem Abschnitt kannst du die wichtigsten Branding-Elemente einfach anpassen.

Markenfarbe

Definiere die Primärfarbe, die in der gesamten Anmeldeerfahrung verwendet wird, einschließlich primärer Schaltflächen, Links und anderer Komponenten. Ersetze die Standardfarbe Lila von Logto durch die Farbe deiner Marke. Für den Dunkelmodus kann eine separate Markenfarbe angegeben werden.

Firmenlogo

Das Logo wird auf der Anmelde-Homepage, der Registrierungs-Homepage, der Lade-Seite und anderen Schnittstellen mit unserer Erweiterung angezeigt.

• Es gibt einige Einschränkungen für Bilder: Sie müssen unter 500KB und im SVG-, PNG-, JPG-, JPEG- oder ICO-Format sein.
• Wenn du das Logofeld leer lässt, wird das Logo nicht in der Schnittstelle 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-Schnittstelle angezeigt wird.

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

Dunkelmodus

Aktiviere den Dunkelmodus, um das Erscheinungsbild der Anmeldeseite automatisch basierend auf den Systemeinstellungen des Benutzers anzupassen.

App-spezifisches Branding

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

Durch das Aktivieren der "App-spezifischen Anmeldeerfahrung" kannst du spezifisches Branding und Farben für jede App festlegen. Wenn eine Anmeldung von einer App mit aktiviertem App-spezifischen Branding initiiert wird, wird die Anmeldeerfahrung gemäß den App-spezifischen Branding-Einstellungen angepasst; andernfalls wird sie auf die Einstellungen der Omni-Anmeldeerfahrung zurückgesetzt.

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

Organisationsspezifisches Branding

Um das Logo der Organisation deines Kunden dynamisch in der Anmeldeerfahrung anzuzeigen, kannst du die Organisationslogos auf der Organisationsseite hochladen. Navigiere zu Konsole > Organisationen.

Dann kannst du beim Auslösen einer Anmeldung die Organisations-ID im organization_id-Parameter ü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 organization_id-Parameter im extraParams-Objekt der signIn-Methode übergeben.
• Wenn du einen OIDC-Client verwendest, kannst du den organization_id-Parameter beim Anfordern des Authorization Endpoint übergeben.

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

Hier ist ein Beispiel, wie du den organization_id-Parameter in der signIn-Methode 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.