Como posso personalizar a experiência de login para cada aplicativo ou organização?

Configurar um fluxo de login para seu aplicativo é bastante comum, mas às vezes você encontra um cenário um pouco complexo,

1. Você gerencia um negócio com múltiplos aplicativos.
2. Você tem um aplicativo multitenant que suporta diferentes espaços de trabalho.

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.

Login em nível de aplicativo#

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:

1. Eles usam logos diferentes para indicar o produto específico.
2. Eles têm aparências distintas, como variações de fontes e estilos de botões.

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.

Login em nível de organização#

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.

Como podemos personalizar a experiência de login para cada aplicativo ou organização?#

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:

Configure diretamente no Logto Cloud#

Esta é a solução mais rápida e fácil se você só quiser personalizar o logo e a cor do botão.

Configurar em nível de aplicativo#

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.

Configurar em nível de organização#

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:

• Se você estiver usando o Logto SDK, pode passar o parâmetro organization_id no objeto extraParams do método signIn.
• Se você estiver usando um cliente OIDC, pode passar o parâmetro 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:

Traga sua própria UI se precisar de mais personalização detalhada#

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".