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

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

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

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

Цели

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

Предварительные условия

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

• Аккаунт Google

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

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

Включить API

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

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

  Включить API

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

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

1. В консоли Google Cloud выберите > API и службы > Экран согласия OAuth .

   Перейдите на экран согласия OAuth.

2. В качестве типа пользователя выберите «Внутренний» , затем нажмите « Создать» .
3. Заполните форму регистрации приложения, затем нажмите «Сохранить и продолжить» .

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

5. Просмотрите сводку регистрации приложения. Чтобы внести изменения, нажмите «Изменить» . Если регистрация приложения выглядит нормально, нажмите «Вернуться на панель управления» .

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

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

1. В консоли Google Cloud выберите > API и службы > Учетные данные .

   Перейти к учетным данным

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

   Обратите внимание на идентификатор клиента. Секреты клиента не используются для веб-приложений.

7. Нажмите ОК . Вновь созданные учетные данные появятся в разделе «Идентификаторы клиентов OAuth 2.0» .

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

Создайте ключ API

1. В консоли Google Cloud выберите > API и службы > Учетные данные .

   Перейти к учетным данным

2. Нажмите Создать учетные данные > Ключ API .
3. Отобразится ваш новый ключ API.
   • Нажмите «Копировать , чтобы скопировать ключ API для использования в коде вашего приложения. Ключ API также можно найти в разделе «Ключи API» учетных данных вашего проекта.
   • Нажмите «Ограничить ключ» , чтобы обновить дополнительные настройки и ограничить использование вашего ключа API. Дополнительные сведения см. в разделе «Применение ограничений ключей API» .

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

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

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

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

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

1. В свой рабочий каталог установите пакет http-сервера :

   npm install http-server
   

2. В рабочем каталоге запустите веб-сервер:

   npx http-server -p 8000
   

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

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

Следующие шаги

• Устранение проблем с аутентификацией и авторизацией
• Справочная документация по API слайдов
• раздел google-api-javascript-client на GitHub