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

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

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

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

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

Цели

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

Предпосылки

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

Аккаунт Google

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

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

Включить API

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

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

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

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

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

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

На данный момент вы можете пропустить добавление областей действия. В будущем, когда вы создадите приложение для использования за пределами вашей организации Google Workspace, вы должны будете изменить тип пользователя на External . Затем добавьте области действия авторизации, которые требуются вашему приложению. Чтобы узнать больше, см. полное руководство по настройке согласия 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» .
Обратите внимание на Client ID. Секреты клиента не используются для веб-приложений.

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

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

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

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

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

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

слайды/быстрый старт/index.html

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

<!DOCTYPE html>
<html>
  <head>
    <title>Slides API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Slides 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://slides.googleapis.com/$discovery/rest?version=v1';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/presentations.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 listSlides();
        };

        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';
        }
      }

      /**
       * Prints the number of slides and elements in a sample presentation:
       * https://docs.google.com/presentation/d/1EAYk18WDjIG-zp_0vLm3CsfQh_i8eXc67Jo2O9C6Vuc/edit
       */
      async function listSlides() {
        let response;
        try {
          response = await gapi.client.slides.presentations.get({
            presentationId: '1EAYk18WDjIG-zp_0vLm3CsfQh_i8eXc67Jo2O9C6Vuc',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const presentation = response.result;
        if (!presentation || !presentation.slides || presentation.slides.length == 0) {
          document.getElementById('content').innerText = 'No slides found.';
          return;
        }
        // Flatten to string to display
        const output = presentation.slides.reduce(
            (str, slide, index) => {
              const numElements = slide.pageElements.length;
              return `${str}- Slide #${index} contains ${numElements} elements\n`;
            },
            'Slides:\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 Google Slides.

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