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.

O logotipo 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 logotipo em branco, o logotipo não será exibido na interface.
  • Uma versão do logotipo 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.

Ocultar marca Logto​

Por padrão, as páginas de experiência de login prontas para uso exibem "Powered by Logto" na parte inferior. Ative a opção "Ocultar marca Logto" para remover a marca Logto e criar uma experiência de login limpa e profissional que destaque exclusivamente a identidade da sua própria marca.

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

Configurações para modo claro e escuro estão disponíveis para a personalização em nível de aplicativo. 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 logotipo da organização do seu cliente na experiência de login, você pode enviar os logotipos das organizações na página de configurações da organização. Navegue até Console > Organizações.

Ao ativar "Experiência de login em nível de organização", assim como na personalização em nível de aplicativo, você também pode configurar logotipos, 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 logotipo de organização exibir. Por exemplo, para mostrar o logotipo 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.

Configurações para modo claro e 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 aplicativo 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 aplicativo -> 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 aplicativo ou organização?