Passe dein Branding an

Omni-Anmeldeerfahrung

Passe das Aussehen 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 Standard-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-Startseite, der Registrierungs-Startseite, 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 eine gute Darstellung 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 an die 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-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 Autorisierungsendpunkts übergeben.

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

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

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.

Verwandte Ressourcen

Wie kann man die Anmeldeerfahrung für jede App oder Organisation anpassen?