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

Использование OAuth 2.0 для клиентских веб-приложений

В этом документе рассказывается, как реализовать авторизацию OAuth 2.0 для доступа к YouTube Data API из веб-приложения JavaScript. который позволяет делиться с приложениями определенными данными, не разглашая при этом имена пользователей, пароли и другую конфиденциальную информацию. Например, приложение может использовать OAuth 2.0, чтобы получить разрешение на доступ к данным канала YouTube.

Этот процесс OAuth 2.0 называется неявным предоставлением разрешения. Он предназначен для приложений, которые получают доступ к API только когда пользователь находится в приложении. Такие приложения не могут хранить конфиденциальную информацию.

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

Клиентская библиотека API Google и сервисы идентификации Google

Если вы используете клиентскую библиотеку API Google для JavaScript, чтобы выполнять авторизованные вызовы в Google, вам следует использовать библиотеку JavaScript Сервисов идентификации Google для обработки потока авторизации. Мы настоятельно рекомендуем использовать модель кода сервисов идентификации Google, которая основана на более безопасном процессе авторизации с PKCE.

Важно! Мы настоятельно не рекомендуем напрямую взаимодействовать с конечными точками OAuth 2.0 от Google для реализации неявного предоставления доступа, поскольку это может привести к уязвимостям в системе безопасности. Чтобы безопасно реализовать авторизацию в браузере, используйте обработку кода авторизации из сервисов идентификации Google.

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

Требования

Как включить API для проекта

Любое приложение, вызывающее API Google, должно включить эти API в API Console.

Чтобы включить API для вашего проекта:

Откройте библиотеку API в Google API Console.
Выберите существующий проект или создайте новый.
На странице "Библиотека" найдите и включите YouTube Data API. Найдите другие API, которые будет использовать ваше приложение, и включите их.

Как создать учетные данные для авторизации

Любое приложение, которое использует OAuth 2.0 для доступа к API Google, должно иметь учетные данные для авторизации, которые идентифицируют приложение на сервере OAuth 2.0 Google. Ниже описано, как создать учетные данные для проекта. Затем ваши приложения смогут использовать эти учетные данные для доступа к API, которые вы включили для этого проекта.

Перейдите на страницу Клиенты.
Нажмите Создать клиента.
Выберите тип приложения Веб-приложение.
Заполните форму. Приложения, которые используют JavaScript для выполнения авторизованных запросов к API Google, должны указывать разрешенные источники JavaScript. Источники определяют домены, из которых ваше приложение может отправлять запросы на сервер OAuth 2.0. Эти источники должны соответствовать правилам проверки Google.

Определите области доступа

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

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

YouTube Data API v3 использует следующие области действия:

Объем	Описание
`https://www. googleapis. com/ auth/ youtube`	Управляйте своим аккаунтом YouTube
`https://www. googleapis. com/ auth/ youtube. channel-memberships. creator`	Посмотрите список текущих активных участников канала, их текущий уровень и дату, когда они стали участниками.
`https://www. googleapis. com/ auth/ youtube. force-ssl`	Просмотр, редактирование и окончательное удаление ваших видео, оценок, комментариев и субтитров на YouTube.
`https://www. googleapis. com/ auth/ youtube. readonly`	Просмотр вашего аккаунта YouTube
`https://www. googleapis. com/ auth/ youtube. upload`	Управляйте своими видео на YouTube
`https://www. googleapis. com/ auth/ youtubepartner`	Просмотр и управление вашими активами и связанным с ними контентом на YouTube
`https://www. googleapis. com/ auth/ youtubepartner-channel-audit`	Просмотр конфиденциальной информации вашего канала YouTube, актуальной во время процесса аудита с партнером YouTube

Полный список областей действия, которые можно использовать для доступа к API Google, приведен в документе Области действия API OAuth 2.0.

Получение токенов доступа OAuth 2.0

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

Шаг 1. Перенаправьте на сервер OAuth 2.0 от Google

Чтобы запросить разрешение на доступ к данным пользователя, перенаправьте его на сервер OAuth 2.0 Google.

Конечные точки OAuth 2.0

Сгенерируйте URL, чтобы запросить доступ у конечной точки OAuth 2.0 Google по адресу https://accounts.google.com/o/oauth2/v2/auth. Эта конечная точка доступна по протоколу HTTPS. Обычные HTTP-подключения отклоняются.

