Введение.

Вы можете использовать в своих клиенских веб приложениях такие Google сервисы как People, Calendar, Drive, GMail и т.д. Для этого нужно использовать JavaScript клиенскую библиотеку, чтобы взаимодействовать с Google APIs. Оригинал статьи можно посмотреть здесь.

Ресурсы

Google аккаунт: Войти; Зарегистрироваться
Google для разработчика: Консоль разработчика; Google APIs и сервисы; Учетные данные для вашего проекта; API Discovery Document(s); Регистрация через Google для Вебсайтов; Google API Клиентская Библиотека для JavaScript

Настройка доступа

Получить Google Account

Вначале, войдите под своим Google Account войти, если вы еще не имеете Google Account, то зарегистрируйтесь.

Создать Google проект

Перейти к Google API Консоли. Нажмите Создать проект введите имя проекта, и нажмите Создать. Если у вас уже есть проекты, то выберете существующий проект.

Проект нужен чтобы управлять различными параметрами работы с сервисами Google.

Управлять доступом к ресурсам;
Предоставить доступ другим участникам к работе с проектом;
Назначать роли и права доступа пользователям;
Назначать квоты на использование сервисами;
Создавать и удалять криптографические ключи;
Создавать учетные данные: Ключи API и Идентификаторы клиентов OAuth 2.0;
Подключать Google APIs, с которыми вы планируете работать.

Подключить Google APIs

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

Информацию о существующих Google APIs и сервисах можно посмотреть в APIs Explorer.

Получить ключи доступа к Google APIs из вашего приложения

Google определяет два уровня API доступа:

Уровень	Описание	Требования
Простой	API вызовы, которые не требуют доступа к приватным данным пользователя	API key
Авторизированный	API вызовы, которые могут читать и писать приватные данные пользователя	OAuth 2.0 credentials

Чтобы получить API key для простого доступа, сделайте следующее:

Откройте Страницу учетных данных в API Консоли.
Нажмите Создать учетные данные > API key и выберете соответствующий тип ключа.

Чтобы обеспечить защиту вашим API keys, следуйте рекомендациям лучшая практика использования API keys.

Чтобы получить OAuth 2.0 учетные данные для авторизованного доступа, сделайте следующее:

Откройте Страницу учетных данных в API Консоли.
Нажмите Создать учетные данные > OAuth client ID и выберете соответствующий тип.

Чтобы указать с каких URLs для OAuth 2.0 учетных данных можно делать обращения к Google APIs, сделайте следующее:

Откройте Страницу учетных данных в API Консоли.
Выберете соответсвующий OAuth client ID в учетных данных.
В разделе ограничения задайте источники JavaScript и/или URI перенапраления.
Важно правильно указать источники (URLs). Если вы работаете локально на вашем компьютере например по адресу http://localhost:3000, то нужно указать два адреса: один внешний адрес, с которым вы выходите в интернет пр. http://my-host.com и внутренний пр. http://localhost:3000

Как сделать запросы к Google API?

Для создания запросов к Google API существуют несколько путей чтобы использовать JavaScript клиенскую библиотеку, но все они сводятся к основным базовым понятиям:

Пользовательское приложение должно загрузить JavaScript клиенскую библиотеку. <script src="https://apis.google.com/js/api.js"></script>
Пользовательское приложение должно инициализировать эту библиотеку с помощью API ключа, OAuth client ID и API Discovery Document(s).
Пользовательское приложение посылает запросы к Google API и соответствующим образом обрабатывает ответы.

В следующих разделах показано 3 варианта использования JavaScript клиентской библиотеки.

Вариант 1: Загружаем API Discovery Document(s), затем выполняем запрос.

Следующий пример см. пр.1 предполагает, что пользователь уже авторизирован. Полный пример с авторизацией пользователя можно посмотреть здесь.

пр.1

function start() { // 2. Initialize the JavaScript client library. gapi.client.init({ 'apiKey': 'YOUR_API_KEY', // Your API key will be automatically added to the Discovery Document URLs. 'discoveryDocs': ['https://people.googleapis.com/$discovery/rest'], // clientId and scope are optional if auth is not required. 'clientId': 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com', 'scope': 'profile', }).then(function() { // 3. Initialize and make the API request. return gapi.client.people.people.get({ 'resourceName': 'people/me', 'requestMask.includeField': 'person.names' }); }).then(function(response) { console.log(response.result); }, function(reason) { console.log('Error: ' + reason.result.error.message); }); }; // 1. Load the JavaScript client library. gapi.load('client', start);

Вариант 2: Использование gapi.client.request.

Более общий способ создания запросов - использовать gapi.client.request. Ваше приложение не загружает Discovery Document как было показано в предыдущем варианте, но оно все еще должно установить API key (и авторизацию для некоторых APIs). Вам необходимо будет вручную заполнить REST параметры. При этом будет создаваться один сетевой запрос, что уменьшит размер приложения см. пр.2.

пр.2

function start() { // 2. Initialize the JavaScript client library. gapi.client.init({ 'apiKey': 'YOUR_API_KEY', // clientId and scope are optional if auth is not required. 'clientId': 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com', 'scope': 'profile', }).then(function() { // 3. Initialize and make the API request. return gapi.client.request({ 'path': 'https://people.googleapis.com/v1/people/me?requestMask.includeField=person.names', }) }).then(function(response) { console.log(response.result); }, function(reason) { console.log('Error: ' + reason.result.error.message); }); }; // 1. Load the JavaScript client library. gapi.load('client', start);

Вариант 3: Использование CORS.

Google APIs поддерживает CORS. Если вашему приложению необходимо выгружать/загружать медиа файлы, оно должно использовать CORS. Подробности можно посмотреть здесь...

Поддерживаемые среды

С JavaScript клиенской библиотекой можно работать со всеми броузерами, которые поддерживают Google Apps. Список броузеров можно посмотреть здесь.