Это руководство покажет вам, как аутентифицироваться с помощью Logto в тестах вашего одностраничного приложения (SPA).
Аутентификация является важной частью любого веб-приложения, и крайне важно обеспечить, чтобы защитные механизмы аутентификации работали должным образом в одностраничных приложениях (SPA). В этом руководстве мы проведем вас через процесс аутентификации с помощью Logto в ваших тестах Cypress, что позволит вам эффективно тестировать аутентификационный поток вашего SPA.
Перед тем как начать, убедитесь, что у вас есть следующее:
Аккаунт Logto. Если у вас его нет, вы можете зарегистрироваться на Logto Cloud бесплатно.
Одностраничное приложение (SPA), интегрированное с Logto для аутентификации. Если у вас его нет, пожалуйста, следуйте нашему руководству по созданию и интеграции первого приложения, создайте и зарегистрируйте новое приложение в Logto.
Интегрируйте Logto с вашим приложением SPA, используя наш готовый SDK, например, React SDK.
Вы можете следовать нашему руководству по настройке опыта входа в систему, чтобы настроить опыт входа в систему для своего собственного приложения SPA. Симулируйте вход в систему в ваших тестах Cypress соответствующим образом.
Завершите установку Cypress и конфигурацию. В этом руководстве предполагается, что у вас хорошо настроенная среда Cypress, и вы можете уже запускать свои тесты Cypress.
Запустите ваш Logto-сервис и клиентское приложение.
Мы будем использовать наше React SPA Sample приложение в качестве примера в этом руководстве. Вы можете найти исходный код здесь. Это простое React-приложение, которое интегрируется с Logto с использованием Logto React SDK для аутентификации.
http://localhost:3001/sign-inhttp://localhost:3000имя пользователя/парольДавайте напишем пользовательскую команду Cypress для аутентификации с Logto в ваших тестах Cypress. Используя пользовательскую команду, вы легко сможете аутентифицироваться с Logto в любом из ваших тестов Cypress.
Посетите страницу входа вашего клиентского приложения в тесте Cypress и начните процесс входа, нажав на кнопку входа.
Перейдите на страницу входа Logto и введите имя пользователя и пароль для входа.
В обычном использовании один тест Cypress может выполнять команды только в одном источнике, ограничение, определенное стандартными функциями веб-безопасности браузера. Команда cy.origin() позволяет вашим тестам обойти это ограничение.
После успешного входа вы должны быть перенаправлены обратно в ваше клиентское приложение.
Объедините весь процесс входа в пользовательскую команду Cypress. cy.signIn в этом примере.
В любом из ваших тестов Cypress вы можете использовать пользовательскую команду Cypress, чтобы аутентифицироваться с Logto.
Поздравляем! Вы успешно аутентифицировались с помощью Logto в ваших тестах Cypress. Теперь вы можете сосредоточиться на тестировании вашего SPA-приложения, не беспокоясь о потоке аутентификации.