Сервер авторизации Google поддерживает следующие параметры строки запроса для приложений веб-сервера:

Параметры

client_id

Обязательно

Идентификатор клиента для вашего приложения. Это значение можно найти на странице клиентов в Cloud Console.

redirect_uri

Обязательно

Определяет, куда сервер API перенаправляет пользователя после завершения процесса авторизации. Значение должно точно совпадать с одним из авторизованных URI перенаправления для клиента OAuth 2.0, который вы настроили на странице клиентов в Cloud Console. Если это значение не соответствует авторизованному URI переадресации для предоставленного параметра client_id, вы получите ошибку redirect_uri_mismatch.

Обратите внимание, что схема (http или https), регистр и косая черта в конце (/) должны совпадать.

response_type

Обязательно

В приложениях JavaScript значение параметра должно быть равно token. Это значение указывает серверу авторизации Google, что токен доступа должен быть возвращен в виде пары name=value в идентификаторе фрагмента URI (#), на который пользователь перенаправляется после завершения процесса авторизации.

scope

Обязательно

Список областей действия, разделенных пробелами, которые определяют ресурсы, к которым ваше приложение может получить доступ от имени пользователя. Эти значения используются в окне запроса доступа, которое Google показывает пользователю.

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

YouTube Data API v3 использует следующие области действия:

Объем	Описание
`https://www. googleapis. com/ auth/ youtube`	Управляйте своим аккаунтом YouTube
`https://www. googleapis. com/ auth/ youtube. channel-memberships. creator`	Посмотрите список текущих активных участников канала, их текущий уровень и дату, когда они стали участниками.
`https://www. googleapis. com/ auth/ youtube. force-ssl`	Просмотр, редактирование и окончательное удаление ваших видео, оценок, комментариев и субтитров на YouTube.
`https://www. googleapis. com/ auth/ youtube. readonly`	Просмотр вашего аккаунта YouTube
`https://www. googleapis. com/ auth/ youtube. upload`	Управляйте своими видео на YouTube
`https://www. googleapis. com/ auth/ youtubepartner`	Просмотр и управление вашими активами и связанным с ними контентом на YouTube
`https://www. googleapis. com/ auth/ youtubepartner-channel-audit`	Просмотр конфиденциальной информации вашего канала YouTube, актуальной во время процесса аудита с партнером YouTube

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

state

Рекомендуется

Любое строковое значение, которое ваше приложение использует для сохранения состояния между запросом авторизации и ответом сервера авторизации. Сервер возвращает точное значение, которое вы отправляете в виде пары name=value в идентификаторе фрагмента URL (#) в redirect_uri после того, как пользователь разрешит или запретит вашему приложению доступ.

Этот параметр можно использовать для разных целей, например чтобы направлять пользователя к нужному ресурсу в приложении, отправлять одноразовые коды и предотвращать подделку межсайтовых запросов. Поскольку redirect_uri можно подобрать, использование значения state повышает вероятность того, что входящее подключение является результатом запроса на аутентификацию. Если вы создадите случайную строку или закодируете хеш файла cookie или другого значения, отражающего состояние клиента, то сможете проверить ответ и убедиться, что запрос и ответ были отправлены из одного и того же браузера. Это поможет защититься от таких атак, как межсайтовая подделка запроса. Пример создания и подтверждения токена state можно найти в документации по OpenID Connect.

Важно! Клиент OAuth должен предотвращать CSRF, как указано в спецификации OAuth2 . Один из способов сделать это – использовать параметр state, чтобы сохранить состояние между запросом авторизации и ответом сервера авторизации.

include_granted_scopes

Необязательно

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

enable_granular_consent

Необязательно

Значение по умолчанию – true. Если задано значение false, более точные разрешения аккаунта Google будут отключены для идентификаторов клиентов OAuth, созданных до 2019 г. Для новых идентификаторов клиентов OAuth это не имеет значения, поскольку для них всегда включены более детализированные разрешения.

Когда Google включит детализированные разрешения для приложения, этот параметр перестанет действовать.

login_hint

Необязательно

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

Установите для значения параметра адрес электронной почты или идентификатор sub, который эквивалентен идентификатору Google пользователя.

prompt

Необязательно

Список запросов, разделенных пробелами, с учетом регистра, которые будут показаны пользователю. Если вы не укажете этот параметр, запрос будет показан только при первом обращении вашего проекта. Подробнее о том, как запросить повторное согласие…

Возможные значения:

`none`	Не показывать экраны аутентификации или запроса согласия. Нельзя указывать вместе с другими значениями.
`consent`	Запросите согласие пользователя.
`select_account`	Предложите пользователю выбрать аккаунт.

Пример перенаправления на сервер авторизации Google

Ниже приведен пример URL с разрывами строк и пробелами для удобства чтения. URL запрашивает доступ к области действия, которая позволяет получить данные пользователя YouTube. Он использует поэтапную авторизацию (include_granted_scopes=true), чтобы новый токен доступа охватывал все области действия, к которым пользователь ранее предоставил приложению доступ. В примере также заданы другие параметры.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 client_id=client_id

После того как вы создадите URL запроса, перенаправьте пользователя на него.

Пример кода JavaScript

В следующем фрагменте кода JavaScript показано, как инициировать процесс авторизации в JavaScript без использования клиентской библиотеки API Google для JavaScript. Поскольку эта конечная точка OAuth 2.0 не поддерживает совместное использование ресурсов из разных источников (CORS), фрагмент создает форму, которая открывает запрос к этой конечной точке.

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/calendar.readonly',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

Шаг 2. Google запрашивает согласие пользователя

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

На этом этапе вашему приложению не нужно ничего делать, пока оно ожидает ответа от сервера OAuth 2.0 Google, указывающего, был ли предоставлен доступ. Этот ответ описан на следующем шаге.

Ошибки

Запросы к конечной точке авторизации OAuth 2.0 от Google могут приводить к показу пользовательских сообщений об ошибках вместо ожидаемых процессов аутентификации и авторизации. Ниже приведены распространенные коды ошибок и способы их устранения.

`admin_policy_enforced`

Аккаунт Google не может авторизовать одну или несколько запрошенных областей действия из-за правил, установленных администратором Google Workspace. Подробнее о том, как администратор может ограничить доступ ко всем областям действия или только к конфиденциальным и с ограниченным доступом, пока доступ не будет явно предоставлен вашему идентификатору клиента OAuth, рассказывается в справочной статье Справочного центра для администраторов Google Workspace Как управлять доступом сторонних и внутренних приложений к данным Google Workspace.

`disallowed_useragent`

Конечная точка авторизации отображается во встроенном агенте пользователя, который запрещен правилами OAuth 2.0 Google.

Разработчики для iOS и macOS могут столкнуться с этой ошибкой при открытии запросов на авторизацию в WKWebView. Вместо этого разработчикам следует использовать библиотеки iOS, например вход с аккаунтом Google для iOS или AppAuth для iOS от OpenID Foundation.

Веб-разработчики могут столкнуться с этой ошибкой, когда приложение для iOS или macOS открывает общую веб-ссылку во встроенном агенте пользователя, а пользователь переходит на конечную точку авторизации OAuth 2.0 Google с вашего сайта. Разработчики должны разрешить открывать общие ссылки в обработчике ссылок по умолчанию операционной системы, который включает как обработчики универсальных ссылок, так и браузер по умолчанию. Также поддерживается библиотека SFSafariViewController.

`org_internal`

Идентификатор клиента OAuth в запросе относится к проекту, который ограничивает доступ к аккаунтам Google в определенной организации Google Cloud. Подробную информацию об этом параметре конфигурации можно найти в разделе Тип пользователя справочной статьи "Как настроить окно запроса доступа OAuth".

`invalid_client`

Источник, из которого был сделан запрос, не авторизован для этого клиента. Подробнее: origin_mismatch.

`deleted_client`

Клиент OAuth, используемый для выполнения запроса, был удален. Удаление может выполняться вручную или автоматически, если клиенты не используются . Удаленных клиентов можно восстановить в течение 30 дней после удаления. Подробнее…

`invalid_grant`

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

`origin_mismatch`

Схема, домен и/или порт JavaScript, из которого исходит запрос на авторизацию, могут не совпадать с URI разрешенного источника JavaScript, зарегистрированного для идентификатора клиента OAuth. Проверьте разрешенные источники JavaScript на странице Клиенты в консоли Google Cloud.

`redirect_uri_mismatch`

Значение redirect_uri, переданное в запросе на авторизацию, не соответствует авторизованному URI переадресации для идентификатора клиента OAuth. Проверьте авторизованные URI перенаправления на странице клиентов в консоли Google Cloud.

Параметр redirect_uri может относиться к устаревшему и больше не поддерживаемому потоку OAuth вне диапазона (OOB). Чтобы обновить интеграцию, следуйте инструкциям в руководстве по переносу.

`invalid_request`

При обработке запроса произошла ошибка. Это может быть связано со следующими причинами:

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

Шаг 3. Обработайте ответ сервера OAuth 2.0

Конечные точки OAuth 2.0

Важно! Прежде чем обрабатывать ответ OAuth 2.0, убедитесь, что параметр state, полученный от Google, совпадает с параметром state, отправленным в запросе на авторизацию. Это позволяет убедиться, что запрос отправляет пользователь, а не вредоносный скрипт, и снижает риск CSRF-атак.

Сервер OAuth 2.0 отправляет ответ на адрес redirect_uri, указанный в запросе токена доступа.

Если пользователь одобрит запрос, ответ будет содержать токен доступа. Если пользователь не одобрит запрос, ответ будет содержать сообщение об ошибке. Токен доступа или сообщение об ошибке возвращается во фрагменте хеша URI перенаправления, как показано в следующих примерах:

Ответ токена доступа:
```
https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600
```
Помимо параметра access_token, строка фрагмента также содержит параметр token_type, который всегда имеет значение Bearer, и параметр expires_in, который указывает срок действия токена в секундах. Если в запросе токена доступа был указан параметр state, его значение также будет включено в ответ.

Ответ об ошибке:

https://oauth2.example.com/callback#error=access_denied

Пример ответа сервера OAuth 2.0

Вы можете протестировать этот процесс, нажав на следующий пример URL, который запрашивает доступ только для чтения к метаданным файлов на вашем Google Диске и доступ только для чтения к мероприятиям Google Календаря:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 client_id=client_id

После завершения процесса OAuth 2.0 браузер перенаправит вас на страницу OAuth 2.0 Playground – инструмента для тестирования процессов OAuth. Вы увидите, что код авторизации автоматически добавлен в OAuth 2.0 Playground.

Шаг 4. Проверьте, какие области действия разрешили пользователи

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

Однако из этого правила бывают исключения. Приложения Google Workspace Enterprise с делегированием полномочий на уровне домена или приложения, отмеченные как Надежные, не показывают окно запроса доступа. Для таких приложений пользователи не увидят окно запроса доступа с детализированными разрешениями. Приложение получит либо все запрошенные области действия, либо ни одной.

Подробную информацию можно найти в статье Как работать с детализированными разрешениями.

Конечные точки OAuth 2.0

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

Например, в следующем примере ответа на запрос токена доступа указано, что пользователь предоставил вашему приложению доступ к разрешениям на чтение активности на Диске и мероприятий в Календаре:

  {
    "access_token": "1/fFAGRNJru1FTz70BzhT3Zg",
    "expires_in": 3920,
    "token_type": "Bearer",
    "scope": "https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/calendar.readonly",
    "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI"
  }

Вызов API Google

Конечные точки OAuth 2.0

Получив токен доступа, приложение может использовать его для вызова Google API от имени определенного аккаунта пользователя, если предоставлены необходимые для API области доступа. Для этого включите токен доступа в запрос к API, добавив параметр запроса access_token или значение Bearer заголовка HTTP Authorization. По возможности используйте заголовок HTTP, поскольку строки запросов обычно видны в журналах сервера. В большинстве случаев для настройки вызовов API Google можно использовать клиентскую библиотеку (например, при вызове YouTube Live Streaming API).

Обратите внимание, что YouTube Live Streaming API не поддерживает сервисные аккаунты. Поскольку связать сервисный аккаунт с аккаунтом YouTube невозможно, попытки авторизовать запросы с помощью этого процесса приведут к ошибке NoLinkedYouTubeAccount.

Вы можете попробовать все API Google и посмотреть их области действия в OAuth 2.0 Playground.

Примеры HTTP GET

Вызов конечной точки liveBroadcasts.list (YouTube Live Streaming API) с использованием HTTP-заголовка Authorization: Bearer может выглядеть следующим образом: Обратите внимание, что вам нужно указать собственный токен доступа:

GET /youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Вот пример вызова того же API для аутентифицированного пользователя с помощью параметра строки запроса access_token:

GET https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true

Примеры использования оператора `curl`

Вы можете протестировать эти команды с помощью приложения командной строки curl. Вот пример с использованием заголовка HTTP (рекомендуемый вариант):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true

или параметр строки запроса:

curl https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true

Пример кода JavaScript

В приведенном ниже фрагменте кода показано, как использовать технологию совместного использования ресурсов между разными источниками (CORS) для отправки запроса к API Google. В этом примере не используется клиентская библиотека API Google для JavaScript. Однако даже если вы не используете клиентскую библиотеку, руководство по поддержке CORS в документации к ней, скорее всего, поможет вам лучше понять эти запросы.

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

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id,snippet&mine=true' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

Полный пример

Конечные точки OAuth 2.0

В этом примере кода показано, как выполнить процесс OAuth 2.0 в JavaScript без использования клиентской библиотеки API Google для JavaScript. Код предназначен для HTML-страницы, на которой есть кнопка для тестирования запроса к API. Если вы нажмете на кнопку, код проверит, сохранен ли в локальном хранилище браузера токен доступа к API. Если да, то запрос к API выполняется. В противном случае запускается процесс OAuth 2.0.

Для процесса OAuth 2.0 страница выполняет следующие действия:

Он направляет пользователя на сервер OAuth 2.0 Google, который запрашивает доступ к областям действия https://www.googleapis.com/auth/youtube.force-ssl и https://www.googleapis.com/auth/calendar.readonly.
После предоставления (или запрета) доступа к одной или нескольким запрошенным областям пользователь перенаправляется на исходную страницу, которая анализирует токен доступа из строки идентификатора фрагмента.
На этой странице можно проверить, к каким областям действия пользователь предоставил приложению доступ.
Если пользователь предоставил доступ к запрошенным областям действия, страница использует токен доступа для выполнения примера запроса к API.

Этот запрос к API вызывает метод liveBroadcasts.list YouTube Data API, чтобы получить список трансляций на канале YouTube авторизованного пользователя.
Если запрос выполнен успешно, ответ API регистрируется в консоли отладки браузера.

Вы можете отозвать доступ к приложению на странице Разрешения в аккаунте Google. Приложение указано под названием, которое вы ввели на странице брендинга в окне запроса доступа OAuth при создании идентификатора клиента.

Чтобы запустить этот код локально, вам нужно задать значения переменных YOUR_CLIENT_ID и YOUR_REDIRECT_URI, которые соответствуют вашим учетным данным для авторизации. Переменная YOUR_REDIRECT_URI должна быть задана для того же URL, по которому показывается страница. Значение должно точно совпадать с одним из авторизованных URI перенаправления для клиента OAuth 2.0, настроенных на странице "Клиенты" в Cloud Console. Если это значение не совпадает с авторизованным URI, вы получите ошибку redirect_uri_mismatch. В вашем проекте также должен быть включен подходящий API для этого запроса.

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var fragmentString = location.hash.substring(1);
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0 && params['state']) {
    if (params['state'] == localStorage.getItem('state')) {
      localStorage.setItem('oauth2-test-params', JSON.stringify(params) );

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) { 
      // User authorized the request. Now, check which scopes were granted.
      if (params['scope'].includes('https://www.googleapis.com/auth/drive.metadata.readonly')) {
        // User authorized read-only Drive activity permission.
        // Calling the APIs, etc.
        var xhr = new XMLHttpRequest();
        xhr.open('GET',
          'https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id,snippet&mine=true' +
          'access_token=' + params['access_token']);
        xhr.onreadystatechange = function (e) {
          if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.response);
          } else if (xhr.readyState === 4 && xhr.status === 401) {
            // Token invalid, so prompt for user permission.
            oauth2SignIn();
          }
        };
        xhr.send(null);
      }
      else {
        // User didn't authorize read-only Drive activity permission.
        // Update UX and application accordingly
        console.log('User did not authorize read-only Drive activity permission.');
      }

      // Check if user authorized Calendar read permission.
      if (params['scope'].includes('https://www.googleapis.com/auth/calendar.readonly')) {
        // User authorized Calendar read permission.
        // Calling the APIs, etc.
        console.log('User authorized Calendar read permission.');
      }
      else {
        // User didn't authorize Calendar read permission.
        // Update UX and application accordingly
        console.log('User did not authorize Calendar read permission.');
      } 
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/calendar.readonly',
                  'state': state,
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

Правила проверки источников JavaScript

Чтобы помочь разработчикам защитить свои приложения, Google применяет к источникам JavaScript следующие правила проверки. Источники JavaScript должны соответствовать этим правилам. Определения домена, хоста и схемы, используемые в этих правилах, приведены в разделе 3 стандарта RFC 3986.

Правила проверки данных
Схема	Источники JavaScript должны использовать схему HTTPS, а не обычный HTTP. URI localhost (включая URI IP-адресов localhost) не подпадают под действие этого правила.
Хост	В качестве хостов нельзя использовать IP-адреса. Это правило не распространяется на IP-адреса localhost.
Домен	Домены верхнего уровня хоста должны быть указаны в списке общедоступных суффиксов. Домены хоста не могут быть `“googleusercontent.com”`. Источники JavaScript не могут содержать домены сервисов сокращения URL (например, `goo.gl`), если только приложение не владеет доменом.
Userinfo	Источники JavaScript не могут содержать подкомпонент userinfo.
Путь	Источники JavaScript не могут содержать компонент пути.
Запрос	Источники JavaScript не могут содержать компонент запроса.
Фрагмент	Источники JavaScript не могут содержать фрагмент.
Персонажи	Источники JavaScript не могут содержать определенные символы, в том числе: Подстановочные знаки (`'*'`) Непечатные символы ASCII Недопустимые процентные кодировки (любая процентная кодировка, которая не соответствует форме кодирования URL, состоящей из знака процента и двух шестнадцатеричных цифр). Нулевые символы (закодированный нулевой символ, например `%00`, `%C0%80`).

Пошаговая авторизация

В протоколе OAuth 2.0 приложение запрашивает авторизацию для доступа к ресурсам, которые идентифицируются областями действия. Для удобства пользователей рекомендуется запрашивать авторизацию для ресурсов в тот момент, когда они вам нужны. Чтобы реализовать этот метод, сервер авторизации Google поддерживает поэтапную авторизацию. Эта функция позволяет запрашивать области действия по мере необходимости. Если пользователь предоставляет разрешение для новой области действия, возвращается код авторизации, который можно обменять на токен, содержащий все области действия, предоставленные пользователем проекту.

Например, приложение может получать данные о канале YouTube, принадлежащем пользователю, прошедшему аутентификацию, и позволять ему получать данные YouTube Аналитики через специальный поток. В этом случае при входе приложение может запросить доступ только к области действия https://www.googleapis.com/auth/youtube.force-ssl. Однако если пользователь попытался получить доступ к данным Аналитики для своего канала, приложение также может запросить доступ к области https://www.googleapis.com/auth/yt-analytics.readonly.

К токену доступа, полученному в результате поэтапной авторизации, применяются следующие правила:

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

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

Конечные точки OAuth 2.0

В этом примере вызывающее приложение запрашивает доступ к данным пользователя в YouTube в дополнение к другим разрешениям, которые пользователь уже предоставил приложению.

Чтобы добавить области действия в существующий токен доступа, включите параметр include_granted_scopes в запрос к серверу OAuth 2.0 Google.

Ниже приведен фрагмент кода, в котором показано, как это сделать. В этом фрагменте кода предполагается, что вы сохранили в локальном хранилище браузера области действия, для которых действителен ваш токен доступа. Полный пример кода сохраняет список областей действия, для которых действителен токен доступа, путем установки свойства oauth2-test-params.scope в локальном хранилище браузера.

Фрагмент кода сравнивает области действия, для которых действителен токен доступа, с областью действия, которую вы хотите использовать для определенного запроса. Если токен доступа не охватывает эту область, запускается процесс OAuth 2.0. Функция oauth2SignIn здесь такая же, как и в шаге 2 (и в полном примере ниже).

var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl';
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));

