Pular para o conteúdo principal

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 do endereço de email
  • Atualização do número de telefone
  • Atualização do nome de usuário
  • Definição ou atualização de senha
  • Gerenciamento das configurações de MFA (aplicativo autenticador TOTP, passkeys, códigos de backup)

A interface pré-construída do Account Center foi projetada para funcionar perfeitamente com seu aplicativo, proporcionando uma experiência consistente ao usuário sem a necessidade de criar 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 a aparência da 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 atualizada: 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:

CaminhoDescrição
/account/emailAtualizar endereço de email principal
/account/phoneAtualizar 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
/account/authenticator-appConfigurar aplicativo autenticador TOTP
/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 email estará disponível em https://example.logto.app/account/email.

Como usar a interface pré-construída​

Passo 1: Habilite o Account API​

A interface pré-construída do Account Center depende do Account API. Navegue até Console > Sign-in & account > Account center e habilite o 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

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 email, serão redirecionados de volta para https://your-app.com/settings.

Abordagem B: Incorporando 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 aplicativo:

  1. Na página de configurações de conta do seu app, mostre 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 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: Lide 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>
  );
}

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 (email, 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 email 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 da sua experiência de login, incluindo:

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

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