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

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

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

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

Цели

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

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

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

• A Google account with Google Drive enabled.

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

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

Включить API

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

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

  Включить API

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

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

1. В консоли Google API перейдите в menu > Платформа аутентификации Google > Брендинг .

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

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

Authorize credentials for a web application

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

1. В консоли Google Cloud перейдите в menu > Платформа аутентификации Google > Клиенты .

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

2. Нажмите «Создать клиента» .
3. Click Application type > Web application .
4. В поле «Имя» введите имя для учетных данных. Это имя отображается только в консоли Google Cloud.
5. Add authorized URIs related to your app:
   • Client-side apps (JavaScript) –Under Authorized JavaScript origins , click Add URI . Then, enter a URI to use for browser requests. This identifies the domains from which your application can send API requests to the OAuth 2.0 server.
   • Для серверных приложений (Java, Python и другие) — в разделе «Авторизованные URI перенаправления» нажмите «Добавить URI» . Затем введите URI конечной точки, на которую сервер OAuth 2.0 сможет отправлять ответы.
6. Нажмите «Создать» .

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

   Обратите внимание, что секретные ключи клиента не используются в веб-приложениях.

7. Сохраните идентификатор клиента для дальнейшего использования в этом кратком руководстве.

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

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

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

   drive/quickstart/index.html

   Посмотреть на GitHub
   <!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 from the Developer Console
         const CLIENT_ID = '<YOUR_CLIENT_ID>';
   
         // 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({
             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>

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

   • YOUR_CLIENT_ID : идентификатор клиента, который вы создали при авторизации учетных данных для веб-приложения .

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

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

   npm install http-server
   

2. In your working directory, start a web server:

   npx http-server -p 8000
   

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

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

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

• Попробуйте API Google Workspace в обозревателе API.
  • Устранение неполадок аутентификации и авторизации
  • Drive API reference documentation
  • google-api-javascript-client section of GitHub