Pular para o conteúdo principal

Combine com sua marca

Experiência omni de login​

Personalize a aparência da sua página de login navegando até Console > Experiência de login > Personalização. Esta seção permite ajustar facilmente os principais elementos de identidade visual.

Cor da marca

Defina a cor primária usada em toda a experiência de login, incluindo botões principais, links e outros componentes. Substitua a cor roxa padrão do Logto pela cor da sua marca. Para o modo escuro, uma cor de marca separada pode ser especificada.

Logo da empresa

O logo será exibido na página inicial de login, página inicial de cadastro, página de carregamento e outras interfaces com nossa expansão.

  • Existem algumas limitações para imagens: devem ter menos de 500KB e estar nos formatos SVG, PNG, JPG, JPEG ou ICO.
  • Se você deixar o campo do logo em branco, o logo não será exibido na interface.
  • Uma versão do logo para o modo escuro também pode ser enviada.

Favicon

Um favicon é um pequeno ícone que representa um site e é exibido na aba do navegador, favoritos e outras áreas da interface do navegador.

  • A imagem deve ter menos de 500KB e estar nos formatos SVG, PNG, JPG, JPEG ou ICO. Recomenda-se enviar uma imagem quadrada para garantir um bom efeito de apresentação.
  • Uma versão do favicon para o modo escuro também pode ser enviada.
  • Além disso, o título do navegador para diferentes fluxos (Entrar / Cadastrar / Esqueci a senha, etc.) agora é usado em vez de um título personalizado.

Modo escuro

Ative o modo escuro para ajustar automaticamente a aparência da página de login com base nas preferências do sistema do usuário.

Personalização específica do aplicativo​

Se o seu negócio multiaplicativo precisa de experiências de login em nível de aplicativo, você pode configurar isso na página de detalhes do aplicativo. Navegue até Console > Aplicativos.

Ao ativar a "Experiência de login em nível de aplicativo", você pode configurar logos, favicons, cores e até mesmo CSS personalizado específicos para cada app. Quando um login é iniciado a partir de um app com personalização em nível de app ativada, a experiência de login será personalizada de acordo com as configurações desse app; caso contrário, será usada a configuração padrão da experiência omni de login.

Tanto as configurações de modo claro quanto de modo escuro estão disponíveis para a personalização em nível de app. As configurações de modo escuro só terão efeito quando o modo escuro estiver ativado nas configurações da experiência omni de login.

Personalização específica da organização​

Para exibir dinamicamente o logo da organização do seu cliente na experiência de login, você pode enviar os logos das organizações na página de configurações da organização. Navegue até Console > Organizações.

Ao ativar a "Experiência de login em nível de organização", assim como na personalização em nível de app, você também pode configurar logos, favicons, cores e CSS personalizado específicos para cada organização.

Então, ao acionar um login, você pode passar o ID da organização no parâmetro organization_id para informar ao Logto qual logo de organização exibir. Por exemplo, para mostrar o logo da organização com ID 123456:

  • Se você estiver usando o Logto SDK, pode passar o parâmetro organization_id no objeto extraParams do método signIn.
  • Se estiver usando um cliente OIDC, pode passar o parâmetro organization_id ao solicitar o endpoint de autorização.

Tanto as configurações de modo claro quanto de modo escuro estão disponíveis para a personalização em nível de organização. As configurações de modo escuro só terão efeito quando o modo escuro estiver ativado nas configurações da experiência omni de login.

nota:

Se tanto a personalização em nível de app quanto em nível de organização estiverem ativadas, a personalização em nível de organização terá precedência. A ordem completa de precedência é: Personalização em nível de organização -> Personalização em nível de app -> Experiência omni de login

Aqui está um exemplo de como passar o parâmetro organization_id no método signIn usando o Logto browser SDK:

index.ts

logtoClient.signIn({
  // ...outros parâmetros
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});
nota:

Estamos implementando gradualmente o recurso extraParams em todos os Logto SDKs. Se você ainda não o vê em seu SDK, por favor, entre em contato conosco.

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