Configurações de conta pela interface pré-construída do Account Center

O que é a interface pré-construída do Account Center

O Logto fornece uma interface pré-construída do Account Center que oferece páginas prontas para uso para que os usuários finais possam gerenciar as configurações de suas contas. Essa interface é hospedada pelo Logto e lida com tarefas comuns de gerenciamento de conta, incluindo:

Atualização de endereço de e-mail e número de telefone
Atualização de nome de usuário
Definição ou atualização de senha
Gerenciamento de conexões sociais (vincular e desvincular contas sociais)
Gerenciamento de configurações de MFA (aplicativo autenticador TOTP, passkeys, códigos de backup)
Ativação ou desativação da verificação em 2 etapas
Gerenciamento de sessões ativas e aplicativos autorizados

A interface pré-construída do Account Center foi projetada para funcionar perfeitamente com seu aplicativo, proporcionando uma experiência de usuário consistente sem exigir que você construa páginas personalizadas de gerenciamento de conta.

Benefícios de usar a interface pré-construída

Esforço de desenvolvimento zero: Páginas prontas para uso que funcionam imediatamente
Experiência consistente: Combina com o visual e a experiência de login do Logto
Segurança embutida: Todos os fluxos de verificação e medidas de segurança são tratados automaticamente
Sempre atualizado: Novos recursos e melhorias de segurança ficam disponíveis automaticamente

Páginas disponíveis

A interface pré-construída do Account Center fornece as seguintes páginas, todas acessíveis sob o caminho /account do endpoint do seu tenant Logto:

Caminho	Descrição
`/account/security`	Central de configurações de segurança (verificação em 2 etapas, contas sociais, sessões)
`/account/email`	Atualizar ou remover o endereço de e-mail principal
`/account/phone`	Atualizar ou remover o número de telefone principal
`/account/username`	Atualizar nome de usuário
`/account/password`	Definir ou atualizar senha
`/account/passkey/add`	Adicionar uma nova passkey (WebAuthn)
`/account/passkey/manage`	Visualizar e gerenciar passkeys existentes
`/account/authenticator-app`	Configurar aplicativo autenticador TOTP
`/account/authenticator-app/replace`	Substituir aplicativo autenticador TOTP existente
`/account/backup-codes/generate`	Gerar novos códigos de backup
`/account/backup-codes/manage`	Visualizar e gerenciar códigos de backup

Por exemplo, se o endpoint do seu tenant for https://example.logto.app, a página de atualização de e-mail estará disponível em https://example.logto.app/account/email.

Como usar a interface pré-construída

Passo 1: Ativar Account API

A interface pré-construída do Account Center depende da Account API. Navegue até Console > Sign-in & account > Account center e ative a Account API.

Configure as permissões dos campos conforme necessário:

Defina campos como Edit para permitir que os usuários os modifiquem
Defina campos como ReadOnly se os usuários só puderem visualizá-los
Defina campos como Off para ocultá-los completamente

Passo 2: Vincule às páginas pré-construídas a partir do seu aplicativo

Para usar a interface pré-construída do Account Center, você precisa redirecionar os usuários do seu aplicativo para as páginas apropriadas do Logto. Existem duas abordagens:

Abordagem A: Link direto com parâmetro de redirecionamento

Adicione links em seu aplicativo que redirecionem os usuários para as páginas pré-construídas. Inclua um parâmetro de consulta redirect para trazer os usuários de volta ao seu app após concluírem a ação:

https://[tenant-id].logto.app/account/email?redirect=https://your-app.com/settings

Quando os usuários concluírem a atualização do e-mail, serão redirecionados de volta para https://your-app.com/settings.

Abordagem B: Embutindo no fluxo de configurações de conta

Você pode integrar as páginas pré-construídas ao fluxo existente de configurações de conta do seu app:

Na página de configurações de conta do seu app, mostre as informações atuais do usuário
Forneça botões "Editar" ou "Atualizar" que direcionem para as páginas pré-construídas correspondentes
Após o usuário concluir a ação, ele será redirecionado de volta ao seu app

Exemplo de implementação:

function AccountSettings() {
  const tenantEndpoint = 'https://example.logto.app';
  const redirectUrl = encodeURIComponent(window.location.href);

  return (
    <div>
      <h2>Configurações de Conta</h2>

      <div>
        <span>Email: user@example.com</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>Atualizar Email</a>
      </div>

      <div>
        <span>Senha: ••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>Alterar Senha</a>
      </div>

      <div>
        <span>MFA: Não configurado</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          Configurar Autenticador
        </a>
      </div>
    </div>
  );
}

Passo 3: Lidar com redirecionamentos de sucesso

Após os usuários concluírem uma ação, eles serão redirecionados para a URL especificada com um parâmetro de consulta opcional show_success. Você pode usá-lo para exibir uma mensagem de sucesso:

function SettingsPage() {
  const searchParams = new URLSearchParams(window.location.search);
  const showSuccess = searchParams.get('show_success');

  return (
    <div>
      {showSuccess === 'email' && <div>Email atualizado com sucesso!</div>}
      {showSuccess === 'password' && <div>Senha atualizada com sucesso!</div>}
      {/* ... resto da sua página de configurações */}
    </div>
  );
}

Parâmetros de URL suportados

Você pode adicionar os seguintes parâmetros de consulta a qualquer URL do Account Center para personalizar a experiência:

