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

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

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

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

Цели

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

Предпосылки

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

• Аккаунт Google

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

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

Включить API

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

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

  Включить API

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

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

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

   Перейти к брендингу

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

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

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

1. В консоли Google Cloud перейдите в >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» .

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

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

Создать ключ API

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

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

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

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

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

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

   диск/активность-v2/index.html

   Посмотреть на GitHub
   <!DOCTYPE html>
   <html>
     <head>
       <title>Drive Activity API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Drive Activity 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/driveactivity/v2/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/drive.activity.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 listActivities();
           };
   
           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 recent activity.
          */
         async function listActivities() {
           let response;
           try {
             response = await gapi.client.driveactivity.activity.query({
               'pageSize': 10,
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const activities = response.result.activities;
           if (!activities || activities.length == 0) {
             document.getElementById('content').innerText = 'No activities found.';
             return;
           }
           // Flatten to string to display
           const output = activities.reduce(
               (str, activity) => {
                 const time = getTimeInfo(activity);
                 const action = getActionInfo(activity['primaryActionDetail']);
                 const actors = activity.actors.map(getActorInfo);
                 const targets = activity.targets.map(getTargetInfo);
                 return `${str}${time}: ${truncated(actors)}, ${action}, ${truncated(targets)}\n`;
               },
               'Activities:\n');
           document.getElementById('content').innerText = output;
         }
   
         // Utility methods for formatting activity records
   
         /**
          * Returns a string representation of the first N elements in a list.
          * @param {string[]} array - Values to join
          * @param {number} limit - # of elements to show
          * @return {string} formatted string
          */
         function truncated(array, limit = 2) {
           const contents = array.slice(0, limit).join(', ');
           const more = array.length > limit ? ', ...' : '';
           return `[${contents}${more}]`;
         }
   
         /**
          * Returns the first found property name in an object.
          * @param {object} object - Object to search
          * @return {string} key name or 'unknown'
          */
         function getOneOf(object) {
           const props = Object.getOwnPropertyNames(object);
           if (props.length === 0) {
             return 'unknown';
           }
           return props[0];
         }
   
         /**
          * Returns a time associated with an activity.
          * @param {object} activity - Activity record
          * @return {string} Formatted timestamp
          */
         function getTimeInfo(activity) {
           if ('timestamp' in activity) {
             return activity.timestamp;
           }
           if ('timeRange' in activity) {
             return activity.timeRange.endTime;
           }
           return 'unknown';
         }
   
         /**
          * Returns the type of action.
          * @param {object} actionDetail
          * @return {string} Action type as string
          */
         function getActionInfo(actionDetail) {
           return getOneOf(actionDetail);
         }
   
         /**
          * Returns user information, or the type of user if not a known user.
          * @param {object} user - User record
          * @return {string} user type as string
          */
         function getUserInfo(user) {
           if ('knownUser' in user) {
             const knownUser = user['knownUser'];
             const isMe = knownUser['isCurrentUser'] || false;
             return isMe ? 'people/me' : knownUser['personName'];
           }
           return getOneOf(user);
         }
   
         /**
          * Returns actor information, or the type of actor if not a user.
          * @param {object} actor - Actor record
          * @return {string} actor type as string
          */
         function getActorInfo(actor) {
           if ('user' in actor) {
             return getUserInfo(actor['user']);
           }
           return getOneOf(actor);
         }
   
         /**
          * Returns the type of a target and an associated title.
          * @param {object} target - Activity target record
          * @return {string} target type as string
          */
         function getTargetInfo(target) {
           if ('driveItem' in target) {
             const title = target.driveItem.title || 'unknown';
             return `driveItem:"${title}"`;
           }
           if ('drive' in target) {
             const title = target.drive.title || 'unknown';
             return `drive:"${title}"`;
           }
           if ('fileComment' in target) {
             const parent = target.fileComment.parent || {};
             const title = parent.title || 'unknown';
             return `fileComment:"${title}"`;
           }
           return `${getOneOf(target)}:unknown`;
         }
       </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 Drive.

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

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