Pular para o conteúdo principal

Testar a experiência do usuário com visualização ao vivo

Você pode usar o recurso de Visualização ao vivo para testar convenientemente as configurações de sua experiência de login.

Visualização ao vivo​

Navegar para Console > Experiência de login e clicar no botão "Visualização ao vivo" no canto superior direito abrirá uma nova aba do navegador com uma demonstração totalmente funcional das capacidades do Logto. Esta demonstração exibe nossa abordagem de design de experiência para fluxos de login e cadastro. É altamente personalizável e pode ser integrada perfeitamente ao seu aplicativo.

nota:

Nesta visualização, você deve criar uma conta primeiro para testar a experiência. Você pode gerenciar esta conta posteriormente em Console > Gerenciamento de usuários.

Se você tentar fazer login com a conta de usuário que criou e o processo for bem-sucedido sem problemas, você será redirecionado para uma página de sucesso que exibe seus identificadores e ID.

Painel de desenvolvimento​

Após um login bem-sucedido usando a Visualização ao Vivo do Logto, você chegará a um painel contendo duas ações principais:

  • Botão de sair da visualização ao vivo: Termina a sessão atual.
  • Botão de abrir painel de desenvolvimento: Lança ferramentas de depuração para analisar seu fluxo de autenticação.

O Painel de Desenvolvimento fornece insights em tempo real para solucionar problemas de integração OIDC, inspecionar tokens e reivindicações, e testar cenários avançados de identidade.

Configuração do Logto​

A Visualização ao Vivo depende de um aplicativo de demonstração oculto com uma experiência de login unificada por padrão. Na seção Configuração do Logto, você pode configurar parâmetros de autenticação incluídos em solicitações de autenticação para instruir o endpoint OIDC do Logto sobre como lidar com o processo de autenticação. Isso inclui definir seu ID de aplicativo, atribuir um ID de organização, solicitar escopos específicos, etc. Esta configuração é semelhante a inicializar o LogtoClient com o LogtoProvider, que estabelece um contexto Logto para seu aplicativo.

nota:

Lembre-se de salvar suas alterações de configuração. Elas entrarão em vigor na próxima vez que você fizer login com a Visualização ao Vivo.

  • ID do aplicativo: Especifique seu ID de aplicativo exclusivo. É essencial para testar a experiência de login por aplicativo, políticas de proteção de recursos.
  • Parâmetros extras de login: Forneça parâmetros de autenticação adicionais para testar o processo de login personalizado. Por exemplo:
  • Prompt: Adicione valores de prompt OIDC (delimitados por espaço) para especificar se o Servidor de Autorização solicita ao usuário final a reautenticação e consentimento. Os valores definidos são:
    • login: Obriga a reautenticação do usuário final.
    • consent: Requer consentimento do usuário antes de compartilhar informações com o cliente.
    • none: Indica que nenhuma interface deve ser exibida. Esta opção é usada para verificar a existência de autenticação ou consentimento pré-existentes.
  • Escopo: Especifique os escopos (delimitados por espaço) para solicitações de reivindicações. Por exemplo:
    • Para solicitar detalhes da organização do usuário, use dois escopos: urn:logto:scope:organizations urn:logto:scope:organization_roles
    • Para solicitar permissões de API, forneça os nomes dos escopos no campo Escopo e insira o identificador da API correspondente no campo Recurso abaixo.
  • Recurso: Insira os identificadores de recursos de API (delimitados por espaço) aos quais seu aplicativo precisa acessar. Este campo permite que seu aplicativo solicite tokens de acesso a recursos específicos conforme necessário.

Concessão de token de atualização​

Esta seção detalha como atualizar tokens para diferentes tipos de acesso:

Se ambos, um Recurso e um ID da Organização, forem fornecidos, a solicitação de atualização retornará um token de acesso que suporta proteção de recursos de API com modelo de organização.

nota:

Inclua consent no parâmetro de prompt para offline_access. Um token de atualização só será emitido se o prompt incluir consent.

Informações do usuário​

Verifique os dados do usuário recuperados do seu fluxo de autenticação:

  • Obter reivindicações do token de ID: Recupere todas as reivindicações contidas no token de ID, como at_hash, aud, auth_time, exp, iat, issu, e perfis de usuário adicionais. Isso é útil para validar o token e extrair as informações necessárias do usuário.
  • Buscar informações do usuário: Recupere apenas as informações do perfil do usuário consultando o endpoint userinfo.
nota:

Use as Ferramentas de Desenvolvedor do Chrome (F12 → Console) para inspecionar solicitações de rede e revisar os tokens e reivindicações.