Parâmetro	Descrição
`redirect`	A URL absoluta para onde o usuário será enviado após concluir a ação. Apenas URLs `http(s)` são aceitas.
`show_success`	Quando definido como `true`, o destino de sucesso (por exemplo, sua URL de `redirect`) recebe um parâmetro de consulta `show_success` para que você possa exibir uma mensagem de confirmação.
`identifier`	Preenche previamente o campo de identificador na página de destino (`/account/email`, `/account/phone`, `/account/username`). Útil para deep-linking do seu app quando você já sabe o identificador do usuário.
`ui_locales`	Lista separada por espaços de tags de idioma BCP-47 (por exemplo, `fr-CA fr en`) que controla o idioma da interface do Account Center. Se omitido, usa o idioma do navegador do usuário.

Exemplo — deep-link para a página de atualização de e-mail com o e-mail atual preenchido e interface em francês:

https://[tenant-id].logto.app/account/email?identifier=user@example.com&ui_locales=fr&redirect=https://your-app.com/settings

nota:

O valor de identifier é armazenado no session storage antes do redirecionamento de login e consumido uma vez pela página de destino.

Link de exclusão de conta

O Account Center não lida diretamente com a exclusão de contas. Em vez disso, você pode configurar uma URL de exclusão de conta que aponte para o seu próprio fluxo de exclusão (normalmente respaldado pela Management API). Quando configurado, uma entrada Excluir sua conta aparece na página de segurança do Account Center e direciona o usuário para sua URL.

Para configurar, navegue até Console > Sign-in & account > Account center e defina o campo Account deletion URL. Você também pode atualizá-lo via Management API:

curl -X PATCH https://[tenant-id].logto.app/api/account-center \
  -H 'authorization: Bearer <access_token>' \
  -H 'content-type: application/json' \
  --data-raw '{"deleteAccountUrl":"https://your-app.com/delete-account"}'

Deixe o campo vazio (ou defina deleteAccountUrl como null) para ocultar a entrada de exclusão de conta.

Quando um usuário vincula uma conta social a partir do Account Center, o Logto usa um URI de redirecionamento diferente do fluxo de login padrão. A URL de callback do Account Center tem o seguinte formato:

https://[your-tenant-endpoint]/account/callback/social/{connectorId}

Onde {connectorId} é o ID do conector social (você pode encontrá-lo em Console > Connectors > Social connectors).

cuidado:

Você deve adicionar essa URL à lista de Authorized redirect URIs (ou equivalente) no console de desenvolvedor do seu provedor social (Google, GitHub, Facebook, etc.) além da URL de callback padrão de login https://[your-tenant-endpoint]/callback/{connectorId}. Caso contrário, o fluxo de vinculação falhará com um erro de incompatibilidade de URI de redirecionamento.

Considerações de segurança

A interface pré-construída do Account Center inclui medidas de segurança integradas:

Verificação de identidade: Antes de realizar alterações sensíveis (e-mail, telefone, senha, MFA), os usuários devem verificar sua identidade usando a senha atual ou método de verificação existente
Códigos de verificação: Atualizações de e-mail e telefone exigem códigos de verificação enviados para o novo endereço/número
Validação de sessão: Todas as operações validam a sessão do usuário para evitar acessos não autorizados

Opções de personalização

A interface pré-construída do Account Center herda a identidade visual das configurações de experiência de login, incluindo:

Logo e cores
Modo escuro/claro
Configurações de idioma

CSS personalizado

Você pode personalizar ainda mais a aparência da interface do Account Center adicionando CSS personalizado. Navegue até Console > Sign-in & account > Account center e adicione seu CSS personalizado no editor Custom CSS.

A interface pré-construída do Account Center fornece nomes de classes CSS estáveis com o prefixo logto_ac- nos principais elementos da interface (contêineres de layout, cabeçalhos de página, seções, cards, etc.) para facilitar a personalização. Isso permite que você sobrescreva estilos padrão sem se preocupar com mudanças de nomes de classes entre versões.

Exemplo:

/* Ocultar a assinatura do Logto */
.logto_ac-logto-signature {
  display: none;
}

/* Personalizar o card da seção de segurança */
.logto_ac-security-card {
  border-radius: 12px;
}

Se você precisar de mais personalização além do que a interface pré-construída e o CSS personalizado oferecem, considere usar a Account API para construir suas próprias páginas de gerenciamento de conta.

Configurações de conta pela Account API - Construa gerenciamento de conta personalizado com controle total via API
Configurações de conta pela Management API - Gerenciamento de conta em nível administrativo
Configuração de MFA - Configure autenticação multifatorial

O que é a interface pré-construída do Account Center​

Benefícios de usar a interface pré-construída​

Páginas disponíveis​

Como usar a interface pré-construída​

Passo 1: Ativar Account API​

Passo 2: Vincule às páginas pré-construídas a partir do seu aplicativo​

Abordagem A: Link direto com parâmetro de redirecionamento​

Abordagem B: Embutindo no fluxo de configurações de conta​

Passo 3: Lidar com redirecionamentos de sucesso​

Parâmetros de URL suportados​

Link de exclusão de conta​

URL de callback de conexão social​

Considerações de segurança​

Opções de personalização​

CSS personalizado​

Recursos relacionados​