Как использовать клиент Google API для JavaScript с входным потоком одним касанием?

Question

Я использую вход Google One-Tap для аутентификации пользователей, и после аутентификации пользователя я получаю токен доступа. Я знаю, что могу использовать этот токен доступа для работы с клиентом Google API для JavaScript ("GAPI"). Но я не могу найти способ работать с GAPI, используя этот токен доступа.

Есть ли способ использовать GAPI, если я уже вошел в систему?

Я пытаюсь получить доступ к календарю пользователя после простой аутентификации с помощью аутентификации одним касанием и однократного согласия на календарь.

Answer 1

Прежде всего:
Невозможно "аутентифицировать" клиента API Google JS с ответом, который возвращается при входе в систему одним нажатием.

К счастью, нам не нужно проходить аутентификацию с помощью JS-клиента gapi, потому что мы используем удобную функцию под названием gapi.auth2.authorize!

Как авторизовать гени-клиент

Важно сначала прочитать документы и понять их предупреждение:

Не используйте этот метод вместе с рекомендуемым потоком gapi.auth2.init и signIn. Это два разных поведения (Авторизация для gapi.auth2.authorize против Аутентификации для gapi.auth2.init / signIn), которые могут иметь непредвиденные проблемы при использовании в одном приложении.

Теперь вопрос в том, как полностью избежать метода init / signIn.

Шаг 1
Войдите в систему Google одним нажатием.

Шаг 2
Загрузите гени-клиент: window.gapi.load('client')

Шаг 3
Пройти credential.id (адрес электронной почты), возвращенный Google One-Tap как login_hint параметр в вызове для авторизации. Это предварительно выберет учетную запись, и мы можем попытаться не показывать новое всплывающее окно (приглашение).

Пример:

gapi.auth2.authorize({
  client_id,
  prompt: 'none',
  response_type: 'permission', // Access Token.
  scope: 'CALENDAR_SCOPE',
  login_hint: credential.id
}, function(result) {})

Используя prompt: 'none', вы можете попытаться получить токен без какого-либо пользовательского интерфейса. Это полезно, чтобы проверить, нужно ли показывать кнопку "Авторизовать", а также полезно перед любым вызовом API Календаря, чтобы получить новый токен.

Шаг 4
Прежде чем мы сможем позвонить gapi.client.calendar нам нужно инициализировать client только с календарем discoveryDocs,

gapi.client.init({discoveryDocs})

Это самая сложная часть и нигде не документирована должным образом! Единственное, что мы можем извлечь из api.client.init() документация следующая строка:

Если указан идентификатор клиента OAuth и область действия, эта функция загрузит модуль gapi.auth2 для выполнения OAuth.

Это в основном означает: как только вы дадите clientID или же scopegapi.client.init попробую запустить традиционный метод аутентификации.
В нашем случае: нам не нужно передавать clientID или же scope как мы уже сделали это в шаге 3.

Так как же клиент узнает, какой модуль инициализировать? → Только передавая discoveryDocs модуля, который вы хотите использовать! В этом случае календарь discoveryDocs.

Шаг 5
Теперь все готово! Вы можете делать запросы с помощью, например, gapi.client.calendar.events.list()

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

Полный пример кода можно найти здесь ниже:

let config =  {
  response_type: 'permission',
  scope: 'CALENDAR_SCOPE',
  client_id: clientId,
  login_hint: credential.id,
  promt: 'none',
};
gapi.auth2.authorize(config, function(response) {
  // No need to `setToken`, it's done for you by auth2.
  let calConfig = {discoveryDocs} // only of google calendar
  window.gapi.client.init(calConfig).then(function() {
    // then execute a calendar call:
    window.gapi.client.calendar.events.list({'calendarId': 'primary'});
  });
})