Combine com sua marca

Experiência de login omni

Personalize a aparência da sua página de login navegando para Console > Experiência de login > Branding. Esta seção permite ajustar facilmente os principais elementos de branding.

Cor da marca

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

Logotipo da empresa

O logotipo será exibido na página inicial de login, na página inicial de inscrição, na página de carregamento e em 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 carregada.

Favicon

Um favicon é um pequeno ícone que representa um site e é exibido na aba do navegador, nos favoritos e em 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 carregar uma imagem quadrada para garantir um bom efeito de apresentação.
• Uma versão do favicon para o modo escuro também pode ser carregada.
• Além disso, o título do navegador para diferentes fluxos (Entrar / Inscrever-se / Esqueceu 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.

Branding específico do aplicativo

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

Ao ativar a "experiência de login em nível de aplicativo", você pode configurar branding e cores específicas para cada aplicativo. Quando um login é iniciado a partir de um aplicativo com branding em nível de aplicativo ativado, 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.

Estão disponíveis configurações de modo claro e escuro para branding em nível de aplicativo. As configurações de modo escuro só terão efeito quando o modo escuro estiver ativado nas configurações de experiência de login omni.

Branding específico da organização

Para mostrar dinamicamente o logotipo da organização do seu cliente na experiência de login, você pode carregar os logotipos da organização na página de configurações da organização. Navegue para Console > Organizações.

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

Estão disponíveis configurações de modo claro e escuro para branding 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 de experiência de login omni.

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.