Este guia mostrará como autenticar com o Logto nos testes da sua Aplicação de Página Única (SPA).
A autenticação é uma parte crucial de qualquer aplicação web, e é essencial garantir que as proteções de autenticação funcionem conforme o esperado em Aplicações de Página Única (SPAs). Neste guia, vamos orientá-lo pelo processo de autenticação com o Logto em seus testes Cypress, permitindo que você teste efetivamente o fluxo de autenticação da sua SPA.
Antes de começar, certifique-se de ter o seguinte pronto:
Uma conta Logto. Se você não tem, pode inscrever-se no Logto cloud gratuitamente.
Uma Aplicação de Página Única (SPA) que se integre com o Logto para autenticação. Se você não tem, siga nosso guia create-and-integrate-the-first-app, crie e registre uma nova aplicação no Logto.
Integre o Logto com sua aplicação SPA usando nosso SDK pronto para uso. Por exemplo, React SDK
Você pode seguir nosso guia de experiência de login para personalizar a experiência de login para sua própria aplicação SPA. Simule o fluxo de login nos seus testes Cypress conforme necessário.
Complete a instalação do Cypress e a configuração. Este guia presume que você tem um ambiente Cypress bem configurado e que você já pode executar seus testes Cypress.
Levante seu serviço Logto e a aplicação cliente.
Usaremos nosso aplicativo de exemplo React SPA como exemplo neste guia. Você pode encontrar o código fonte aqui. É uma simples aplicação React que se integra ao Logto usando o Logto React SDK para autenticação.
http://localhost:3001/sign-inhttp://localhost:3000nome de usuário/senhaVamos escrever um comando Cypress personalizado para autenticar com o Logto nos seus testes Cypress. Usando o comando personalizado, você pode facilmente autenticar com o Logto em qualquer um dos seus testes Cypress.
Visite a página de login de sua aplicação cliente no teste Cypress, e inicie o fluxo de login clicando no botão de login.
Navegue até a página de login do Logto e preencha o nome de usuário e senha para logar.
No uso normal, um único teste Cypress pode executar comandos em uma única origem, uma limitação determinada por recursos padrão de segurança da web do navegador. O comando cy.origin() permite que seus testes contornem essa limitação.
Após um login bem-sucedido, você deve ser redirecionado de volta para sua aplicação cliente.
Envolva todo o fluxo de login como um comando Cypress personalizado. cy.signIn neste exemplo.
Em qualquer um dos seus testes Cypress, você pode usar o comando Cypress personalizado para autenticar com o Logto.
Parabéns! Você autenticou com sucesso com o Logto em seus testes Cypress. Agora você pode se concentrar em testar a sua aplicação SPA sem se preocupar com o fluxo de autenticação.