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

Autenticação Logto no Cypress

Este guia mostrará como autenticar com o Logto nos testes da sua 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 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.

Pré-requisitos

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.

    create_application

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

    sign-in-experience

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

  • URL de login do Logto: http://localhost:3001/sign-in
  • Domínio da aplicação React SPA: http://localhost:3000
  • Configurações de experiência de login do Logto: nome de usuário/senha

Escrever um comando Cypress personalizado para autenticar com Logto

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

Passo 1: Iniciar o fluxo de login

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.

home

Passo 2: Preencher o formulário de login e enviar

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.

  1. Verifique se a URL atual é a página de login do Logto. sign-in
  2. Identifique os campos de entrada de nome de usuário e senha e preencha o nome de usuário e senha. submit
  3. Clique no botão de login para entrar.

Passo 3: Autenticação bem-sucedida e redirecionamento de volta para sua aplicação cliente

Após um login bem-sucedido, você deve ser redirecionado de volta para sua aplicação cliente.

callback

Passo 4: Envolver todo o fluxo de login como um comando Cypress personalizado

Envolva todo o fluxo de login como um comando Cypress personalizado. cy.signIn neste exemplo.

Use o comando Cypress personalizado para autenticar sua aplicação

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.

Experimente o Logto Cloud