Ten przewodnik pokaże ci, jak uwierzytelnić się za pomocą Logto w testach aplikacji jednostronicowej (SPA).
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.
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.
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.
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.
http://localhost:3001/sign-inhttp://localhost:3000nazwa użytkownika/hasłoNapiszmy 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.
Odwiedź stronę logowania aplikacji klienckiej w teście Cypress i zainicjuj przepływ logowania, klikając przycisk logowania.
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.
Po pomyślnym logowaniu powinieneś być przekierowany z powrotem do swojej aplikacji klienckiej.
Zawiń cały przepływ logowania jako niestandardowe polecenie Cypress. cy.signIn w tym przykładzie.
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.