## 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](https://cloud.logto.io/). - 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ę](https://docs.logto.io/docs/tutorials/get-started/create-and-integrate-the-first-app/), utwórz i zarejestruj nową aplikację w Logto. create_application

- Zintegruj Logto z aplikacją SPA za pomocą naszego gotowego SDK. np. [React SDK](https://docs.logto.io/docs/recipes/integrate-logto/react/) - Możesz postępować zgodnie z naszym przewodnikiem [przewodnik po doświadczeniu logowania](https://docs.logto.io/docs/tutorials/get-started/customize-sign-in-experience/), aby dostosować doświadczenie logowania do własnej aplikacji SPA. Zasymuluj przepływ logowania w swoich testach Cypress odpowiednio.

- Ukończ [instalację Cypress](https://docs.cypress.io/guides/getting-started/installing-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](https://github.com/logto-io/js/tree/master/packages/react-sample). 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. ```js cy.visit('http://localhost:3000'); cy.get('button:contains("Sign In")').click(); ``` ![home](https://uploads.strapi.logto.io/1/home_3fad5dbe85.webp) ### 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ć. Strona logowania Logto jest hostowana na innej domenie (w tym przypadku http://localhost:3001/sign-in). Będziesz musiał uwierzytelnić się, odwiedzając inną domenę za pomocą [cy.origin](https://docs.cypress.io/api/commands/origin). > 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. ```js cy.origin('http://localhost:3001', { args: { username, password } }, ({ username, password }) => { cy.url().should('include', 'sign-in'); cy.get('input[name="identifier"]').type(username); cy.get('input[name="password"]').type(password); cy.get('button:contains("Sign in")').click(); }); ``` 1. Upewnij się, że bieżący URL to strona logowania Logto. ![sign-in](https://uploads.strapi.logto.io/1/sign_in_70bfa68101.webp) 2. Zidentyfikuj pola wejściowe nazwy użytkownika i hasła i wpisz nazwę użytkownika oraz hasło. ![submit](https://uploads.strapi.logto.io/1/submit_39b9cb7b5f.webp) 3. Kliknij przycisk logowania, aby się zalogować. Możesz przepisać powyższą logikę wypełniania formularza na podstawie twoich ustawień doświadczenia logowania. ### 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. ```js cy.contains('Logto React Sample').should('be.visible'); ``` ![callback](https://uploads.strapi.logto.io/1/callback_b9ad9e58a4.webp) ### 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. ```js function signIn(username: string, password: string) { cy.visit('http://localhost:3000'); cy.get('button:contains("Sign In")').click(); cy.origin('http://localhost:3001', { args: { username, password } }, ({ username, password }) => { cy.url().should('include', 'sign-in'); cy.get('input[name="identifier"]').type(username); cy.get('input[name="password"]').type(password); cy.get('button:contains("Sign in")').click(); }); Cypress.Commands.add('signIn', (username: string, password: string) => { const log = Cypress.log({ displayName: 'SignIn', message: [`Sign in with: ${username}`], autoEnd: false, }); log.snapshot('before'); signIn(username, password); log.snapshot('after'); log.end(); }); } ``` ## 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. ```js describe('authentication', () => { beforeAll(() => { cy.signIn('username', 'password'); }); it('should be authenticated', () => { cy.contains('Sign Out').should('be.visible'); }); }); ``` 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