Como configurar experiências de início de sessão personalizadas para negócios multi-aplicação e multi-inquilino.
Configurar um fluxo de início de sessão para a tua aplicação é bastante comum, mas às vezes encontras um cenário um pouco complexo,
A abordagem mais fácil é manter uma experiência universal de início de sessão para todas as aplicações e organizações. Por exemplo, a HubSpot oferece uma ampla gama de produtos, mas a sua experiência de início de sessão é consistente em todos eles. Isso ajuda a enfatizar a marca principal, como HubSpot, em vez de produtos individuais como Marketing Hub.
Algumas empresas seguem uma estratégia de multi-produto, mas preferem manter um único grupo de utilizadores. Por exemplo, a Atlassian, uma conhecida empresa de SaaS, oferece múltiplos produtos de software como o Jira e o Confluence. Aqui está a tela de início de sessão deles.
O URL de início de sessão inclui o parâmetro ?bundle=jira-software para indicar que esta é a interface de início de sessão para o produto Jira.
O URL de início de sessão inclui o parâmetro ?bundle=confluence para especificar que esta interface de início de sessão é para o produto Confluence.
Diferenças na interface de início de sessão entre as aplicações:
No entanto, os principais métodos de autenticação permanecem consistentes em todas as aplicações. Isso garante que os utilizadores tenham um perfil unificado, incluindo seus identificadores (email, contas sociais) e fatores de autenticação (por exemplo, senhas), para uma gestão de identidade mais eficaz.
Outro exemplo é o Notion, uma aplicação multi-inquilino que permite a diferentes clientes hospedarem espaços de trabalho separados. Por exemplo, se inserires
Se "Silverhand" for o nome do espaço de trabalho, o Notion exibirá a interface de início de sessão específica da organização. A única diferença é o logótipo; tudo o resto permanece igual.
Primeiro, precisas de uma solução de identidade e autenticação como base para construir. Vamos tomar o Logto como exemplo para mostrar as soluções. O Logto oferece várias opções para conseguir isso:
Esta é a solução rápida e mais fácil se desejas apenas personalizar o logo e a cor do botão.
Ao ativar "experiência de início de sessão ao nível da aplicação", podes configurar especificamente o branding e as cores para cada aplicação. Quando um início de sessão é iniciado a partir de uma aplicação com branding ao nível da aplicação ativado, a experiência de início de sessão será personalizada de acordo com as definições de branding ao nível da aplicação; caso contrário, será padronizado para as configurações de experiência de início de sessão omni.
Estão disponíveis configurações para modo claro e escuro para branding ao nível da aplicação. As configurações de modo escuro só entrarão em vigor quando o modo escuro estiver ativado nas configurações de experiência de início de sessão omni.
Depois, ao acionar um início de sessão, podes passar o ID da organização no parâmetro organization_id para informar ao Logto qual logótipo da organização exibir. Por exemplo, para mostrar o logótipo da organização para o ID de 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 de navegador Logto:
Se personalizar o logótipo e a cor não for suficiente — por exemplo, se desejares ocultar opções específicas de início de sessão social ou mudar completamente a aparência — podes carregar o teu próprio UI para o Logto Cloud.
Para exibir diferentes interfaces de utilizador com base na aplicação ou organização, usa o organization_id e app_id dos parâmetros de pesquisa. Depois, escreve um script para controlar a interface de utilizador com base nesses parâmetros. Para mais detalhes, consulta o tutorial "Traz o teu próprio UI".