В этом документе объясняется, как реализовать авторизацию OAuth 2.0 для доступа к API данных YouTube из веб-приложения на JavaScript. OAuth 2.0 позволяет пользователям делиться определенными данными с приложением, сохраняя при этом конфиденциальность своих имен пользователей, паролей и другой информации. Например, приложение может использовать OAuth 2.0 для получения разрешения на загрузку видео на канал пользователя на YouTube.
Этот поток аутентификации OAuth 2.0 называется потоком неявного предоставления доступа . Он предназначен для приложений, которые обращаются к API только тогда, когда пользователь находится в приложении. Такие приложения не могут хранить конфиденциальную информацию.
В этом процессе ваше приложение открывает URL-адрес Google, который использует параметры запроса для идентификации вашего приложения и типа доступа к API, необходимого приложению. Вы можете открыть URL-адрес в текущем окне браузера или во всплывающем окне. Пользователь может пройти аутентификацию в Google и предоставить запрошенные разрешения. Затем Google перенаправляет пользователя обратно в ваше приложение. Перенаправление включает токен доступа, который ваше приложение проверяет, а затем использует для выполнения запросов к API.
Библиотека клиентов Google API и сервисы идентификации Google.
Если вы используете клиентскую библиотеку Google API для JavaScript для выполнения авторизованных вызовов к Google, вам следует использовать библиотеку Google Identity Services для JavaScript для обработки потока OAuth 2.0. См. модель токенов Google Identity Services, которая основана на неявном потоке предоставления доступа OAuth 2.0.
Предварительные требования
Включите API для вашего проекта
Любое приложение, использующее API Google, должно включить эти API в своих настройках. API Console.
Чтобы включить API для вашего проекта:
- Open the API Library в Google API Console.
- If prompted, select a project, or create a new one.
- Воспользуйтесь страницей «Библиотека» , чтобы найти и включить YouTube Data API. Найдите и включите также другие API, которые будет использовать ваше приложение.
Создать учетные данные авторизации
Любое приложение, использующее OAuth 2.0 для доступа к API Google, должно иметь учетные данные авторизации, идентифицирующие приложение для сервера OAuth 2.0 Google. Следующие шаги описывают, как создать учетные данные для вашего проекта. Затем ваши приложения смогут использовать эти учетные данные для доступа к API, которые вы включили для этого проекта.
- Go to the Clients page.
- Нажмите «Создать клиента» .
- Выберите тип приложения: Веб-приложение .
- Заполните форму. Приложения, использующие JavaScript для выполнения авторизованных запросов к API Google, должны указать авторизованные источники JavaScript . Источники определяют домены, с которых ваше приложение может отправлять запросы на сервер OAuth 2.0. Эти источники должны соответствовать правилам проверки Google .
Определите области доступа
Области доступа (scopes) позволяют вашему приложению запрашивать доступ только к тем ресурсам, которые ему необходимы, а также дают пользователям возможность контролировать объем предоставляемого ими доступа. Таким образом, может существовать обратная зависимость между количеством запрашиваемых областей доступа и вероятностью получения согласия пользователя.
Прежде чем приступать к внедрению авторизации OAuth 2.0, мы рекомендуем определить области доступа, к которым вашему приложению потребуются разрешения.
API данных YouTube версии 3 использует следующие области действия:
| Объем | Описание |
|---|---|
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 OAuth 2.0» содержится полный список областей действия, которые вы можете использовать для доступа к API Google.
Получение токенов доступа OAuth 2.0
Следующие шаги показывают, как ваше приложение взаимодействует с сервером Google OAuth 2.0 для получения согласия пользователя на выполнение запроса к API от его имени. Ваше приложение должно получить это согласие, прежде чем оно сможет выполнить запрос к API Google, требующий авторизации пользователя.
Шаг 1: Перенаправление на сервер Google OAuth 2.0
Чтобы запросить разрешение на доступ к данным пользователя, перенаправьте пользователя на сервер Google OAuth 2.0.
Конечные точки OAuth 2.0
Сгенерируйте URL-адрес для запроса доступа к конечной точке Google OAuth 2.0 по адресу https://accounts.google.com/o/oauth2/v2/auth . Эта конечная точка доступна по протоколу HTTPS; соединения по протоколу HTTP отклоняются.
Сервер авторизации Google поддерживает следующие параметры строки запроса для веб-приложений:
| Параметры | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
client_id | Необходимый Идентификатор клиента вашего приложения. Это значение можно найти в Cloud ConsoleClients page. | ||||||||||||||||
redirect_uri | Необходимый Определяет, куда API-сервер перенаправляет пользователя после завершения авторизации. Значение должно точно совпадать с одним из разрешенных URI перенаправления для клиента OAuth 2.0, который вы настроили в настройках вашего клиента. Cloud ConsoleClients pageЕсли это значение не соответствует авторизованному URI перенаправления для указанного Обратите внимание, что схема | ||||||||||||||||
response_type | Необходимый Приложениям JavaScript необходимо установить значение параметра в | ||||||||||||||||
scope | Необходимый Разделённый пробелами список областей действия, определяющих ресурсы, к которым ваше приложение может получить доступ от имени пользователя. Эти значения используются для формирования экрана согласия, который Google отображает пользователю. Области доступа (scopes) позволяют вашему приложению запрашивать доступ только к тем ресурсам, которые ему необходимы, а также дают пользователям возможность контролировать объем предоставляемого ими доступа. Таким образом, существует обратная зависимость между количеством запрашиваемых областей доступа и вероятностью получения согласия пользователя. API данных YouTube версии 3 использует следующие области действия:
В документе «Области действия API OAuth 2.0» представлен полный список областей действия, которые можно использовать для доступа к API Google. Мы рекомендуем, чтобы ваше приложение запрашивало доступ к областям авторизации в контексте, когда это возможно. Запрашивая доступ к пользовательским данным в контексте, используя поэтапную авторизацию , вы помогаете пользователям понять, зачем вашему приложению нужен запрашиваемый доступ. | ||||||||||||||||
state | Рекомендуется Указывает любое строковое значение, которое ваше приложение использует для поддержания состояния между вашим запросом на авторизацию и ответом сервера авторизации. Сервер возвращает точное значение, которое вы отправляете в виде пары Этот параметр можно использовать для различных целей, например, для перенаправления пользователя на правильный ресурс в вашем приложении, отправки одноразовых чисел (nonce) и предотвращения подделки межсайтовых запросов (CSS). Поскольку ваш | ||||||||||||||||
include_granted_scopes | Необязательный Позволяет приложениям использовать поэтапную авторизацию для запроса доступа к дополнительным областям действия в контексте. Если вы установите значение этого параметра равным | ||||||||||||||||
enable_granular_consent | Необязательный По умолчанию — Когда Google включит детальные разрешения для приложения, этот параметр больше не будет иметь никакого эффекта. | ||||||||||||||||
login_hint | Необязательный Если ваше приложение знает, какой пользователь пытается пройти аутентификацию, оно может использовать этот параметр для предоставления подсказки серверу аутентификации Google. Сервер использует эту подсказку для упрощения процесса входа, либо предварительно заполняя поле адреса электронной почты в форме входа, либо выбирая подходящий сеанс множественного входа. Установите значение параметра равным адресу электронной почты или | ||||||||||||||||
prompt | Необязательный Список запросов, разделенных пробелами и чувствительных к регистру, для отображения пользователю. Если этот параметр не указан, запрос будет выведен только при первом запросе доступа вашим проектом. Подробнее см. в разделе Запрос повторного согласия . Возможные значения:
| ||||||||||||||||
Пример перенаправления на сервер авторизации Google.
Приведённый ниже пример URL-адреса запрашивает автономный доступ ( access_type=offline ) к области действия, разрешающей просмотр учётной записи пользователя на YouTube. Он использует инкрементальную авторизацию, чтобы гарантировать, что новый токен доступа охватывает все области действия, к которым пользователь ранее предоставил приложению доступ. URL-адрес также устанавливает значения для обязательных параметров redirect_uri , response_type и client_id , а также для параметра state . URL-адрес содержит переносы строк и пробелы для удобства чтения.
https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
include_granted_scopes=true&
state=state_parameter_passthrough_value&
redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
response_type=token&
client_id=client_idПосле создания URL-адреса запроса перенаправьте пользователя на него.
Пример кода на JavaScript
Следующий фрагмент кода JavaScript показывает, как инициировать процесс авторизации без использования клиентской библиотеки Google API для 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', '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 отображает окно согласия, в котором указывается название вашего приложения и сервисы Google API, к которым запрашивается разрешение на доступ, а также учетные данные пользователя и краткое описание предоставляемых областей доступа. Затем пользователь может дать согласие на предоставление доступа к одной или нескольким областям, запрошенным вашим приложением, или отклонить запрос.
На данном этапе вашему приложению не нужно ничего делать, поскольку оно ожидает ответа от сервера OAuth 2.0 от Google, указывающего, был ли предоставлен доступ. Этот ответ объясняется на следующем шаге.
Ошибки
При обращении к конечной точке авторизации OAuth 2.0 от Google вместо ожидаемых процессов аутентификации и авторизации могут отображаться сообщения об ошибках, предназначенные для пользователя. Распространенные коды ошибок и рекомендуемые способы их устранения:
admin_policy_enforced
Учетная запись Google не может авторизовать одну или несколько запрошенных областей доступа из-за политики администратора Google Workspace. Дополнительную информацию о том, как администратор может ограничить доступ ко всем областям доступа или к конфиденциальным и ограниченным областям доступа до тех пор, пока доступ не будет явно предоставлен вашему идентификатору клиента OAuth, см. в справочной статье «Управление доступом сторонних и внутренних приложений к данным Google Workspace» .
disallowed_useragent
Точка авторизации отображается внутри встроенного пользовательского агента, что запрещено политикой Google OAuth 2.0 .
Разработчики iOS и macOS могут столкнуться с этой ошибкой при открытии запросов авторизации в WKWebView . Вместо этого разработчикам следует использовать библиотеки iOS, такие как Google Sign-In для iOS или AppAuth для iOS от OpenID Foundation.
Веб-разработчики могут столкнуться с этой ошибкой, когда приложение для iOS или macOS открывает обычную веб-ссылку во встроенном пользовательском агенте, и пользователь переходит на конечную точку авторизации Google OAuth 2.0 с вашего сайта. Разработчикам следует разрешить открытие обычных ссылок в обработчике ссылок по умолчанию операционной системы, включая обработчики универсальных ссылок или обработчики ссылок браузера по умолчанию. Библиотека 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 ConsoleClients page.
redirect_uri_mismatch
Передаваемый в запросе авторизации параметр redirect_uri не соответствует разрешенному URI перенаправления для идентификатора клиента OAuth. Проверьте разрешенные URI перенаправления в... Google Cloud ConsoleClients page.
Схема, домен и/или порт JavaScript-кода, инициирующего запрос на авторизацию, могут не совпадать с авторизованным URI источника JavaScript, зарегистрированным для идентификатора клиента OAuth. Проверьте авторизованные источники JavaScript в Google Cloud ConsoleClients page.
Параметр redirect_uri может указывать на устаревший и больше не поддерживаемый поток OAuth out-of-band (OOB). Для обновления интеграции обратитесь к руководству по миграции .
invalid_request
В вашем запросе произошла ошибка. Причиной может быть ряд причин:
- Запрос был оформлен неправильно.
- В запросе отсутствовали необходимые параметры.
- В запросе используется метод авторизации, который Google не поддерживает. Убедитесь, что ваша интеграция OAuth использует рекомендуемый метод интеграции.
Шаг 3: Обработка ответа сервера OAuth 2.0
Конечные точки OAuth 2.0
Сервер 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
Вы можете протестировать этот процесс, перейдя по следующей ссылке, которая запрашивает доступ только для чтения к просмотру метаданных файлов в вашем Google Диске и доступ только для чтения к просмотру событий вашего Календаря Google:
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly& include_granted_scopes=true& state=state_parameter_passthrough_value& redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback& response_type=token& 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. Области действия, предоставленные access_token, представлены в виде списка строк, разделенных пробелами и чувствительных к регистру.
Например, следующий пример ответа в виде токена доступа указывает на то, что пользователь предоставил вашему приложению разрешение на просмотр, редактирование и безвозвратное удаление видео, оценок, комментариев и подписей пользователя на YouTube:
{ "access_token": "1/fFAGRNJru1FTz70BzhT3Zg", "expires_in": 3920, "token_type": "Bearer", "scope": "https://www.googleapis.com/auth/youtube.force-ssl", "refresh_token": "1//xEoDL4iW3cxlI7yDbSRFYNG01kVKM2C-259HOF2aQbI" }
Вызов API Google
Конечные точки OAuth 2.0
После получения токена доступа ваше приложение может использовать его для вызова API Google от имени учетной записи пользователя, если предоставлены необходимые для API права доступа. Для этого включите токен доступа в запрос к API, указав либо параметр запроса access_token , либо значение Bearer в заголовке HTTP Authorization . По возможности предпочтительнее использовать заголовок HTTP, поскольку строки запроса обычно видны в логах сервера. В большинстве случаев вы можете использовать клиентскую библиотеку для настройки вызовов к API Google (например, при вызове API данных YouTube ).
Обратите внимание, что API данных YouTube поддерживает сервисные учетные записи только для владельцев контента YouTube, которые владеют и управляют несколькими каналами YouTube, например, звукозаписывающие компании и киностудии.
Вы можете протестировать все API Google и ознакомиться с их областями действия на платформе OAuth 2.0 Playground .
Примеры HTTP GET-запросов
Вызов конечной точки youtube.channels (API данных YouTube) с использованием HTTP-заголовка Authorization: Bearer может выглядеть следующим образом. Обратите внимание, что вам необходимо указать собственный токен доступа:
GET /youtube/v3/channels?part=snippet&mine=true HTTP/1.1 Host: www.googleapis.com Authorization: Bearer access_token
Вот вызов того же API для аутентифицированного пользователя с использованием параметра строки запроса access_token :
GET https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true
примеры curl
Вы можете протестировать эти команды с помощью приложения командной строки curl . Вот пример, использующий опцию заголовка HTTP (предпочтительный вариант):
curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true
Или, в качестве альтернативы, можно использовать параметр строки запроса:
curl https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true
Пример кода на JavaScript
Приведённый ниже фрагмент кода демонстрирует, как использовать CORS (совместное использование ресурсов между источниками) для отправки запроса к API Google. В этом примере не используется клиентская библиотека Google API для JavaScript. Однако, даже если вы не используете клиентскую библиотеку, руководство по поддержке CORS в документации этой библиотеки, вероятно, поможет вам лучше понять эти запросы.
В этом фрагменте кода переменная access_token представляет токен, полученный для выполнения API-запросов от имени авторизованного пользователя. Полный пример демонстрирует, как сохранить этот токен в локальном хранилище браузера и получить его при выполнении API-запроса.
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/youtube/v3/channels?part=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 без использования клиентской библиотеки Google API для JavaScript. Код предназначен для HTML-страницы, на которой отображается кнопка для попытки отправки запроса к API. Если вы нажмете кнопку, код проверит, сохранила ли страница токен доступа к API в локальном хранилище вашего браузера. Если да, то он выполнит запрос к API. В противном случае он запустит процедуру аутентификации OAuth 2.0.
Для аутентификации по протоколу OAuth 2.0 страница выполняет следующие шаги:
- Это перенаправляет пользователя на сервер Google OAuth 2.0, который запрашивает доступ к области действия
https://www.googleapis.com/auth/youtube.force-ssl. - После предоставления (или отказа) в доступе к одной или нескольким запрошенным областям действия пользователь перенаправляется на исходную страницу, которая анализирует токен доступа из строки идентификатора фрагмента.
- На этой странице проверяется, к каким областям доступа пользователь предоставил приложению.
Если пользователь предоставил доступ к запрошенным параметрам scope(), страница использует токен доступа для выполнения примера запроса к API.
Этот API-запрос вызывает метод
channels.listиз YouTube Data API для получения данных о YouTube-канале авторизованного пользователя.- Если запрос выполняется успешно, ответ API записывается в консоль отладки браузера.
Вы можете отозвать доступ к приложению на странице разрешений вашей учетной записи Google. Приложение отображается под названием, указанным на странице фирменной символики на экране согласия OAuth при создании идентификатора клиента.
Для локального запуска этого кода необходимо установить значения для переменных YOUR_CLIENT_ID и YOUR_REDIRECT_URI , соответствующие вашим учетным данным авторизации . Переменная YOUR_REDIRECT_URI должна быть установлена на тот же URL-адрес, на котором отображается страница. Значение должно точно совпадать с одним из авторизованных URI перенаправления для клиента OAuth 2.0, который вы настроили. Cloud ConsoleClients pageЕсли это значение не соответствует авторизованному 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']) {
var xhr = new XMLHttpRequest();
xhr.open('GET',
'https://www.googleapis.com/youtube/v3/channels?part=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 {
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',
'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 локального хоста (включая URI IP-адресов локального хоста) не подпадают под это правило. |
| Хозяин | В качестве хостов нельзя использовать необработанные IP-адреса. IP-адреса локальных хостов не подпадают под это правило. |
| Домен | “googleusercontent.com” .goo.gl ), если приложение не является владельцем этого домена. |
| Информация о пользователе | В источниках JavaScript подкомпонент userinfo недопустим. |
| Путь | В исходных файлах JavaScript компонент пути недопустим. |
| Запрос | В источниках JavaScript компонент запроса недопустим. |
| Фрагмент | В исходных файлах JavaScript компонент фрагмента недопустим. |
| Персонажи | В исходных файлах JavaScript не допускаются определенные символы, в том числе:
|
Поэтапная авторизация
В протоколе OAuth 2.0 ваше приложение запрашивает авторизацию для доступа к ресурсам, которые идентифицируются с помощью областей действия (scopes). Рекомендуется запрашивать авторизацию для ресурсов только тогда, когда они вам необходимы, чтобы обеспечить удобство использования. Для этого сервер авторизации Google поддерживает инкрементальную авторизацию. Эта функция позволяет запрашивать области действия по мере необходимости, и если пользователь предоставляет разрешение на новую область действия, возвращается код авторизации, который можно обменять на токен, содержащий все области действия, предоставленные пользователем проекту.
Например, предположим, что приложение помогает пользователям находить интересные местные события. Приложение позволяет пользователям просматривать видеоролики об этих событиях, оценивать их и добавлять в плейлисты. Пользователи также могут использовать приложение для добавления событий в свои календари Google.
В этом случае при входе в систему приложению может не потребоваться доступ к каким-либо областям действия (scopes). Однако, если пользователь попытается оценить видео, добавить видео в плейлист или выполнить другое действие на YouTube, приложение может запросить доступ к области действия https://www.googleapis.com/auth/youtube.force-ssl . Аналогично, приложение может запросить доступ к области действия https://www.googleapis.com/auth/calendar если пользователь попытается добавить событие в календарь.
К токену доступа, полученному в результате поэтапной авторизации, применяются следующие правила:
- Токен можно использовать для доступа к ресурсам, соответствующим любой из областей действия, объединенных в новую, комбинированную авторизацию.
- При использовании токена обновления для комбинированной авторизации для получения токена доступа, этот токен доступа представляет собой комбинированную авторизацию и может использоваться для любого из значений
scope, включенных в ответ. - Объединенная авторизация включает все области действия, предоставленные пользователем проекту API, даже если запросы на предоставление были отправлены от разных клиентов. Например, если пользователь предоставил доступ к одной области действия с помощью настольного клиента приложения, а затем предоставил другой доступ к той же области действия через мобильный клиент, объединенная авторизация будет включать обе области действия.
- Если вы отзываете токен, представляющий собой объединенную авторизацию, доступ ко всем областям действия этой авторизации для соответствующего пользователя отзывается одновременно.
Приведенные ниже примеры кода показывают, как добавить области действия (scopes) к существующему токену доступа. Такой подход позволяет вашему приложению избежать необходимости управлять несколькими токенами доступа.
Конечные точки OAuth 2.0
В этом примере вызывающее приложение запрашивает доступ к получению данных YouTube Analytics пользователя в дополнение к любому другому доступу, который пользователь уже предоставил приложению.
Чтобы добавить области действия к существующему токену доступа, включите параметр 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 демонстрирует, как отозвать токен без использования клиентской библиотеки Google API для JavaScript. Поскольку конечная точка Google OAuth 2.0 для отзыва токенов не поддерживает междоменное совместное использование ресурсов (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 Cross-Account Protection. Этот сервис позволяет подписаться на уведомления о событиях безопасности, которые предоставляют вашему приложению информацию о важных изменениях в учетной записи пользователя. Затем вы можете использовать эту информацию для принятия мер в зависимости от того, как вы решите реагировать на события.
Вот несколько примеров типов событий, отправляемых вашему приложению службой защиты от межсетевых атак 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
Дополнительную информацию о том, как реализовать защиту от межсетевых атак, а также полный список доступных событий см. на странице «Защита учетных записей пользователей с помощью межсетевой защиты».