Como configurar experiências de login personalizadas para empresas multiaplicativos e multitenant.
Configurar um fluxo de login para seu aplicativo é bastante comum, mas às vezes você encontra um cenário um pouco complexo,
A abordagem mais fácil é manter uma experiência de login universal para todos os aplicativos e organizações. Por exemplo, HubSpot oferece uma ampla gama de produtos, mas sua experiência de login é consistente em todos eles. Isso ajuda a enfatizar a marca mãe, como HubSpot, em vez de produtos individuais como Marketing Hub.
Algumas empresas seguem uma estratégia de múltiplos produtos, mas preferem manter uma única base de usuários. Por exemplo, Atlassian, uma empresa SaaS bem conhecida, oferece vários produtos de software como Jira e Confluence. Aqui está a tela de login deles.
A URL de login inclui o parâmetro ?bundle=jira-software para indicar que esta é a interface de login para o produto Jira.
A URL de login inclui o parâmetro ?bundle=confluence para especificar que esta interface de login é para o produto Confluence.
Diferenças na interface de login entre os aplicativos:
No entanto, os principais métodos de autenticação permanecem consistentes em todos os aplicativos. Isso garante que os usuários tenham um perfil unificado, incluindo seus identificadores (e-mail, contas sociais) e fatores de autenticação (por exemplo, senhas), para uma gestão de identidade mais eficaz.
Outro exemplo é o Notion, um aplicativo multitenant que permite a diferentes clientes hospedarem espaços de trabalho separados. Por exemplo, se você entrar
Se "Silverhand" for o nome do espaço de trabalho, o Notion exibirá a interface de login específica da organização. A única diferença é o logotipo; todo o resto permanece o mesmo.
Primeiro, você precisa de uma solução de identidade e autenticação como base para construir. Vamos pegar o Logto como exemplo para mostrar as soluções. O Logto oferece várias opções para alcançar isso:
Esta é a solução mais rápida e fácil se você só quiser personalizar o logo e a cor do botão.
Ativando a "experiência de login em nível de aplicativo", você pode configurar uma marca e cores específicas para cada aplicativo. Quando um login é iniciado a partir de um aplicativo com branding em nível de aplicativo habilitado, a experiência de login será personalizada de acordo com as configurações de branding em nível de aplicativo; caso contrário, será padrão para as configurações de experiência de login omni.
Configurações de modo claro e escuro estão disponíveis para o branding em nível de aplicativo. As configurações de modo escuro só terão efeito quando o modo escuro estiver habilitado nas configurações de experiência de login omni.
Então, ao acionar um login, você pode passar o ID da organização no parâmetro organization_id para dizer ao Logto qual logotipo da organização exibir. Por exemplo, para mostrar o logotipo da organização para o ID da organização 123456:
organization_id no objeto extraParams do método signIn.organization_id ao solicitar o endpoint de autorização.Aqui está um exemplo de como passar o parâmetro organization_id no método signIn usando o SDK do navegador Logto:
Se personalizar o logo e a cor não for suficiente—por exemplo, se você deseja ocultar opções de login social específicas ou mudar completamente a aparência—você pode carregar sua própria UI para o Logto Cloud.
Para exibir diferentes UIs com base no aplicativo ou organização, use os parâmetros de pesquisa organization_id e app_id. Em seguida, escreva um script para controlar a UI com base nesses parâmetros. Para mais detalhes, consulte o tutorial "Traga sua própria UI".