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

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

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

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

Цели

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

Предпосылки

  • Аккаунт Google

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

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

Включить API

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

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

Чтобы пройти аутентификацию в качестве конечного пользователя и получить доступ к данным пользователя в вашем приложении, вам необходимо создать один или несколько идентификаторов клиента OAuth 2.0. Идентификатор клиента используется для идентификации одного приложения на серверах OAuth Google. Если ваше приложение работает на нескольких платформах, вы должны создать отдельный идентификатор клиента для каждой платформы.
  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 .
  8. Необязательно: если вы создаете учетные данные в качестве обязательного условия для быстрого запуска JavaScript, вы также должны создать ключ API .

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

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

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

    документы/быстрый старт/index.html
    <!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>

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

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

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

    Питон 2.х

    python -m SimpleHTTPServer 8000
    

    Питон 3.х

    python3 -m http.server 8000
    
  2. В браузере перейдите по http://localhost:8000 .

  3. При первом запуске примера вам будет предложено авторизовать доступ:

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

    Информация об авторизации хранится в файловой системе, поэтому при следующем запуске примера кода авторизация не запрашивается.

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

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