Pular para o conteúdo principal

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

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

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

  • Visualizar e editar o perfil do usuário (nome, avatar e campos de perfil personalizados)
  • Atualizar endereço de e-mail e número de telefone
  • Atualizar nome de usuário
  • Definir ou atualizar senha
  • Gerenciar conexões sociais (vincular e desvincular contas sociais)
  • Gerenciar configurações de MFA (aplicativo autenticador TOTP, passkeys, códigos de backup)
  • Ativar ou desativar a verificação em 2 etapas
  • Gerenciar sessões ativas e aplicativos autorizados

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

Benefícios de usar a UI 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 integrada: 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 UI pré-construída do Account Center fornece as seguintes páginas, todas acessíveis sob o caminho /account do endpoint do seu tenant Logto:

CaminhoDescrição
/account/profilePágina de perfil do usuário (nome, avatar e campos de perfil personalizados)
/account/securityCentral de configurações de segurança (verificação em 2 etapas, contas sociais, sessões)
/account/emailAtualizar ou remover o endereço de e-mail principal
/account/phoneAtualizar ou remover o número de telefone principal
/account/usernameAtualizar nome de usuário
/account/passwordDefinir ou atualizar senha
/account/passkey/addAdicionar uma nova passkey (WebAuthn)
/account/passkey/manageVisualizar e gerenciar passkeys existentes
/account/authenticator-appConfigurar aplicativo autenticador TOTP
/account/authenticator-app/replaceSubstituir aplicativo autenticador TOTP existente
/account/backup-codes/generateGerar novos códigos de backup
/account/backup-codes/manageVisualizar 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 UI pré-construída​

Passo 1: Ative a Account API​

A UI 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

Configure os campos de perfil​

O Account Center exibe uma página de Perfil onde os usuários finais podem visualizar e gerenciar suas informações de perfil. Para controlar quais campos de perfil aparecem nesta página:

  1. Certifique-se de que a permissão do campo Name, Avatar, Profile ou Custom data esteja definida como Edit ou ReadOnly nas seções Account security / User profile.
  2. No card Integrate prebuilt UI, adicione os campos de perfil que deseja expor usando o seletor de campos de perfil. Esses campos são extraídos do mesmo catálogo usado por Coletar perfil do usuário — qualquer campo definido lá também pode ser exibido no Account Center.
  3. Arraste e solte para reordenar os campos como preferir.

Somente os campos que estão listados nos campos de perfil e cuja permissão correspondente não está como Off aparecerão na página de Perfil.

Para usar a UI 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. Usuários que saírem da página pelo botão de voltar retornarão para a mesma URL.

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

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

  1. Na página de configurações de conta do seu app, exiba as informações atuais do usuário
  2. Forneça botões "Editar" ou "Atualizar" que direcionem para as páginas pré-construídas correspondentes
  3. Após o usuário concluir ou sair da 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 da Conta</h2>

      <div>
        <span>Email: [email protected]</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: Lide com o retorno ao seu app​

Os usuários retornam para sua URL de redirect tanto após concluírem uma ação quanto ao saírem dela pelo botão de voltar, e a URL é a mesma em ambos os casos. Não trate o retorno em si como prova de que a alteração foi bem-sucedida; busque os dados mais recentes do usuário, por exemplo, usando a Account API.

Para confirmar uma ação concluída ao usuário, adicione show_success=true à URL do Account Center. O Account Center então exibe sua própria página de sucesso após a ação, e retorna para sua URL de redirect quando o usuário clica em Concluído:

https://[tenant-id].logto.app/account/password?redirect=https://your-app.com/settings&show_success=true

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âmetroDescrição
redirectA URL absoluta para onde enviar o usuário após ele concluir a ação ou ao sair dela pelo botão de voltar. Apenas URLs http(s) são aceitas.
show_successQuando definido como true, o Account Center exibe uma página de sucesso após a ação e retorna para sua URL de redirect quando o usuário clica em Concluído. Sem isso, o usuário retorna imediatamente.
identifierPreenche 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_localesLista separada por espaços de tags de idioma BCP-47 (por exemplo, fr-CA fr en) que controla o idioma da UI 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 UI em francês:

https://[tenant-id].logto.app/account/[email protected]&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.

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 seu próprio fluxo de exclusão (normalmente apoiado 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.

URL de callback de conexão social​

Vincular uma conta social a partir do Account Center utiliza a URL de callback do conector:

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

Onde {connectorId} é o ID do conector social. Este é o Callback URI exibido na página de detalhes do conector em Console > Connectors > Social connectors, que você registra com seu provedor social ao configurar o conector.

Considerações de segurança​

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

  • Autenticação step-up OIDC: Alterações sensíveis (e-mail, telefone, nome de usuário, senha, contas sociais, MFA, sessões e dispositivos confiáveis) exigem autenticação recente do usuário (urn:logto:acr:1fa ou superior) dentro da janela de Autenticação recente configurada no seu tenant (10 minutos por padrão, configurável de 1 a 120 minutos em Console > Sign-in & account > Account center). Quando um usuário acabou de fazer login ou se registrar com um método qualificado, nenhum prompt extra é exibido; quando o login não possui 1fa (como login social) ou já passou do tempo da janela, o Account Center executa automaticamente a autenticação step-up OIDC e retoma a ação pendente.
  • 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 acesso não autorizado

Opções de personalização​

A UI 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 UI do Account Center adicionando CSS personalizado. Navegue até Console > Sign-in & account > Account center e adicione seu CSS personalizado no editor Custom CSS.

A UI pré-construída do Account Center fornece nomes de classes CSS estáveis prefixados com logto_ac- em elementos-chave da UI (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 Logto */
.logto_ac-logto-signature {
  display: none;
}

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

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