TL;DR: в этом посте обсуждается, как успешно пройти аутентификацию по Auth0 в сквозных тестах Cypress. Вы будете использовать небольшой пример приложения React, чтобы проиллюстрировать шаблоны, которые вы можете использовать для программного входа пользователя в Auth0 во время выполнения тестов Cypress, в соответствии с большинством лучших практик Cypress и Auth0. Чтобы увидеть рабочий пример методов, описанных в этой статье, не стесняйтесь клонировать этот репозиторий.

«Узнайте, как выполнять сквозные интеграционные тесты на SPA, защищенных с помощью Auth0.»

ОТПРАВИТЬ ЭТО В Твиттер

Предпосылки

Как уже упоминалось, вы будете использовать приложение React, написанное с использованием современных функций языка JavaScript (ES2015+), поэтому рекомендуется хорошее понимание современных веб-технологий. Если вы еще не совсем там, есть множество фантастических ресурсов для современной разработки JS, включая курсы от Wes Bos, Tyler McGinnis и других.

Вам также потребуется установить Node.js и NPM. Посетите веб-сайт Node.js, чтобы найти ссылки для скачивания и руководство по установке.

Вы также должны иметь учетную запись Auth0 и действительные разрешения пользователя, чтобы вы могли пройти аутентификацию в своем приложении. Итак, если у вас еще нет учетной записи Auth0, зарегистрируйтесь бесплатно сейчас.

Наконец, ожидается базовое понимание того, что такое Cypress и почему он полезен. Если вы не знаете Cypress, прочтите эту статью для получения дополнительной информации.

Посетите Блог Auth0 🔐 и найдите все, что вам нужно знать об инфраструктуре идентификации, управлении доступом, системе единого входа, аутентификации JWT и последних новостях в области безопасности. 👉 AUTH0 БЛОГ👈

Установка и конфигурация Auth0

Чтобы увидеть весь процесс в действии, вам нужно создать приложение Auth0 на панели инструментов Auth0. Для этого перейдите в раздел Приложения на панели инструментов и нажмите кнопку Создать приложение. Когда вы нажмете на эту кнопку, вы увидите диалоговое окно. В этом диалоговом окне вам нужно будет добавить имя для вашего приложения (например, Cypress E2E Testing) и выбрать Одностраничное веб-приложение в качестве его типа.

Теперь, нажав кнопку Создать, Auth0 перенаправит вас на страницу Быстрый старт вашего нового приложения. Оттуда вы можете перейти на вкладку Настройки и настроить ее следующим образом:

  • Прокрутите вниз до поля Разрешенные URL-адреса обратного вызова и введите следующее значение: http://localhost:3000/callback. После аутентификации пользователя Auth0 будет успешно перенаправлять только в том случае, если рассматриваемый маршрут указан здесь.
  • Введите http://localhost:3000 в поле Разрешенный веб-источник.
  • Введите http://localhost:3000 в поле Разрешенные URL-адреса выхода.
  • Прокрутите вниз страницу Настройки и нажмите Показать дополнительные настройки.
  • Перейдите на вкладку Типы грантов и проверьте грант Пароль.
  • Нажмите Сохранить изменения.

