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

Eine Anmeldestruktur für deine App einzurichten ist recht üblich, aber manchmal trifft man auf ein etwas komplexeres Szenario,

1. Du betreibst ein Multi-App-Unternehmen.
2. Du hast eine Multi-Tenant-App, die verschiedene Arbeitsbereiche unterstützt.

Der einfachste Ansatz ist, ein universelles Anmeldeerlebnis für alle Apps und Organisationen zu pflegen. Zum Beispiel bietet HubSpot eine breite Palette von Produkten an, aber deren Anmeldeerlebnis ist bei allen konsistent. Dies hilft, die übergeordnete Marke, wie HubSpot, zu betonen, anstatt die einzelnen Produkte wie Marketing Hub.

App-spezifische Anmeldung#

Einige Unternehmen verfolgen eine Multi-Produkt-Strategie, ziehen es jedoch vor, einen einzelnen Benutzerpool zu behalten. Zum Beispiel bietet das bekannte SaaS-Unternehmen Atlassian mehrere Softwareprodukte wie Jira und Confluence an. Hier ist ihr Anmeldebildschirm.

Die Anmelde-URL enthält den Parameter ?bundle=jira-software, um anzuzeigen, dass dies die Anmeldeoberfläche für das Jira-Produkt ist.

Die Anmelde-URL enthält den Parameter ?bundle=confluence, um zu spezifizieren, dass diese Anmeldeoberfläche für das Confluence-Produkt ist.

Unterschiede in der Anmelde-UI zwischen den Apps:

1. Sie verwenden unterschiedliche Logos, um das spezifische Produkt anzuzeigen.
2. Sie haben unterschiedliche Looks, wie z.B. unterschiedliche Schriftarten und Schaltflächenstile.

Die wichtigsten Authentifizierungsmethoden bleiben jedoch über alle Apps hinweg konsistent. Dies gewährleistet, dass Benutzer ein einheitliches Profil haben, einschließlich ihrer Kennungen (E-Mail, soziale Konten) und Authentifizierungsfaktoren (z.B. Passwörter), für ein effektiveres Identitätsmanagement.

Organisationsebene Anmeldung#

Ein weiteres Beispiel ist Notion, eine Multi-Tenant-App, die es verschiedenen Kunden ermöglicht, separate Arbeitsbereiche zu hosten. Beispielsweise, wenn du eingibst

Wenn "Silverhand" der Arbeitsbereichsname ist, zeigt Notion die organisationsspezifische Anmelde-UI an. Der einzige Unterschied ist das Logo; alles andere bleibt gleich.

Wie können wir das Anmeldeerlebnis für jede App oder Organisation anpassen?#

Zuerst benötigst du eine Identitäts- und Authentifizierungslösung als Basis zum Aufbau. Lass uns Logto als Beispiel nehmen, um die Lösungen zu zeigen. Logto bietet verschiedene Optionen, um dies zu erreichen:

Direkt in Logto Cloud einrichten#

Das ist die schnelle und einfachste Lösung, wenn du nur das Logo und die Knopffarbe anpassen möchtest.

Auf App-Ebene konfigurieren#

Indem du die "app-spezifische Anmeldeerfahrung" aktivierst, kannst du spezifisches Branding und Farben für jede App festlegen. Wenn eine Anmeldung von einer App mit aktiviertem Branding auf App-Ebene initiiert wird, wird das Anmeldeerlebnis gemäß den Branding-Einstellungen auf App-Ebene angepasst; andernfalls bleibt es bei den Omni-Anmeldeerfahrungseinstellungen.

Sowohl Licht- als auch Dunkelmodus-Einstellungen sind für das Branding auf App-Ebene verfügbar. Die Dunkelmodus-Einstellungen treten nur in Kraft, wenn der Dunkelmodus in den Omni-Anmeldeerfahrungseinstellungen aktiviert ist.

Auf Organisationsebene konfigurieren#

Wenn du eine Anmeldung auslöst, kannst du die Organisation-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 zu zeigen:

• 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.

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

Bringe dein eigenes UI, wenn du detailliertere Anpassungen benötigst#

Wenn es nicht ausreicht, das Logo und die Farbe anzupassen - zum Beispiel, wenn du bestimmte soziale Anmeldeoptionen ausblenden oder das gesamte Aussehen und Gefühl komplett ändern möchtest, kannst du dein eigenes UI in Logto Cloud hochladen.

Um verschiedene UIs basierend auf der App oder Organisation anzuzeigen, verwende die organization_id und app_id aus den Suchparametern. Schreibe dann ein Skript, um die UI basierend auf diesen Parametern zu steuern. Für mehr Details, schaue dir das Tutorial "Bring Your Own UI" an.