Polski
  • cypress
  • logto
  • authentication

Uwierzytelnianie za pomocą Logto w Cypress

Ten przewodnik pokaże ci, jak uwierzytelnić się za pomocą Logto w testach aplikacji jednostronicowej (SPA).

Simeng
Simeng
Developer

Wprowadzenie

Uwierzytelnianie jest kluczową częścią każdej aplikacji internetowej i jest niezbędne, aby zapewnić, że zabezpieczenia uwierzytelniania działają zgodnie z oczekiwaniami w aplikacjach jednostronicowych (SPA). W tym przewodniku przeprowadzimy cię przez proces uwierzytelniania za pomocą Logto w testach Cypress, co pozwoli ci skutecznie testować przepływ uwierzytelniania w twojej SPA.

Wymagania wstępne

Zanim zaczniemy, upewnij się, że masz gotowe następujące elementy:

  • Konto Logto. Jeśli go nie masz, możesz się zarejestrować w Logto cloud za darmo.

  • Aplikację jednostronicową (SPA) zintegrowaną z Logto do uwierzytelniania. Jeśli jej nie masz, postępuj zgodnie z naszym przewodnikiem utwórz-i-zintegruj-pierwszą-aplikację, utwórz i zarejestruj nową aplikację w Logto.

    create_application

  • Zintegruj Logto z aplikacją SPA za pomocą naszego gotowego SDK. np. React SDK

  • Możesz postępować zgodnie z naszym przewodnikiem przewodnik po doświadczeniu logowania, aby dostosować doświadczenie logowania do własnej aplikacji SPA. Zasymuluj przepływ logowania w swoich testach Cypress odpowiednio.

    sign-in-experience

  • Ukończ instalację Cypress i konfigurację. Ten przewodnik zakłada, że masz dobrze skonfigurowane środowisko Cypress i możesz już uruchamiać swoje testy Cypress.

  • Uruchom swoją usługę Logto i aplikację kliencką.


W tym przewodniku wykorzystamy jako przykład naszą aplikację React SPA Sample. Kod źródłowy można znaleźć tutaj. Jest to prosta aplikacja React zintegrowana z Logto za pomocą Logto React SDK do uwierzytelniania.

  • URL logowania Logto: http://localhost:3001/sign-in
  • Domena aplikacji React SPA: http://localhost:3000
  • Ustawienia doświadczenia logowania Logto: nazwa użytkownika/hasło

Napisz niestandardowe polecenie Cypress do uwierzytelniania za pomocą Logto

Napiszmy niestandardowe polecenie Cypress do uwierzytelniania za pomocą Logto w testach Cypress. Korzystając z niestandardowego polecenia, możesz łatwo uwierzytelnić się za pomocą Logto w dowolnym z twoich testów Cypress.

Krok 1: Rozpocznij przepływ logowania

Odwiedź stronę logowania aplikacji klienckiej w teście Cypress i zainicjuj przepływ logowania, klikając przycisk logowania.

home

Krok 2: Wypełnij formularz logowania i wyślij

Przejdź do strony logowania Logto i wypełnij nazwę użytkownika oraz hasło, aby się zalogować.

W normalnym użytkowaniu pojedynczy test Cypress może uruchamiać polecenia w jednej domenie, co jest ograniczeniem determinowanym przez standardowe funkcje zabezpieczeń sieciowych przeglądarki. Polecenie cy.origin() pozwala twoim testom obejść to ograniczenie.

  1. Upewnij się, że bieżący URL to strona logowania Logto. sign-in
  2. Zidentyfikuj pola wejściowe nazwy użytkownika i hasła i wpisz nazwę użytkownika oraz hasło. submit
  3. Kliknij przycisk logowania, aby się zalogować.

Krok 3: Pomyślne uwierzytelnienie i przekierowanie z powrotem do aplikacji klienckiej

Po pomyślnym logowaniu powinieneś być przekierowany z powrotem do swojej aplikacji klienckiej.

callback

Krok 4: Zawiń cały przepływ logowania jako niestandardowe polecenie Cypress

Zawiń cały przepływ logowania jako niestandardowe polecenie Cypress. cy.signIn w tym przykładzie.

Użyj niestandardowego polecenia Cypress do uwierzytelnienia aplikacji

W dowolnym z testów Cypress możesz użyć niestandardowego polecenia Cypress do uwierzytelniania za pomocą Logto.

Gratulacje! Udało ci się uwierzytelnić za pomocą Logto w testach Cypress. Możesz teraz skupić się na testowaniu aplikacji SPA, nie martwiąc się o przepływ uwierzytelniania.

Wypróbuj Logto Cloud