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

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

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

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

Цели

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

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

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

• Аккаунт Google

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

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

Включить API

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

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

  Включить API

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

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

1. В консоли Google Cloud перейдите в menu >Google Auth platform > Брендинг .

   Перейти к разделу «Брендинг»

2. Если вы уже настроили Google Auth platformВы можете настроить следующие параметры экрана согласия OAuth в разделах «Брендинг» , «Аудитория» и «Доступ к данным» . Если вы видите сообщение, в котором говорится... Google Auth platform Если конфигурация еще не выполнена , нажмите «Начать» :
1. В разделе «Информация о приложении» , в поле «Название приложения» , введите название для приложения.
2. В разделе «Электронная почта службы поддержки пользователей» выберите адрес электронной почты, по которому пользователи смогут связаться с вами, если у них возникнут вопросы относительно их согласия.
3. Нажмите «Далее» .
4. В разделе «Аудитория» выберите «Внутренняя» .
5. Нажмите «Далее» .
6. В поле «Контактная информация» укажите адрес электронной почты , на который вы сможете получать уведомления об изменениях в вашем проекте.
7. Нажмите «Далее» .
8. В разделе «Завершить» ознакомьтесь с Политикой использования пользовательских данных сервисов Google API и, если вы согласны, выберите «Я согласен с Политикой использования пользовательских данных сервисов Google API» .
9. Нажмите «Продолжить» .
10. Нажмите «Создать» .
3. На данный момент добавление областей действия можно пропустить. В будущем, при создании приложения для использования за пределами вашей организации Google Workspace, необходимо изменить тип пользователя на «Внешний» . Затем добавьте необходимые для вашего приложения области авторизации. Для получения дополнительной информации см. полное руководство по настройке согласия OAuth .

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

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

1. В консоли Google Cloud перейдите в menu >Google Auth platform > Клиенты .

   Перейти к клиентам

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

   Вновь созданные учетные данные отображаются в разделе «Идентификаторы клиентов OAuth 2.0» .

   Обратите внимание на идентификатор клиента (Client ID). Секретные ключи клиента не используются в веб-приложениях.

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

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

1. В консоли Google Cloud перейдите в menu > API и сервисы > Учетные данные .

   Перейдите в раздел «Учетные данные».

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

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

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

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

   docs/quickstart/index.html

   Посмотреть на GitHub
   <!DOCTYPE html>
   <html>
     <head>
       <title>Google Docs API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Google Docs 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://docs.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/documents.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 printDocTitle();
           };
   
           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 title of a sample doc:
          * https://docs.google.com/document/d/195j9eDD3ccgjQRttHhJPymLJUCOUjs-jmwTrekvdjFE/edit
          */
         async function printDocTitle() {
           try {
             const response = await gapi.client.docs.documents.get({
               documentId: '195j9eDD3ccgjQRttHhJPymLJUCOUjs-jmwTrekvdjFE',
             });
             const doc = response.result;
             const output = `Document ${doc.title} successfully found.\n`;
             document.getElementById('content').innerText = output;
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
         }
       </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-server :

   npm install http-server
   

2. В рабочей директории запустите веб-сервер:

   npx http-server -p 8000
   

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

Ваше JavaScript-приложение запускается и обращается к API Google Docs.

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

• Попробуйте API Google Workspace в обозревателе API.
  • Устранение неполадок аутентификации и авторизации
  • Документация по API
  • Раздел google-api-javascript-client на GitHub