Источник: Nuances of Programming
💡Мотивация
Задача: нужно получить доступ или отобразить события частного google-календаря.
Проблема: нельзя поместить частный календарь внутрь iframe или запросить события, используя ключ API.
Необходимые условия: совместимость с Angular, поддержка TypeScript (сервисные врапперы, классы и типы моделей данных)
Решение: google-api-nodejs-client, предоставляющий все, что нужно.
Google официально поддерживает клиентскую библиотеку для доступа к Google API; также включена поддержка авторизации и аутентификации с помощью OAuth 2.0, API-ключей и JWT .
Теперь разбираемся, как заменить часть Node.js на Angular.
🛠️Интеграция
К сожалению, эта библиотека предназначена для NodeJS, и проблематично интегрировать ее внутрь приложений, созданных в Webpack, в том числе и Angular, поскольку она зависит от некоторых вещей в NodeJS, не существующих в браузере.
Но это не остановит нас, поскольку есть обходной путь (обсуждение на английском языке здесь).
Во-первых, нужно установить расширения для Webpack.
npm i -D @angular-builders/custom-webpack
Затем нужно заменить builder angular.json в architect; в настройки также включаем путь к пользовательской конфигурации Webpack:
Объяснение можно найти в документации по сборке Angular.
🔨Хак
Так в чем, собственно, хак? Мы притворимся, что все нужное этой библиотеке NodeJS есть в браузере.
- Имитируем некоторые внутренние среды выполнения, такие как global и Buffer.
- Имитируем несколько библиотек, которые требуются при выполнении fs, child_process и https-proxy-agent.
Предоставление замены для global и Buffer
Добавьте следующий полифилл под импортом приложения в файл src/polyfills.ts.
Не забудьте установить эти пакеты с npm i -D process buffer .
Поместите это в <head> index.html, чтобы избавиться от ошибок, связанных с доступом к global, поскольку его заменит window.
Имитирование библиотек
Что же здесь происходит? Мы говорим WebPack заменить один файл импорта другим. Все заглушки мы кладем сюда src/mock, чтобы нашим коллегам по проекту было проще понять, что это за файлы.
Код внутри этих заглушек довольно прост. Нужно добавить несколько методов, не обязательных к использованию, чтобы они могли “ничего” не делать.
И fs и child_process будут выглядеть так:
module.exports = {
readFileSync() {},
readFile() {},
};
С помощью https-proxy-agent можно записать еще проще, как:module.exports = {};.
🔑Настройка доступа
- Создаем новый GCP проект или используем существующий.
- Настраиваем экран разрешений OAuth (имя, ограничения…) — он задает все нужные права доступа к API (календарь и аналитика).
- Создаем учётные данные клиента OAuth —они нужны при доступе к личным данным (таким как события в календаре или аналитика).
- Переходим к аутентификации и используем публичный и приватный ключи.
🔓Аутентификация
Большинство публичных данных из API легко получить при помощи API-ключа. Но если вам нужны приватные данные (приватный календарь, например), нужно проходить аутентификацию. Это можно сделать с помощью клиента OAuth.
В перечне провайдеров app.module.ts укажите OAuth2Client. Это должно выглядеть так:
Мы будем использовать перенаправленную аутентификацию, поэтому следующим шагом станет генерация аутентификационного URL.
Благодаря refresh_token у OAuthClient будет возможность обрабатывать обмен токена даже после истечения его срока действия, поэтому нам не нужно будет проходить окно аутентификации google каждый час после истечения срока действия токена.
️⌨️Пример использования
Если вы любите изучать документацию, посетите страницу google-apis docs или посмотрите на Calendar, его мы используем в примере ниже.
📅Использование службы календаря SDK
Права доступа
Убедитесь, что используемый вами аккаунт имеет доступ к календарю, события которого вы хотите прочесть.
Пример кода
Укажите для класса Calendar метод аутентификации по умолчанию, в нашем случае это OAuth. Добавьте к перечню провайдеров app.module.ts следующее:
Теперь у нас есть доступ к полному набору функций API календаря Google с полностью типизированным интерфейсом SDK.
Вы можете получить календарь как любой другой сервис Angular, использовать его как параметр конструктора. Его вам предоставит внедрение зависимости.
constructor(
private calendar: calendar_v3.Calendar,
) {}
Вот пример, как получить список событий определенного календаря. Мы также отфильтруем только события, помеченные значком “сегодня”, не удаленные и не отмененные.
Вы также можете выполнять другие задачи, такие как создание событий, но не забывайте запрашивать подходящую область действия при аутентификации.
📊Использование SDK аналитики
Установка прав доступа
⮕ Analytics Console ⮕ Admin ⮕ Account column ⮕ User Management ⮕
⮕ Select the user ⮕ Activate the "Read & Analyze" checkbox
Получение View ID
⮕ Analytics Console ⮕ Admin ⮕ View column ⮕ View Settings ⮕
⮕ Copy the "View ID" number
Пример кода
Как и в предыдущем примере, нам нужен провайдер. Укажите для класса аналитики метод аутентификации по умолчанию. Добавьте к перечню провайдеров app.module.ts следующее:
📋Заключение
Иметь готовый полностью типизированный SDK для API — это совершенно другое дело в сравнении с необходимостью искать информацию в документации, особенно, модели данных. Аутентификационная часть проблемы тоже решена довольно удобно, поэтому не остановит людей, которые не знают или не хотят разбираться, как это работает. В целом гораздо проще создавать функции, когда среда проекта и инструменты настроены правильно.
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Vojtech Mašek: Integrating Google APIs with Angular