Эта страница переведена с помощью Cloud Translation API.

Краткое руководство по JavaScript

Создайте веб-приложение JavaScript, которое отправляет запросы к API People.

В кратких руководствах объясняется, как настроить и запустить приложение, вызывающее API Google Workspace. В этом кратком руководстве используется упрощённый подход к аутентификации, подходящий для тестовой среды. В рабочей среде рекомендуем изучить вопросы аутентификации и авторизации, прежде чем выбирать подходящие для вашего приложения учётные данные для доступа .

В этом кратком руководстве используются рекомендуемые клиентские библиотеки API Google Workspace для обработки некоторых деталей процесса аутентификации и авторизации.

Цели

Настройте свою среду.
Настройте образец.
Запустите образец.

Предпосылки

Node.js и npm установлены.
Проект Google Cloud .

Домен Google Workspace с включенным доступом через API .
Учетная запись Google в этом домене с правами администратора.

Настройте свою среду

Чтобы завершить этот быстрый старт, настройте свою среду.

Включить API

Перед использованием API Google необходимо включить их в проекте Google Cloud. Вы можете включить один или несколько API в одном проекте Google Cloud.

В консоли Google Cloud включите People API.
Включить API

Настройте экран согласия OAuth

Если вы используете новый проект Google Cloud для выполнения этого краткого руководства, настройте экран согласия OAuth. Если вы уже выполнили этот шаг для своего проекта Cloud, перейдите к следующему разделу.

В консоли Google Cloud перейдите в > > Брендинг .
Перейти к брендингу
Если вы уже настроили , вы можете настроить следующие параметры экрана согласия OAuth в разделах «Брендинг» , «Аудитория» и «Доступ к данным» . Если вы видите сообщение: пока не настроено , нажмите «Начать» :

В разделе «Информация о приложении» в поле «Имя приложения » введите имя приложения.
В поле Адрес электронной почты службы поддержки пользователей выберите адрес электронной почты службы поддержки, по которому пользователи смогут связаться с вами, если у них возникнут вопросы относительно их согласия.
Нажмите «Далее» .
В разделе Аудитория выберите Внутренняя .
Нажмите «Далее» .
В разделе «Контактная информация» введите адрес электронной почты , на который вы можете получать уведомления о любых изменениях в вашем проекте.
Нажмите «Далее» .
В разделе Готово ознакомьтесь с Политикой обработки данных пользователей API служб Google и, если вы согласны, выберите Я согласен с Политикой обработки данных пользователей API служб Google .
Нажмите «Продолжить» .
Нажмите «Создать» .

На данный момент вы можете пропустить добавление областей действия. В будущем при создании приложения для использования за пределами вашей организации Google Workspace необходимо изменить тип пользователя на «Внешний» . Затем добавьте области действия авторизации, необходимые вашему приложению. Подробнее см. в полном руководстве по настройке согласия OAuth .

Авторизация учетных данных для веб-приложения

Для аутентификации конечных пользователей и доступа к их данным в вашем приложении необходимо создать один или несколько идентификаторов клиента OAuth 2.0. Идентификатор клиента используется для идентификации одного приложения на серверах Google OAuth. Если ваше приложение работает на нескольких платформах, необходимо создать отдельный идентификатор клиента для каждой платформы.

В консоли Google Cloud перейдите в > > Клиенты .
Перейти к клиентам
Нажмите «Создать клиента» .
Нажмите Тип приложения > Веб-приложение .
В поле «Имя» введите имя учётной записи. Оно отображается только в консоли Google Cloud.
Добавьте авторизованные URI, связанные с вашим приложением:
- Клиентские приложения (JavaScript) – в разделе «Авторизованные источники JavaScript» нажмите « Добавить URI» . Затем введите URI для использования в запросах браузера. Он определяет домены, с которых ваше приложение может отправлять запросы API на сервер OAuth 2.0.
- Серверные приложения (Java, Python и другие) — в разделе «Авторизованные URI перенаправления» нажмите « Добавить URI» . Затем введите URI конечной точки, на которую сервер OAuth 2.0 может отправлять ответы.
Нажмите «Создать» .
Новые учетные данные появятся в разделе «Идентификаторы клиентов OAuth 2.0» .
Обратите внимание на идентификатор клиента. Секреты клиента не используются в веб-приложениях.

Запишите эти учетные данные, так как они понадобятся вам позже в этом кратком руководстве.

Создать ключ API

