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

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

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

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

Цели

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

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

  • Аккаунт Google с включенным Google Диском.

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

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

Включить API

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

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

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

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

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

  5. Если в качестве типа пользователя вы выбрали Внешний , добавьте тестовых пользователей:
    1. В разделе «Тестовые пользователи» нажмите «Добавить пользователей» .
    2. Введите свой адрес электронной почты и адрес других авторизованных тестовых пользователей, затем нажмите «Сохранить и продолжить» .
  6. Просмотрите сводку регистрации приложения. Чтобы внести изменения, нажмите «Изменить» . Если регистрация приложения выглядит нормально, нажмите «Вернуться на панель управления» .

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

Чтобы аутентифицировать конечных пользователей и получить доступ к пользовательским данным в вашем приложении, вам необходимо создать один или несколько идентификаторов клиентов 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
    <!DOCTYPE html>
    <html>
      <head>
        <title>Drive API Quickstart</title>
        <meta charset="utf-8" />
      </head>
      <body>
        <p>Drive 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/drive/v3/rest';
    
          // Authorization scopes required by the API; multiple scopes can be
          // included, separated by spaces.
          const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.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 listFiles();
            };
    
            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 metadata for first 10 files.
           */
          async function listFiles() {
            let response;
            try {
              response = await gapi.client.drive.files.list({
                'pageSize': 10,
                'fields': 'files(id, name)',
              });
            } catch (err) {
              document.getElementById('content').innerText = err.message;
              return;
            }
            const files = response.result.files;
            if (!files || files.length == 0) {
              document.getElementById('content').innerText = 'No files found.';
              return;
            }
            // Flatten to string to display
            const output = files.reduce(
                (str, file) => `${str}${file.name} (${file.id})\n`,
                'Files:\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>

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

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

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

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

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

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

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