var current_scope_granted = false;
if (params.hasOwnProperty('scope')) {
  var scopes = params['scope'].split(' ');
  for (var s = 0; s < scopes.length; s++) {
    if (SCOPE == scopes[s]) {
      current_scope_granted = true;
    }
  }
}

if (!current_scope_granted) {
  oauth2SignIn(); // This function is defined elsewhere in this document.
} else {
  // Since you already have access, you can proceed with the API request.
}

Отзыв токена

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

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

Конечные точки OAuth 2.0

Чтобы отозвать токен программно, приложение отправляет запрос на адрес https://oauth2.googleapis.com/revoke и включает токен в качестве параметра:

curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
        https://oauth2.googleapis.com/revoke?token={token}

Это может быть токен доступа или токен обновления. Если токен является токеном доступа и у него есть соответствующий токен обновления, токен обновления также будет отозван.

Если отзыв будет успешно обработан, код статуса HTTP ответа будет 200. В случае ошибки возвращается код статуса HTTP 400 и код ошибки.

В следующем фрагменте кода JavaScript показано, как отозвать токен без использования клиентской библиотеки API Google для JavaScript. Поскольку конечная точка OAuth 2.0 Google для отзыва токенов не поддерживает технологию Cross-origin Resource Sharing (CORS), код создает форму и отправляет ее конечной точке, а не использует метод XMLHttpRequest() для отправки запроса.

