Эта страница переведена с помощью Cloud Translation API.

Обзор веб-приложений

Диалоговое окно выбора Google.

Google Picker API — это API JavaScript, который вы можете использовать в своих веб-приложениях, чтобы позволить пользователям выбирать и загружать файлы на Google Диск. Пользователи могут предоставить вашим приложениям разрешение на доступ к своим данным на Диске, обеспечивая безопасный и авторизованный способ взаимодействия с файлами.

Google Picker действует как диалоговое окно «Открыть файл» для информации, хранящейся на Диске, и имеет несколько функций:

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

Обратите внимание, что Google Picker не позволяет пользователям упорядочивать, перемещать или копировать файлы из одной папки в другую. Для управления файлами необходимо использовать API Google Drive или интерфейс Drive UI.

Предпосылки

Приложения, использующие Google Picker, должны соответствовать всем действующим Условиям обслуживания . Самое главное, вы должны правильно идентифицировать себя в своих запросах.

У вас также должен быть проект Google Cloud .

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

Чтобы начать использовать API Google Picker, необходимо настроить свою среду.

Включить API

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

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

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

Ключ API — это длинная строка, содержащая заглавные и строчные буквы, цифры, символы подчеркивания и дефисы, например, AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe . Этот метод аутентификации используется для анонимного доступа к публично доступным данным, таким как файлы Google Workspace, к которым предоставлен общий доступ с помощью параметра «Любой пользователь Интернета, у которого есть эта ссылка». Подробнее см. в разделе «Управление ключами API» .

Чтобы создать ключ API:

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

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

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

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

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

Нажмите «Создать клиента» .

Нажмите Тип приложения > Веб-приложение .

В поле «Имя» введите имя учётной записи. Оно отображается только в консоли Google Cloud.

Добавьте авторизованные URI, связанные с вашим приложением:

Клиентские приложения (JavaScript) – в разделе «Авторизованные источники JavaScript» нажмите « Добавить URI» . Затем введите URI для использования в запросах браузера. Он определяет домены, с которых ваше приложение может отправлять запросы API на сервер OAuth 2.0.
Серверные приложения (Java, Python и другие) — в разделе «Авторизованные URI перенаправления» нажмите « Добавить URI» . Затем введите URI конечной точки, на которую сервер OAuth 2.0 может отправлять ответы.

Нажмите «Создать» .

Новые учетные данные появятся в разделе «Идентификаторы клиентов OAuth 2.0» .

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

Важно: ваше приложение должно отправлять токен доступа OAuth 2.0 с представлениями, которые обращаются к личным данным пользователя при создании объекта Picker . Чтобы запросить токен доступа, см. раздел Использование OAuth 2.0 для доступа к API Google .

Управление Google Picker

В оставшейся части этого руководства рассматривается загрузка и отображение Google Picker из веб-приложения, а также реализация обратного вызова. Полный пример см. в разделе «Пример кода для веб-приложений» .

Загрузить библиотеку Google Picker

Чтобы загрузить библиотеку Google Picker, вызовите gapi.load , указав имя библиотеки и функцию обратного вызова для вызова после успешной загрузки:

    <script>
      let tokenClient;
      let accessToken = null;
      let pickerInited = false;
      let gisInited = false;

      // Use the API Loader script to load google.picker.
      function onApiLoad() {
        gapi.load('picker', onPickerApiLoad);
      }

      function onPickerApiLoad() {
        pickerInited = true;
      }

      function gisLoaded() {
        // Replace with your client ID and required scopes.
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: 'CLIENT_ID',
          scope: 'SCOPES',
          callback: '', // defined later
        });
        gisInited = true;
    }
    </script>
    <!-- Load the Google API Loader script. -->
    <script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>

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

CLIENT_ID : идентификатор клиента вашего веб-приложения.
SCOPES : одна или несколько областей действия OAuth 2.0, которые необходимо запросить для доступа к API Google, в зависимости от необходимого уровня доступа. Подробнее см. в разделе Области действия OAuth 2.0 для API Google .

Библиотека JavaScript google.accounts.oauth2 помогает запрашивать согласие пользователя и получать токен доступа для работы с его данными. Метод initTokenClient инициализирует новый клиент токена, используя идентификатор клиента вашего веб-приложения. Подробнее см. в разделе Использование модели токена .

Функция onApiLoad загружает библиотеки Google Picker. Функция обратного вызова onPickerApiLoad вызывается после успешной загрузки библиотеки Google Picker.

