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

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

В кратких руководствах объясняется, как настроить и запустить приложение, которое вызывает API Google Workspace.

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

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

Цели

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

Предпосылки

Python 2.4 или выше для запуска веб-сервера.
Облачный проект Google .

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

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

Для завершения этого краткого руководства настройте свою среду.

Включить API

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

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

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

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

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

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

Настроить образец

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

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

люди/быстрый старт/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, который вы создали в качестве предварительного условия .

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

В вашем рабочем каталоге запустите веб-сервер:
Питон 2.х
```
python -m SimpleHTTPServer 8000
```
Питон 3.х
```
python3 -m http.server 8000
```
В браузере перейдите по адресу http://localhost:8000 .
При первом запуске примера вам будет предложено авторизовать доступ:
1. Если вы еще не вошли в свою учетную запись Google, вам будет предложено выполнить вход. Если вы вошли в несколько учетных записей, выберите одну учетную запись для авторизации.
2. Нажмите Принять .
3. Скопируйте код из браузера, вставьте его в командную строку и нажмите Enter .
Информация об авторизации хранится в файловой системе, поэтому при следующем запуске примера кода авторизация не запрашивается.

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