В консоли Google Cloud перейдите в > API и службы > Учетные данные .
Перейти к учетным данным
Нажмите Создать учетные данные > Ключ API .
Отобразится ваш новый ключ API.
- Нажмите «Копировать , чтобы скопировать ключ API для использования в коде вашего приложения. Ключ API также можно найти в разделе «Ключи API» учётных данных вашего проекта.
- Нажмите «Ограничить ключ» , чтобы обновить расширенные настройки и ограничить использование вашего ключа API. Подробнее см. в разделе «Применение ограничений для ключа API» .

Настройте образец

В рабочем каталоге создайте файл с именем index.html .

В файл index.html вставьте следующий пример кода:

people/quickstart/index.html

Посмотреть на GitHub

<!DOCTYPE html>
<html>
  <head>
    <title>People API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>People API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
    <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      /* exported gapiLoaded */
      /* exported gisLoaded */
      /* exported handleAuthClick */
      /* exported handleSignoutClick */

      // TODO(developer): Set to client ID and API key from the Developer Console
      const CLIENT_ID = '<YOUR_CLIENT_ID>';
      const API_KEY = '<YOUR_API_KEY>';


      // Discovery doc URL for APIs used by the quickstart
      const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/people/v1/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/contacts.readonly';

      let tokenClient;
      let gapiInited = false;
      let gisInited = false;

      document.getElementById('authorize_button').style.visibility = 'hidden';
      document.getElementById('signout_button').style.visibility = 'hidden';

      /**
       * Callback after api.js is loaded.
       */
      function gapiLoaded() {
        gapi.load('client', initializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function initializeGapiClient() {
        await gapi.client.init({
          apiKey: API_KEY,
          discoveryDocs: [DISCOVERY_DOC],
        });
        gapiInited = true;
        maybeEnableButtons();
      }

      /**
       * Callback after Google Identity Services are loaded.
       */
      function gisLoaded() {
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: CLIENT_ID,
          scope: SCOPES,
          callback: '', // defined later
        });
        gisInited = true;
        maybeEnableButtons();
      }

      /**
       * Enables user interaction after all libraries are loaded.
       */
      function maybeEnableButtons() {
        if (gapiInited && gisInited) {
          document.getElementById('authorize_button').style.visibility = 'visible';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick() {
        tokenClient.callback = async (resp) => {
          if (resp.error !== undefined) {
            throw (resp);
          }
          document.getElementById('signout_button').style.visibility = 'visible';
          document.getElementById('authorize_button').innerText = 'Refresh';
          await listConnectionNames();
        };

        if (gapi.client.getToken() === null) {
          // Prompt the user to select a Google Account and ask for consent to share their data
          // when establishing a new session.
          tokenClient.requestAccessToken({prompt: 'consent'});
        } else {
          // Skip display of account chooser and consent dialog for an existing session.
          tokenClient.requestAccessToken({prompt: ''});
        }
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick() {
        const token = gapi.client.getToken();
        if (token !== null) {
          google.accounts.oauth2.revoke(token.access_token);
          gapi.client.setToken('');
          document.getElementById('content').innerText = '';
          document.getElementById('authorize_button').innerText = 'Authorize';
          document.getElementById('signout_button').style.visibility = 'hidden';
        }
      }

      /**
       * Print the display name if available for 10 connections.
       */
      async function listConnectionNames() {
        let response;
        try {
          // Fetch first 10 files
          response = await gapi.client.people.people.connections.list({
            'resourceName': 'people/me',
            'pageSize': 10,
            'personFields': 'names,emailAddresses',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const connections = response.result.connections;
        if (!connections || connections.length == 0) {
          document.getElementById('content').innerText = 'No connections found.';
          return;
        }
        // Flatten to string to display
        const output = connections.reduce(
            (str, person) => {
              if (!person.names || person.names.length === 0) {
                return `${str}Missing display name\n`;
              }
              return `${str}${person.names[0].displayName}\n`;
            },
            'Connections:\n');
        document.getElementById('content').innerText = output;
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
  </body>
</html>

Заменить следующее:

YOUR_CLIENT_ID : идентификатор клиента, который вы создали при авторизации учетных данных для веб-приложения .
YOUR_API_KEY : ключ API, который вы создали в качестве предварительного условия .

Запустите образец

В вашем рабочем каталоге установите пакет http-server :
```
npm install http-server
```
В вашем рабочем каталоге запустите веб-сервер:
```
npx http-server -p 8000
```

В браузере перейдите по адресу http://localhost:8000 .
Вы увидите запрос на авторизацию доступа:
1. Если вы ещё не вошли в свою учётную запись Google, сделайте это при появлении соответствующего запроса. Если вы вошли в несколько учётных записей, выберите одну из них для авторизации.
2. Нажмите «Принять» .

Ваше приложение JavaScript запускается и вызывает API People.

Краткое руководство по JavaScript Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.