Теперь вы можете создать учетную запись пользователя для сценариев сквозного тестирования. Для этого перейдите в раздел Пользователи панели инструментов и нажмите Создать пользователя. В диалоговом окне, показанном Auth0, заполните форму следующим образом:

  • Электронная почта: введите случайный адрес электронной почты (например, [email protected]).
  • Пароль: введите случайный пароль (например, s#m3R4nd0m-pass).
  • Повторить пароль: введите тот же пароль.
  • Подключение: используйте Username-Password-Authentication

После этого нажмите Сохранить, чтобы завершить процесс.

Наконец, вам нужно будет перейти к настройкам вашего арендатора и установить Username-Password-Authentication в качестве значения свойства Каталог по умолчанию. Как упоминалось на этой странице, это поле определяет имя соединения, которое будет использоваться для обмена паролем. В этом случае значение Username-Password-Authentication исходит из значения по умолчанию Подключения к базе данных, которое Auth0 добавляет ко всем новым арендаторам.

Только не забудьте сохранить изменения, внесенные в ваш тенант.

Пример приложения

Прежде всего, клонируйте этот репозиторий и проверьте ветку base:

# clone the repo git clone https://github.com/dlo83/auth0-cypress-demo.git # move into it cd auth0-cypress-demo # checkout the base branch git checkout base

Примечание. Вы также можете обратиться к готовому продукту в ветке master. Затем обязательно нажмите npm install и npm run start в терминале, чтобы запустить приложение.

Это приложение будет довольно простым: это приложение React с несколькими маршрутами, работающими на React Router 4. Один из маршрутов будет защищенным, то есть доступным только для аутентифицированных пользователей, а другой — общедоступным.

Будет еще один маршрут, который служит важной цели: маршрут /callback. По этому маршруту пользователь перенаправляется после успешного ввода своих учетных данных Auth0. При попадании по этому маршруту приложение проверяет, соответствует ли информация о состоянии в строке запроса URL-адреса состоянию, хранящемуся в сохраняемом файле cookie.

Если эти шаблоны защищенных маршрутов вам незнакомы, я настоятельно рекомендую прочитать Статья Бруно Кребса для получения дополнительной информации.

Кипарис

Cypress — это современный инструмент тестирования интерфейса, который упрощает написание интеграционных тестов. Этот инструмент, по сути, представляет собой универсальный магазин для всех ваших потребностей в сквозном тестировании, сочетающий в себе быструю современную среду тестирования, графические и автономные средства запуска тестов, а также простая в использовании библиотека утверждений в одном пакете.

Аутентификация с помощью Cypress

Итак, вы купили Cypress и используете Auth0 для аутентификации. Теперь пришло время посмотреть, как вы можете заставить их хорошо играть вместе!

Представьте, что вы хотите написать тест, чтобы убедиться, что пользователь может посетить страницу, доступную только после аутентификации. Как бы вы это сделали?

Наивный подход будет заключаться в следующем:

  • Посетите веб-приложение и вызовите перенаправление на страницу входа Auth0 (через нажатие кнопки, изменение маршрута и т. д.).
  • Введите имя пользователя и пароль Auth0
  • Отправить форму
  • Дождитесь перенаправления на ваше веб-приложение и действуйте по мере необходимости.

Однако с этим есть проблема. Перефразируя сооснователя Cypress Брайана Манна:

Рекомендуется никогда не посещать и не тестировать сторонние сайты, которые вы не можете контролировать.

Затем, поскольку у вас нет контроля над веб-сайтом Auth0, нет смысла пытаться имитировать процесс входа пользователя через пользовательский интерфейс.

Итак, что вам нужно сделать?

«Не тратьте время на услуги, которые вы не контролируете, на сквозные тесты.»

ОТПРАВИТЬ ЭТО В Твиттер

Лучшие практики Cypress

К счастью, на Cypress есть пример рецепта, который может вам помочь. Общий шаблон работы с аутентификацией Single Sign-On выглядит следующим образом:

  • Используйте команду Cypress cy.request(), чтобы сделать HTTP-запрос к вашей службе аутентификации (в данном случае Auth0).
  • Разобрать токены в ответе
  • Установить токены в локальном хранилище

Примечание. Теперь Auth0 рекомендует использовать файлы cookie вместо локального хранилища. Не проблема. Вы будете придерживаться этой рекомендации при реализации.

Теперь, когда у вас есть стратегия, можно приступать к работе.

Кипарис Команды

Как указано выше, ваш первый курс действий — сделать HTTP-запрос к Auth0 с помощью команды Cypress cy.request(). Запрос с Cypress будет выглядеть примерно так:

const options = { method: 'POST', url: 'https://my.url.com/endpoint', body: { username: 'my_username' password: 'my_password' ... } } cy.request(options)

Это здорово и все такое, но вы можете себе представить, что необходимость писать приведенный выше код каждый раз, когда вы хотите войти в систему, может быть довольно громоздкой и нарушать принципы DRY (не повторяйтесь). К счастью, в Cypress есть функция под названием Пользовательские команды, которая позволяет вам инкапсулировать этот код и сделать его повторно используемым в ваших тестах.

Итак, вставьте следующий код в конец файла cypress/support/commands.js:

Cypress.Commands.add('login', (overrides = {}) => { Cypress.log({ name: 'loginViaAuth0', }); const options = { method: 'POST', url: Cypress.env('auth_url'), body: { grant_type: 'password', username: Cypress.env('auth_username'), password: Cypress.env('auth_password'), audience: Cypress.env('auth_audience'), scope: 'openid profile email', client_id: Cypress.env('auth_client_id'), client_secret: Cypress.env('auth_client_secret'), }, }; cy.request(options); });

Теперь, когда вы хотите инициировать запрос на аутентификацию по Auth0, вам просто нужно вызвать cy.login() из своего кода. Пользовательское имя команды для использования в вашем коде потребления (в данном случае login) соответствует первому аргументу, переданному методу add().

Итак, у вас есть собственная команда входа в Cypress, но что со значениями Cypress.env для ключей в объекте body?

Переменные среды Cypress

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

В корне вашего проекта создайте файл с именем cypress.env.json и, прежде чем заполнять этот файл, добавьте эту строку в ваш файл .gitignore:

cypress.env.json

Это гарантирует, что вы случайно не зафиксируете какие-либо конфиденциальные данные в своем репозитории Git. Пожалуйста, не забудьте этот шаг!

Теперь, вернувшись в файл cypress.env.json, добавьте в него следующий код:

{ "auth_audience": "https://my_tenant.auth0.com/api/v2/", "auth_url": "https://my_tenant.auth0.com/oauth/token", "auth_client_id": "my_client_id", "auth_client_secret": "my_client_secret", "auth_username": "my_username", "auth_password": "my_password" }

Вам нужно будет обновить каждое из приведенных выше свойств своими собственными значениями Auth0:

  • auth_audience: для этого вам нужно будет заменить my_tenant.auth0.com своим собственным доменом Auth0 (например, blog-samples.auth0.com). Вы можете найти эту информацию в приложении Auth0, которое вы создали ранее.
  • auth_url: Здесь тебе придется сделать то же самое. Вам нужно будет заменить my_tenant.auth0.com своим собственным доменом Auth0.
  • auth_client_id: В этом случае вам придется использовать свойство Client ID приложения Auth0, которое вы создали ранее.
  • auth_client_secret: Наконец, для этого свойства вам нужно будет использовать свойство Client Secret созданного вами приложения Auth0.

Для последних двух свойств (auth_username и auth_password) вам придется использовать учетные данные, использованные при создании пользователя сквозного тестирования.

Настройка переменных среды приложения React

Cypress — не единственный инструмент в вашем приложении, который должен принимать переменные среды. Вам также нужно будет определить переменные среды для вашего приложения React, хотя и в другом файле.

  • Переименуйте файл .env.sample в корне проекта просто в .env.
  • Замените значение my-tenant.auth0.com (в переменной REACT_APP_AUTH0_DOMAIN) своим доменом клиента (например, blog-samples.auth0.com).
  • Вставьте свой идентификатор клиента в переменную REACT_APP_AUTH0_CLIENT_ID. В отличие от файла cypress.env.json здесь не должно быть кавычек вокруг этого значения.

Грантовые стратегии

При создании приложения Auth0 вы включили предоставление пароля. Но что такое грант?

Auth0 определяет грант следующим образом:

OAuth 2.0 поддерживает несколько типов грантов, которые представляют собой методы, с помощью которых вы можете получить токены доступа. Разные типы грантов предоставляют разные типы доступа, и в зависимости от потребностей вашего приложения одни типы грантов подходят больше, чем другие.

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

Написание тестов с помощью Cypress Login Command

В ПОРЯДКЕ. Вы создали свою пользовательскую команду Cypress для входа в систему. Кроме того, вы настроили свою учетную запись Auth0 и обновили переменные среды Cypress. Теперь вы увидите, как можно использовать преимущества всего того, что вы сделали для входа в Auth0 программно с помощью Cypress!

В вашем проекте создайте новый каталог с именем integration внутри cypress. Затем добавьте к нему файл с именем login.js со следующим кодом:

describe('login', () => { it('should successfully log into our app', () => { cy.login() .then((resp) => { return resp.body; }) .then((body) => { const {access_token, expires_in, id_token} = body; const auth0State = { nonce: '', state: 'some-random-state' }; const callbackUrl = `/callback#access_token=${access_token}&scope=openid&id_token=${id_token}&expires_in=${expires_in}&token_type=Bearer&state=${auth0State.state}`; cy.visit(callbackUrl, { onBeforeLoad(win) { win.document.cookie = 'com.auth0.auth.some-random-state=' + JSON.stringify(auth0State); } }); }) }); });

Теперь в вашем терминале выполните следующие команды из корневого каталога вашего проекта React:

# install all dependencies npm install # run the React app on the background npm start & # run cypress npm run cypress:open

Это сделает панель инструментов Cypress открытой.

Оттуда вы можете щелкнуть интеграционный тест login.js в средстве запуска тестов Cypress. Теперь вы должны увидеть запущенный экземпляр Chrome с автоматическим входом пользователя в Auth0! Нажмите на страницу Профиль, чтобы увидеть адрес электронной почты пользователя, вошедшего в систему, для подтверждения.

«Я только что научился выполнять сквозные интеграционные тесты на SPA, защищенных с помощью Auth0.»

ОТПРАВИТЬ ЭТО В Твиттер

Заворачивать

В этой статье вы начали с изучения одного из основных принципов Cypress в отношении тестирования: избегайте тестирования сайтов, над которыми у вас нет контроля. Затем вы кратко рассмотрели Пользовательские команды Cypress и то, как они облегчают вашу жизнь, инкапсулируя повторяющуюся логику тестирования. Затем вы узнали об Стратегиях предоставления доступа — методах, с помощью которых вы можете получить токены доступа. В частности, вы узнали о стратегии Предоставление пароля владельца ресурса, которая позволяет вам получить токен, указав имя пользователя и пароль, тем самым избегая необходимости посещать страницу входа Auth0.

Примечание. Имейте в виду, что вы не должны использовать этот грант на своих общедоступных клиентах. Это исключение из этого правила, поскольку это сквозной тест, который не будет использоваться реальными пользователями.

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

Я надеюсь, что вам понравилось читать эту статью, и вы поняли, как вы можете включить Cypress в свое приложение Auth0. Если у вас есть какие-либо вопросы или проблемы, пожалуйста, не стесняйтесь оставлять комментарии ниже.

Спасибо за чтение!

Первоначально опубликовано на auth0.com.