Настройка

Чтобы авторизовать доступ к API Google в веб-приложении с помощью библиотеки JavaScript сервисов идентификации Google (google.accounts.oauth2), сначала необходимо сделать следующее:

  1. Получите идентификатор клиента OAuth 2.0.
  2. Настройте окно запроса доступа OAuth и области действия.
  3. Загрузите клиентскую библиотеку.
  4. При необходимости настройте Content Security Policy (CSP) и Cross-Origin Opener Policy (COOP).

Как получить идентификатор клиента Google API

Чтобы включить авторизацию через аккаунт Google на сайте, сначала нужно настроить идентификатор клиента Google API. Выполните следующие действия:

  1. Откройте страницу Клиенты в консоли Google Cloud.
  2. Создайте или выберите проект Cloud Console. При создании рабочих приложений может потребоваться несколько проектов. В этом случае повторите оставшиеся шаги из этого раздела для каждого проекта.
  3. Нажмите Создать клиент и в поле Тип приложения выберите Веб-приложение, чтобы создать идентификатор клиента. Чтобы использовать существующий идентификатор клиента, выберите один из вариантов типа Веб-приложение.

  4. Добавьте URI своего сайта в поле Разрешенные источники JavaScript. URI включает только схему и полное имя хоста. Пример: https://www.example.com.

  5. Если вы используете модель кода авторизации с ux_mode: 'redirect' (или обмениваетесь кодами авторизации в конечной точке серверной части), добавьте URI перенаправления в поле Разрешенные URI перенаправления. URI перенаправления включают схему, полное имя хоста и путь и должны соответствовать правилам проверки URI перенаправления. например https://www.example.com/oauth2callback.

После завершения настройки запишите созданный идентификатор клиента. Это значение нужно передавать в свойстве client_id при инициализации initCodeClient() или initTokenClient(). Также будет создан секретный код клиента, который необходимо хранить в тайне и использовать только для операций обмена токенами на стороне сервера.

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

  1. Откройте страницу брендинга в разделе Google Auth Platform в Cloud Console.
  2. Если появится запрос, выберите настроенный проект.
  3. Заполните форму брендинга (название приложения, логотип приложения, адрес электронной почты службы поддержки, авторизованные домены, ссылка на главную страницу приложения и ссылка на Политику конфиденциальности) и нажмите Сохранить.
  4. Перейдите на страницу Доступ к данным, чтобы настроить области действия API Google, необходимые для вашего приложения. Рекомендуется запрашивать области доступа постепенно, по мере необходимости, а не все сразу.
  5. Проверьте статус подтверждения. Если ваше приложение запрашивает доступ к конфиденциальным или ограниченным областям действия, отправьте его на проверку. Подробнее о требованиях к проверке OAuth…

Content Security Policy и COOP

Если в вашем веб-приложении применяется Content Security Policy (CSP), разрешите следующие источники сервисов идентификации Google:

  • script-src: https://accounts.google.com/gsi/client.
  • frame-src: https://accounts.google.com/gsi/.
  • connect-src: https://accounts.google.com/gsi/.

Если вы используете всплывающие окна для авторизации (initTokenClient или initCodeClient с ux_mode: 'popup'), настройте заголовок HTTP-ответа Cross-Origin-Opener-Policy (COOP) на same-origin-allow-popups, чтобы диалоговое окно могло передавать ответ авторизации обратно на вашу страницу.

Дальнейшие действия

Затем загрузите клиентскую библиотеку на веб-страницу, чтобы начать инициализацию клиента авторизации.