Jak mogę dostosować doświadczenie logowania dla każdej aplikacji lub organizacji?

Konfigurowanie przepływu logowania dla swojej aplikacji jest dość powszechne, ale czasami napotykasz nieco bardziej złożony scenariusz,

1. Prowadzisz biznes z wieloma aplikacjami.
2. Masz aplikację z wieloma najemcami, która obsługuje różne przestrzenie robocze.

Najprostszym podejściem jest utrzymanie uniwersalnego doświadczenia logowania dla wszystkich aplikacji i organizacji. Na przykład HubSpot oferuje szeroką gamę produktów, ale ich doświadczenie logowania jest spójne we wszystkich. Pomaga to podkreślić markę nadrzędną, jak HubSpot, zamiast poszczególnych produktów, jak Marketing Hub.

Logowanie na poziomie aplikacji#

Niektóre firmy realizują strategię wieloproduktową, ale wolą zachować jedną pulę użytkowników. Na przykład Atlassian, znana firma SaaS, oferuje wiele produktów oprogramowaniowych, takich jak Jira i Confluence. Oto ich ekran logowania.

URL do logowania zawiera parametr ?bundle=jira-software, aby wskazać, że jest to interfejs logowania dla produktu Jira.

URL do logowania zawiera parametr ?bundle=confluence, aby określić, że ten interfejs logowania jest dla produktu Confluence.

Różnice w UI logowania między aplikacjami:

1. Używają różnych logo, aby wskazać konkretny produkt.
2. Mają odrębny wygląd, taki jak różne czcionki i style przycisków.

Jednak główne metody uwierzytelniania pozostają spójne we wszystkich aplikacjach. Dzięki temu użytkownicy mają jednolity profil, w tym swoje identyfikatory (e-mail, konta społecznościowe) i czynniki uwierzytelniania (np. hasła), co ułatwia zarządzanie tożsamością.

Logowanie na poziomie organizacji#

Innym przykładem jest Notion, aplikacja z wieloma najemcami, która pozwala różnym klientom hostować odrębne przestrzenie robocze. Na przykład, jeśli wpiszesz

Jeśli "Silverhand" to nazwa przestrzeni roboczej, Notion wyświetli interfejs logowania specyficzny dla organizacji. Jedyną różnicą jest logo; wszystko inne pozostaje takie samo.

Jak możemy dostosować doświadczenie logowania dla każdej aplikacji lub organizacji?#

Najpierw potrzebujesz rozwiązania tożsamości i uwierzytelniania jako fundamentu do zbudowania. Weźmy Logto jako przykład, aby pokazać rozwiązania. Logto oferuje różne opcje, aby to osiągnąć:

Skonfiguruj bezpośrednio na Logto Cloud#

To szybkie i najłatwiejsze rozwiązanie, jeśli chcesz tylko dostosować logo i kolor przycisku.

Konfiguracja na poziomie aplikacji#

Włączając "doświadczenie logowania na poziomie aplikacji", możesz ustawić konkretną markę i kolory dla każdej aplikacji. Gdy logowanie zostanie zainicjowane z aplikacji z aktywowaną marką na poziomie aplikacji, doświadczenie logowania zostanie dostosowane zgodnie z ustawieniami marki na poziomie aplikacji; w przeciwnym razie będzie ono domyślnie ustawione na omniiowe ustawienia doświadczenia logowania.

Dostępne są zarówno ustawienia dla trybu jasnego, jak i ciemnego dla marki na poziomie aplikacji. Ustawienia trybu ciemnego będą miały zastosowanie tylko wtedy, gdy tryb ciemny jest włączony w doświadczeniu logowania w trybie omniiowym.

Konfiguracja na poziomie organizacji#

Następnie, uruchamiając logowanie, możesz przekazać identyfikator organizacji w parametrze organization_id, aby poinformować Logto, które logo organizacji wyświetlić. Na przykład, aby pokazać logo organizacji dla identyfikatora organizacji 123456:

• Jeśli używasz Logto SDK, możesz przekazać parametr organization_id w obiekcie extraParams metody signIn.
• Jeśli używasz klienta OIDC, możesz przekazać parametr organization_id przy żądaniu punktu końcowego autoryzacji.

Oto przykład, jak przekazać parametr organization_id w metodzie signIn używając Logto browser SDK:

Przynieś swoją własną UI, jeśli potrzebujesz bardziej szczegółowej personalizacji#

Jeśli dostosowanie logo i koloru nie wystarcza—na przykład, jeśli chcesz ukryć konkretną opcję logowania społecznościowego lub całkowicie zmienić wygląd—możesz przesłać swoją własną UI do Logto Cloud.

Aby wyświetlić różne UI w oparciu o aplikację lub organizację, użyj organization_id i app_id z parametrów wyszukiwania. Następnie napisz skrypt, aby kontrolować UI na podstawie tych parametrów. Aby uzyskać więcej szczegółów, zajrzyj do tutoriala "Bring Your Own UI".