Este guia vai mostrar-te como autenticar com Logto nos teus testes de Aplicação de Página Única (SPA).
A autenticação é uma parte crucial de qualquer aplicação web, e é essencial garantir que os guardas de autenticação funcionam conforme esperado em Aplicações de Página Única (SPAs). Neste guia, vamos guiar-te pelo processo de autenticação com Logto nos teus testes Cypress, permitindo-te testar eficazmente o fluxo de autenticação da tua SPA.
Antes de começares, garante que tens o seguinte preparado:
Uma conta Logto. Se não tens uma, podes registar-te no Logto cloud gratuitamente.
Uma Aplicação de Página Única (SPA) que integra com Logto para autenticação. Se não tens uma, por favor segue o nosso guia criar e integrar a primeira aplicação, cria e regista uma nova aplicação em Logto.
Integra o Logto na tua aplicação SPA usando o nosso SDK pronto a usar. por exemplo. React SDK
Podes seguir o nosso guia experiência de início de sessão para personalizar a experiência de início de sessão para a tua própria aplicação SPA. Simula o fluxo de início de sessão nos teus testes Cypress de acordo.
Completa a instalação do Cypress e configuração. Este guia assume que tens um ambiente Cypress bem configurado e que consegues já executar os teus testes Cypress.
Levanta o teu serviço Logto e a aplicação cliente.
Vamos usar a nossa aplicação de exemplo React SPA neste guia. Podes encontrar o código fonte aqui. É uma simples aplicação React que integra com Logto usando o Logto React SDK para autenticação.
http://localhost:3001/sign-inhttp://localhost:3000nome de utilizador/palavra-passeVamos escrever um comando Cypress personalizado para autenticar com Logto nos teus testes Cypress. Usando o comando personalizado, podes facilmente autenticar com Logto em qualquer dos teus testes Cypress.
Visita a página de início de sessão da tua aplicação cliente no teste Cypress, e inicia o fluxo de início de sessão ao clicar no botão de login.
Navega para a página de início de sessão Logto, e preenche o nome de utilizador e a palavra-passe para entrar.
No uso normal, um único teste Cypress pode apenas executar comandos numa única origem, uma limitação determinada pelas características padrão de segurança da web do navegador. O comando cy.origin() permite que os teus testes ultrapassem essa limitação.
Após um início de sessão bem-sucedido, deverás ser redirecionado de volta para a tua aplicação cliente.
Empacota todo o fluxo de início de sessão como um comando Cypress personalizado. cy.signIn neste exemplo.
Em qualquer dos teus testes Cypress, podes usar o comando Cypress personalizado para autenticar com Logto.
Parabéns! Conseguiste autenticar com sucesso com Logto nos teus testes Cypress. Agora podes focar-te em testar a tua aplicação SPA sem te preocupares com o fluxo de autenticação.