Примечание: Если вы используете TypeScript, вы можете установить @types/google.picker для использования window.google.picker . Чтобы сообщить о проблеме с этими типами, отправьте запрос в службу поддержки .

Отобразить Google Picker

Функция createPicker обеспечивает завершение загрузки API Google Picker и создание токена OAuth 2.0. Используйте метод PickerBuilder.setAppId для установки идентификатора приложения Drive, используя номер проекта Cloud, чтобы разрешить приложению доступ к файлам пользователя. Затем эта функция создаёт экземпляр Google Picker и отображает его:

    // Create and render a Google Picker object for selecting from Drive.
    function createPicker() {
      const showPicker = () => {
        // Replace with your API key and App ID.
        const picker = new google.picker.PickerBuilder()
            .addView(google.picker.ViewId.DOCS)
            .setOAuthToken(accessToken)
            .setDeveloperKey('API_KEY')
            .setCallback(pickerCallback)
            .setAppId('APP_ID')
            .build();
        picker.setVisible(true);
      }

      // Request an access token.
      tokenClient.callback = async (response) => {
        if (response.error !== undefined) {
          throw (response);
        }
        accessToken = response.access_token;
        showPicker();
      };

      if (accessToken === 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: ''});
      }
    }

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

API_KEY : Ваш ключ API.
APP_ID : Номер вашего облачного проекта.

Чтобы создать экземпляр Google Picker, необходимо создать объект Picker с помощью PickerBuilder . PickerBuilder принимает View , токен OAuth 2.0, ключ разработчика и функцию обратного вызова для успешного выполнения ( pickerCallback ).

Объект Picker отображает только одно View за раз. Укажите хотя бы одно представление, используя ViewId ( google.picker.ViewId.* ) или создав экземпляр DocsView для дополнительного управления отображением представления.

Если в Google Picker добавлено несколько представлений, пользователи могут переключаться между ними, нажимая на вкладку слева. Вкладки можно логически группировать с помощью объектов ViewGroup .

Список допустимых представлений см. в разделе ViewId справочника Google Picker. Чтобы получить токен для любого из этих представлений, используйте область действия https://www.googleapis.com/auth/drive.file .

Реализуйте обратный вызов Google Picker

Обратный вызов Google Picker может использоваться для реагирования на действия пользователя в Google Picker, такие как выбор файла или нажатие кнопки «Отмена». Интерфейс ResponseObject передаёт информацию о выборе пользователя.

    // A callback implementation.
    function pickerCallback(data) {
      let url = 'nothing';
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        const doc = data[google.picker.Response.DOCUMENTS][0];
        url = doc[google.picker.Document.URL];
      }
      const message = `You picked: ${url}`;
      document.getElementById('result').textContent = message;
    }

Обратный вызов получает объект данных в формате JSON. Этот объект содержит Action пользователь выполняет с Google Picker ( google.picker.Response.ACTION ). Если пользователь выбирает элемент, также заполняется массив google.picker.Response.DOCUMENTS . В этом примере на главной странице отображается URL-адрес google.picker.Document.URL . Подробнее о полях данных см. в описании интерфейса ResponseObject .

Фильтрация определенных типов файлов

Используйте ViewGroup для фильтрации определённых элементов. В следующем примере кода показано, как подпредставление «Диск» отображает только документы и презентации.

    const picker = new google.picker.PickerBuilder()
        .addViewGroup(
          new google.picker.ViewGroup(google.picker.ViewId.DOCS)
              .addView(google.picker.ViewId.DOCUMENTS)
              .addView(google.picker.ViewId.PRESENTATIONS))
        .setOAuthToken(oauthToken)
        .setDeveloperKey(developerKey)
        .setAppId(cloudProjectNumber)
        .setCallback(pickerCallback)
        .build();

Список допустимых типов представлений см. в ViewId .

Настройте внешний вид Google Picker

Объект Feature можно использовать для включения или отключения функций в различных представлениях. Для точной настройки внешнего вида окна Google Picker используйте метод PickerBuilder.enableFeature или PickerBuilder.disableFeature . Например, если у вас только одно представление, вы можете скрыть панель навигации ( Feature.NAV_HIDDEN ), чтобы предоставить пользователям больше места для просмотра элементов.

В следующем примере кода показан пример средства выбора поиска в электронной таблице, использующего эту функцию:

    const picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.SPREADSHEETS)
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();