function revokeAccess(accessToken) {
  // Google's OAuth 2.0 endpoint for revoking access tokens.
  var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';

  // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', revokeTokenEndpoint);

  // Add access token to the form so it is set as value of 'token' parameter.
  // This corresponds to the sample curl request, where the URL is:
  //      https://oauth2.googleapis.com/revoke?token={token}
  var tokenField = document.createElement('input');
  tokenField.setAttribute('type', 'hidden');
  tokenField.setAttribute('name', 'token');
  tokenField.setAttribute('value', accessToken);
  form.appendChild(tokenField);

  // Add form to page and submit it to actually revoke the token.
  document.body.appendChild(form);
  form.submit();
}

Как реализовать защиту связанных аккаунтов

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

Вот несколько примеров типов событий, которые сервис защиты связанных аккаунтов Google отправляет в ваше приложение:

https://schemas.openid.net/secevent/risc/event-type/sessions-revoked
https://schemas.openid.net/secevent/oauth/event-type/token-revoked
https://schemas.openid.net/secevent/risc/event-type/account-disabled

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

Использование OAuth 2.0 для клиентских веб-приложений Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Клиентская библиотека API Google и сервисы идентификации Google

Требования

Как включить API для проекта

Как создать учетные данные для авторизации

Определите области доступа

