Como posso personalizar a experiência de início de sessão para cada aplicação ou organização?

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,

1. Geres um negócio com várias aplicações.
2. Tens uma aplicação multi-inquilino que suporta diferentes espaços de trabalho.

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.

Início de sessão ao nível da aplicação#

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:

1. Usam logótipos diferentes para indicar o produto específico.
2. Têm aparências distintas, como fontes e estilos de botões variados.

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.

Início de sessão ao nível da organização#

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.

Como podemos personalizar a experiência de início de sessão para cada aplicação ou organização?#

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:

Configura diretamente no Logto Cloud#

Esta é a solução rápida e mais fácil se desejas apenas personalizar o logo e a cor do botão.

Configura ao nível da aplicaçã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.

Configura ao nível da organização#

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:

• Se estiveres a usar o SDK do Logto, podes passar o parâmetro organization_id no objeto extraParams do método signIn.
• Se estiveres a usar um cliente OIDC, podes 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 de navegador Logto:

Traz o teu próprio UI se precisares de uma personalização mais detalhada#

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