Hur kan jag anpassa inloggningsupplevelsen för varje app eller organisation?

Att ställa in ett inloggningsflöde för din app är ganska vanligt, men ibland stöter du på ett lite mer komplext scenario,

1. Du driver ett företag med flera appar.
2. Du har en app för flera hyresgäster som stöder olika arbetsytor.

Det enklaste tillvägagångssättet är att upprätthålla en universell inloggningsupplevelse för alla appar och organisationer. Till exempel erbjuder HubSpot ett brett utbud av produkter, men deras inloggningsupplevelse är konsekvent över alla. Detta hjälper till att betona moderbolaget, som HubSpot, snarare än individuella produkter som Marketing Hub.

App-nivå inloggning#

Vissa företag följer en flerproduktstrategi men föredrar att behålla en enda användarpool. Till exempel, Atlassian, ett välkänt SaaS-företag, erbjuder flera mjukvaruprodukter som Jira och Confluence. Här är deras inloggningsskärm.

Inloggnings-URL:en inkluderar parametern ?bundle=jira-software för att indikera att detta är inloggningsgränssnittet för Jira-produkten.

Inloggnings-URL:en inkluderar parametern ?bundle=confluence för att specificera att detta inloggningsgränssnitt är för Confluence-produkten.

Skillnader i inloggnings-UI mellan apparna:

1. De använder olika logotyper för att indikera den specifika produkten.
2. De har distinkta utseenden, såsom olika fonter och knappstilar.

Dock förblir de viktigaste autentiseringsmetoderna konsekventa över alla appar. Detta garanterar att användarna har en enhetlig profil, inklusive sina identifikatorer (mail, sociala konton) och autentiseringsfaktorer (t.ex. lösenord), för mer effektiv identitetshantering.

Organisationsnivå inloggning#

Ett annat exempel är Notion, en app för flera hyresgäster som tillåter olika klienter att ha separata arbetsytor. Till exempel, om du anger

Om "Silverhand" är arbetsytans namn, kommer Notion att visa organisationsspecifikt inloggnings-UI. Den enda skillnaden är logotypen; allt annat förblir detsamma.

Hur kan vi anpassa inloggningsupplevelsen för varje app eller organisation?#

Först behöver du en identitets- och autentiseringslösning som grund att bygga på. Låt oss ta Logto som ett exempel för att visa lösningarna. Logto erbjuder olika alternativ för att uppnå detta:

Ställa in det direkt på Logto Cloud#

Detta är den snabbaste och enklaste lösningen om du bara vill anpassa Logo och knappfärg.

Konfigurera på app-nivå#

Genom att slå på "app-nivå inloggningsupplevelse" kan du ställa in specifik branding och färger för varje app. När en inloggning initieras från en app med app-nivå branding aktiverad, kommer inloggningsupplevelsen att anpassas enligt app-nivå brandingsinställningar; annars kommer den att standardisera till omni inloggningsupplevelseinställningarna.

Både ljus- och mörklägesinställningar är tillgängliga för app-nivå branding. Inställningar för mörkt läge kommer endast att träda i kraft när mörkt läge är aktiverat i omni inloggningsupplevelseinställningar.

Konfigurera på organisationsnivå#

Därefter, när du triggar en inloggning, kan du passa organisations-ID i organization_id-parametern för att berätta för Logto vilken organisations logotyp som ska visas. Till exempel, för att visa organisationslogotypen för organisations-ID 123456:

• Om du använder Logto SDK kan du passa organization_id-parametern i extraParams-objektet för signIn-metoden.
• Om du använder en OIDC-klient kan du passa organization_id-parametern när du begär auktoriseringsändpunkt.

Här är ett exempel på hur man passerar organization_id-parametern i signIn-metoden med Logto browser SDK:

Ta med din egen UI om du behöver mer detaljerad anpassning#

Om anpassning av logotyp och färg inte räcker — till exempel om du vill dölja specifika sociala inloggningsalternativ eller helt ändra utseendet och känslan — kan du ladda upp ditt eget UI till Logto Cloud.

För att visa olika UI:n baserat på appen eller organisationen, använd organization_id och app_id från sökparametrarna. Skriv sedan ett skript för att styra UI:n baserat på dessa parametrar. För mer detaljer, se "Ta med din egen UI"-tutorialen.