Pular para o conteúdo principal

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

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

Visualização ao vivo​

Ao navegar até Console > Experiência de login e clicar no botão "Visualização ao vivo" no canto superior direito, será aberta 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 os 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 essa conta posteriormente em Console > Gerenciamento de usuários.

Se você tentar fazer login com a conta de usuário criada e o processo for bem-sucedido, 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ê será direcionado para um painel contendo duas ações principais:

  • Botão de sair da visualização ao vivo: Encerra a sessão atual.
  • Botão de abrir painel de desenvolvimento: Abre 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 Logto​

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

nota:

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

  • App ID: Especifique seu App ID exclusivo. É essencial para testar experiência de login por aplicativo e políticas de proteção de recursos.
  • Parâmetros extras de login: Forneça parâmetros adicionais de autenticação para testar o processo de login personalizado. Exemplos:
  • Prompt: Adicione valores de prompt OIDC (separados por espaço) para especificar se o Servidor de Autorização solicitará ao usuário final uma nova autenticação e consentimento. Os valores definidos são:
    • login: Força 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 autenticação ou consentimento pré-existentes.
  • Scope: Especifique os escopos (separados 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 Scope e insira o identificador da API correspondente no campo Resource abaixo.
  • Resource: Insira os identificadores dos recursos de API (separados por espaço) aos quais seu aplicativo precisa de acesso. Este campo permite que seu app 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.

  • Resource: Insira o identificador específico da API (separados por espaço) se você precisar atualizar tokens de acesso a recursos de API.
  • Organization ID: Insira o ID da organização (separados por espaço) se você precisar atualizar tokens de organização.

Veja Autorização para mais detalhes sobre como usar a concessão de token de atualização.

nota:

Inclua consent no parâmetro prompt para offline_access. Um token de atualização (refresh token) 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 adicionais do usuário. 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 do Desenvolvedor do Chrome (F12 → Console) para inspecionar as requisições de rede e revisar os tokens e reivindicações.