Português (Portugal)
  • cypress
  • logto
  • authentication

Autenticação Logto em Cypress

Este guia vai mostrar-te como autenticar com Logto nos teus testes de Aplicação de Página Única (SPA).

Simeng
Simeng
Developer

Introdução

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.

Pré-requisitos

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.

    create_application

  • 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.

    sign-in-experience

  • 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.

  • URL de início de sessão Logto: http://localhost:3001/sign-in
  • Domínio da aplicação React SPA: http://localhost:3000
  • Configurações de experiência de início de sessão Logto: nome de utilizador/palavra-passe

Escrever um comando Cypress personalizado para autenticar com Logto

Vamos 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.

Passo 1: Iniciar o fluxo de início de sessão

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.

home

Passo 2: Preencher o formulário de início de sessão e submeter

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.

  1. Certifica-te de que o URL atual é a página de início de sessão Logto. sign-in
  2. Identifica os campos de entrada de nome de utilizador e palavra-passe e preenche o nome de utilizador e a palavra-passe. submit
  3. Clica no botão de início de sessão para entrares.

Passo 3: Autenticado com sucesso e redirecionado de volta para a tua aplicação cliente

Após um início de sessão bem-sucedido, deverás ser redirecionado de volta para a tua aplicação cliente.

callback

Passo 4: Empacotar todo o fluxo de início de sessão como um comando Cypress personalizado

Empacota todo o fluxo de início de sessão como um comando Cypress personalizado. cy.signIn neste exemplo.

Usa o comando Cypress personalizado para autenticar a tua aplicação

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.

Experimenta o Logto Cloud