Русский
  • cypress
  • logto
  • аутентификация

Аутентификация Logto в Cypress

Это руководство покажет вам, как аутентифицироваться с помощью Logto в тестах вашего одностраничного приложения (SPA).

Simeng
Simeng
Developer

Введение

Аутентификация является важной частью любого веб-приложения, и крайне важно обеспечить, чтобы защитные механизмы аутентификации работали должным образом в одностраничных приложениях (SPA). В этом руководстве мы проведем вас через процесс аутентификации с помощью Logto в ваших тестах Cypress, что позволит вам эффективно тестировать аутентификационный поток вашего SPA.

Предварительные условия

Перед тем как начать, убедитесь, что у вас есть следующее:

  • Аккаунт Logto. Если у вас его нет, вы можете зарегистрироваться на Logto Cloud бесплатно.

  • Одностраничное приложение (SPA), интегрированное с Logto для аутентификации. Если у вас его нет, пожалуйста, следуйте нашему руководству по созданию и интеграции первого приложения, создайте и зарегистрируйте новое приложение в Logto.

    create_application

  • Интегрируйте Logto с вашим приложением SPA, используя наш готовый SDK, например, React SDK.

  • Вы можете следовать нашему руководству по настройке опыта входа в систему, чтобы настроить опыт входа в систему для своего собственного приложения SPA. Симулируйте вход в систему в ваших тестах Cypress соответствующим образом.

    sign-in-experience

  • Завершите установку Cypress и конфигурацию. В этом руководстве предполагается, что у вас хорошо настроенная среда Cypress, и вы можете уже запускать свои тесты Cypress.

  • Запустите ваш Logto-сервис и клиентское приложение.


Мы будем использовать наше React SPA Sample приложение в качестве примера в этом руководстве. Вы можете найти исходный код здесь. Это простое React-приложение, которое интегрируется с Logto с использованием Logto React SDK для аутентификации.

  • URL для входа Logto: http://localhost:3001/sign-in
  • Домен приложения React SPA: http://localhost:3000
  • Настройки опыта входа Logto: имя пользователя/пароль

Напишите пользовательскую команду Cypress для аутентификации с Logto

Давайте напишем пользовательскую команду Cypress для аутентификации с Logto в ваших тестах Cypress. Используя пользовательскую команду, вы легко сможете аутентифицироваться с Logto в любом из ваших тестов Cypress.

Шаг 1: Начало процесса входа

Посетите страницу входа вашего клиентского приложения в тесте Cypress и начните процесс входа, нажав на кнопку входа.

home

Шаг 2: Заполнение формы входа и отправка

Перейдите на страницу входа Logto и введите имя пользователя и пароль для входа.

В обычном использовании один тест Cypress может выполнять команды только в одном источнике, ограничение, определенное стандартными функциями веб-безопасности браузера. Команда cy.origin() позволяет вашим тестам обойти это ограничение.

  1. Убедитесь, что текущий URL - страница входа Logto. sign-in
  2. Определите поля ввода имени пользователя и пароля и заполните их. submit
  3. Нажмите на кнопку входа, чтобы войти.

Шаг 3: Успешная аутентификация и перенаправление обратно в ваше клиентское приложение

После успешного входа вы должны быть перенаправлены обратно в ваше клиентское приложение.

callback

Шаг 4: Объедините весь процесс входа в пользовательскую команду Cypress

Объедините весь процесс входа в пользовательскую команду Cypress. cy.signIn в этом примере.

Используйте пользовательскую команду Cypress для аутентификации вашего приложения

В любом из ваших тестов Cypress вы можете использовать пользовательскую команду Cypress, чтобы аутентифицироваться с Logto.

Поздравляем! Вы успешно аутентифицировались с помощью Logto в ваших тестах Cypress. Теперь вы можете сосредоточиться на тестировании вашего SPA-приложения, не беспокоясь о потоке аутентификации.

Попробуйте Logto Cloud