Home

Автор: Филип Рик (Filip Hric)
Оригинал статьи
Перевод: Ольга Алифанова

Вместо того, чтобы кликать при логине, можно авторизоваться программно и появиться в приложении авторизованным пользователем. В этой статье мы разберем этот процесс. Объяснения можно найти и в документации Cypress, однако если вы хотите узнать больше о всяких тонкостях, продолжайте чтение.

Как работает Google SSO?

Google SSO следует стандартному процессу OAuth 2.0. В интернете можно найти графики, однако они всегда казались мне перегруженными. К тому же они ничего не говорят о том, как это тестировать в Cypress. Давайте вместо этого используем метафору.

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

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

Конечно, возможно и другое развитие событий. Вас нет в списках (пользователь не зарегистрирован), или вы сказали неверный пароль. Или клуб закрыт по техническим причинам (ошибка 500).

Где же вступает в игру Google SSO? В этой конкретной ситуации у вас нет пароля, но есть хороший друг, который знаком с владельцем клуба и может провести вас в это супер-эксклюзивное место. Охранник знает об этом, доверяет другу и пропустит вас.

Заметьте, что тут нам не нужен пароль, потому что все зависит от переговоров между вашим другом и охранником. Вам нужен только друг, который с ним поговорит. В нашем приложении разговаривать будут два сервера. В целом неважно, Google ли это сервер, или какой-то другой провайдер OAuth.

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

Как настроить приложение с Google SSO

Google сделал создание приложения с SSO довольно легким для разработчиков. Вот отличные примеры, как настроить это в вашем приложении. Это требует ряда простых шагов. Вот они:

1. Создайте проект OAuth в консоли разработчика Google.
2. Задайте домены, в которых может использоваться это приложение.
3. Задайте перенаправления после возврата из окна авторизации Google.
4. Добавьте кнопку для фронтэнда.
5. Добавьте валидацию для бэкэнда.

На шаге 1 создадутся Client ID и Client secret. Мы вскоре к ним вернемся, просто помните, что они существуют. Эти названия могут слегка путать, так как клиент в этом контексте указывает на ваше приложение, а не на пользователя, пытающегося авторизоваться. Однако это важно и понадобится нам, когда мы будем пытаться авторизоваться.

Остальные шаги выполняются разработчиками. Как тестировщику, вам полезно знать, что такая штука, как консоль разработчика Google, существует. Чтобы создать кнопку "Авторизоваться через Google", вам нужно зарегистрировать свое приложение в этой консоли. В нашей метафоре это та часть, где мы налаживаем отношения с влиятельным другом.

Кстати, если вы хотите попробовать пройти по шагам самостоятельно, создайте ваш собственный проект в консоли разработчика Google. Скопируйте Client ID (вам понадобится только он) и установите ваш исходный URL на http://localhost:3000. Если все выглядит как-то так, вы на верном пути.

Это можно сделать в моем приложении Trello, или следовать инструкции в документации Cypress для работы с приложением Cypress Real World.

Возможно, на скриншоте вы заметили то, о чем я еще упоминал – ссылка на https://developers.google.com/oauthplayground. Разберемся, что это такое.

Как настроить пользователя, который будет авторизовываться

Вы можете выбрать необходимого пользователя Google. Он у вас есть? Хорошо. Переходите на OAuth Playground. Эта служба позволяет вам создать "токен обновления". При помощи этого токена можно авторизовываться через Google API. Это означает, что вы сможете получать данные от вашей учетной записи Google. В большинстве приложений, позволяющих авторизацию через Google, эти данные – это картинка профиля, почта, ваше имя, или какие-то иные данные вашей учетки.

На площадке OAuth много опций, но так как мы хотим только авторизоваться, то выберем "Google Oauth API v2".

Не пытайтесь выбрать все различные API чисто для самоуспокоения. Всегда лучше ограничивать авторизацию до минимума. Мы хотим ограничить не только данные, к которым будет доступ у токена обновления – мы хотим ограничить то, где этот токен будет использоваться. Чтобы использовать его только в нашем проекте, отметьте чекбокс "Использовать свои данные OAuth" и введите Client ID и Client secret. Помните, я про них упоминал?

Настроив это, кликните по кнопке "Authorize API" и переходите к шагу 2. Вы в одном клике от цели. Кликните по кнопке "Exchange authorization code for tokens" и скопируйте токен обновления.

Авторизация пользователя в приложении

Как вы могли заметить, тут два крупных участника. Один из них – приложение (проект в консоли разработчика Google), а другой – пользователь, которого мы хотим авторизовать (площадка OAuth). Как только у нас есть Client ID, Client secret и токен обновления, мы готовы программно авторизоваться. Чтобы это сделать, создадим .request() в нашем тесте.

cy.request({
    method: 'POST',
    url: 'https://www.googleapis.com/oauth2/v4/token',
    body: {
        grant_type: 'refresh_token',
        client_id: Cypress.env('googleClientId'),
        client_secret: Cypress.env('googleClientSecret'),
        refresh_token: Cypress.env('googleRefreshToken'),
    },
}).then(({ body }) => {
    const { id_token } = body
})

Примечание: заметьте, что я храню все важные ключи в Cypress.env(). Я не сохраняю их в cypress.json или cypress.env.json, и вам не стоит. Никогда не сохраняйте их в своем репозитории и никогда не коммитьте их. Храните их в вашем окружении и добавляйте в Cypress при запуске. Я писал целую статью о том, как это сделать, и примеры можно также найти в документации Cypress.

Id_token, возвращенный сервером – это (помимо прочего) та информация, которую присылает сервер Google, как только закрывается окно авторизации. Вместо того, чтобы взаимодействовать с интерфейсом, мы получили эту информацию через нашу команду .request().

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

Различные приложения могут слегка отличаться друг от друга в этом смысле. Ваше приложение может отправить http-запрос, задать определенные куки, выполнить перенаправления, и т. д. Обычно оно берет id_token и валидирует его на сервере. Это значит, что вам может понадобиться дополнительный .request() внутри команды .then().

В моем приложении Trello у меня слегка упрощенная процедура – я отправляю токен на сервер, где он валидируется. Если валидация провалена, сервер возвращает ошибку. Если она успешна, сервер присылает токен авторизации, и пользователь становится авторизованным и может выполнять действия в приложении. Мой запрос будет выглядеть как-то так:

cy.request({
    method: 'POST',
    url: 'https://www.googleapis.com/oauth2/v4/token',
    body: {
        grant_type: 'refresh_token',
        client_id: Cypress.env('googleClientId'),
        client_secret: Cypress.env('googleClientSecret'),
        refresh_token: Cypress.env('googleRefreshToken'),
    },
}).then(({ body }) => {
    const { id_token } = body
        cy.request('POST', '/api/login', { jwt: id_token })
            .then( ({ body: { accessToken } }) => {
                cy.setCookie('trello_token', accessToken)
            })
    })

Часто задаваемые вопросы

Нужно ли добавлять https://developers.google.com/oauthplayground в адреса перенаправления в моем проекте? Да. Иначе сгенерированный в OAuth Playground пользовательский токен не будет работать для авторизации.

Можно ли использовать любой логин Google? Да, это может быть адрес gmail.com или корпоративный адрес, использующий Google. Вам нужно генерировать токен обновления для каждого авторизуемого пользователя.

Можно ли сделать это, не зная Client ID и Client secret? Нет. Вам нужно их получить для использования этого метода. Однако с шансами в вашем окружении они уже есть, если для локальной разработки вы пользуетесь Google SSO.

Обсудить статью в форуму