Получение токенов доступа OAuth 2.0

Шаг 1. Перенаправьте на сервер OAuth 2.0 от Google

Конечные точки OAuth 2.0

Пример перенаправления на сервер авторизации Google

Пример кода JavaScript

Шаг 2. Google запрашивает согласие пользователя

Ошибки

admin_policy_enforced

disallowed_useragent

org_internal

invalid_client

deleted_client

invalid_grant

origin_mismatch

redirect_uri_mismatch

invalid_request

Шаг 3. Обработайте ответ сервера OAuth 2.0

Конечные точки OAuth 2.0

Пример ответа сервера OAuth 2.0

Шаг 4. Проверьте, какие области действия разрешили пользователи

Конечные точки OAuth 2.0

Вызов API Google

Конечные точки OAuth 2.0

Примеры HTTP GET

Примеры использования оператора curl

Пример кода JavaScript

Полный пример

Конечные точки OAuth 2.0

Правила проверки источников JavaScript

Пошаговая авторизация

Конечные точки OAuth 2.0

Отзыв токена

Конечные точки OAuth 2.0

Как реализовать защиту связанных аккаунтов

Использование OAuth 2.0 для клиентских веб-приложений

`admin_policy_enforced`

`disallowed_useragent`

`org_internal`

`invalid_client`

`deleted_client`

`invalid_grant`

`origin_mismatch`

`redirect_uri_mismatch`

`invalid_request`

Примеры использования оператора `curl`