Алекс Гусев Web-системы · Агентская разработка

Получение OAuth2 access token для Google Cloud API в браузерном JavaScript

Дата публикации: 2023-01-23

В этой статье я описываю опыт получения OAuth2 access token с помощью новой библиотеки gsi/client. Задача состояла в том, чтобы получить токен доступа в web-приложении средствами клиентского JavaScript. В интернете было много материалов о Node.js и устаревшей библиотеке gapi.auth2, но для новой библиотеки подходящего примера не нашлось.

Настройку проекта Google Cloud я здесь не разбираю: она подробно описана в статье Osanda Deshan Nimalarathna. Ниже — только клиентский код, нужный для получения токена.

Сначала подключим скрипт библиотеки в HTML:

<html>
<head>
  <script src="https://accounts.google.com/gsi/client"></script>
</head>
</html>

Библиотека добавляет объект google в глобальную область видимости (self или window). Через него можно запросить access token:

const CLIENT_ID = 'XXX.apps.googleusercontent.com';
const SCOPES = 'https://www.googleapis.com/auth/...';

const google = self.google;
function onTokenResponse({access_token, token_type, expires_in, scope} = {}) {
}

const client = google.accounts.oauth2.initTokenClient({
  client_id: CLIENT_ID,
  scope: SCOPES,
  callback: onTokenResponse,
});

client.requestAccessToken();

Именно этот фрагмент я долго искал. Надеюсь, он сэкономит время тем, кому нужно получить Google access token непосредственно в браузере.