Hoe kan ik de aanmeldings-ervaring aanpassen voor elke app of organisatie?

Het instellen van een aanmeldingsstroom voor je app is vrij gebruikelijk, maar soms kom je een iets complexer scenario tegen,

1. Je runt een bedrijf met meerdere apps.
2. Je hebt een multi-tenant app die verschillende werkplekken ondersteunt.

De eenvoudigste benadering is het behouden van een universele aanmeldings-ervaring voor alle apps en organisaties. Een voorbeeld: HubSpot biedt een breed scala aan producten, maar hun aanmeldings-ervaring is consistent voor al deze producten. Dit helpt om het moedermerk, zoals HubSpot, te benadrukken, in plaats van afzonderlijke producten zoals Marketing Hub.

App-niveau aanmelding#

Sommige bedrijven volgen een multi-productstrategie, maar geven de voorkeur aan een enkele gebruikerspool. Bijvoorbeeld, Atlassian, een bekend SaaS-bedrijf, biedt meerdere softwareproducten zoals Jira en Confluence. Hier is hun aanmeldingsscherm.

De aanmeld-URL bevat de parameter ?bundle=jira-software om aan te geven dat dit de aanmeldinterface voor het Jira-product is.

De aanmeld-URL bevat de parameter ?bundle=confluence om aan te geven dat deze aanmeldinterface voor het Confluence-product is.

Verschillen in de aanmeldings-UI tussen de apps:

1. Ze gebruiken verschillende logo's om het specifieke product aan te geven.
2. Ze hebben verschillende looks, zoals variërende lettertypen en knopstijlen.

Echter, de belangrijkste authenticatiemethoden blijven consistent over alle apps. Dit zorgt ervoor dat gebruikers een verenigd profiel hebben, inclusief hun identificatiemiddelen (e-mail, sociale accounts) en authenticatiefactoren (bijv. wachtwoorden), voor effectievere identiteitsbeheer.

Organisatie-niveau aanmelding#

Een ander voorbeeld is Notion, een multi-tenant app die verschillende klanten afzonderlijke werkruimten laat hosten. Bijvoorbeeld, als je invoert

Als "Silverhand" de werkruimte-naam is, zal Notion de organisatie-specifieke aanmeldings-UI tonen. Het enige verschil is het logo; de rest blijft hetzelfde.

Hoe kunnen we de aanmeldings-ervaring voor elke app of organisatie aanpassen?#

Eerst heb je een identiteit- en authenticatieoplossing nodig als basis om op te bouwen. Laten we Logto als voorbeeld nemen om de oplossingen te tonen. Logto biedt verschillende opties om dit te bereiken:

Stel het direct in op Logto Cloud#

Dit is de snelle en eenvoudigste oplossing als je alleen het logo en de knopkleur wilt aanpassen.

Configureer op app-niveau#

Door "app-niveau aanmeldings-ervaring" in te schakelen, kun je specifieke branding en kleuren voor elke app instellen. Wanneer een aanmelding wordt gestart vanuit een app met ingeschakelde app-niveau branding, zal de aanmeldings-ervaring worden aangepast volgens de app-niveau branding-instellingen; anders zal het standaard de omni aanmeldings-ervaring-instellingen volgen.

Zowel lichte als donkere modus-instellingen zijn beschikbaar voor app-niveau branding. Donkere modus-instellingen zijn alleen van kracht wanneer de donkere modus is ingeschakeld in de omni aanmeldings-ervaring-instellingen.

Configureer op organisatieniveau#

Vervolgens, bij het starten van een aanmelding, kun je de organisatie-ID doorgeven in de organization_id parameter om Logto te vertellen welk organisatie-logo moet worden weergegeven. Bijvoorbeeld, om het organisatie-logo voor organisatie-ID 123456 te tonen:

• Als je de Logto SDK gebruikt, kun je de organization_id parameter doorgeven in het extraParams object van de signIn methode.
• Als je een OIDC-client gebruikt, kun je de organization_id parameter doorgeven bij het aanvragen van het authorization endpoint.

Hier is een voorbeeld van hoe je de organization_id parameter kunt doorgeven in de signIn methode met behulp van de Logto browser SDK:

Breng je eigen UI als je meer gedetailleerde aanpassing nodig hebt#

Als het aanpassen van het logo en de kleur niet voldoende is – bijvoorbeeld als je specifieke sociale aanmeldingsopties wilt verbergen of de look en feel volledig wilt veranderen – kun je je eigen UI uploaden naar Logto Cloud.

Om verschillende UI's weer te geven op basis van de app of organisatie, gebruik de organization_id en app_id van de zoekparameters. Schrijf dan een script om de UI te controleren op basis van deze parameters. Voor meer details, raadpleeg de "Breng je eigen UI" tutorial.