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 wichtige 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 standardmäßige Logto-Lila-Farbe 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 Logo-Feld 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 Abläufe (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 auf die Omni-Anmeldeerfahrungseinstellungen zurückgegriffen.

Sowohl Licht- als auch Dunkelmodus-Einstellungen sind für das App-spezifische Branding verfügbar. Die Dunkelmodus-Einstellungen werden nur wirksam, wenn der Dunkelmodus in den Omni-Anmeldeerfahrungseinstellungen 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-Endpunkts übergeben.

Sowohl Licht- als auch Dunkelmodus-Einstellungen sind für das Organisationslevel-Branding verfügbar. Die Dunkelmodus-Einstellungen werden nur wirksam, wenn der Dunkelmodus in den Omni-Anmeldeerfahrungseinstellungen aktiviert ist.

Hier ist ein Beispiel, wie der organization_id-Parameter in der signIn-Methode mit dem Logto Browser SDK übergeben wird:

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.