Google Picker — это диалоговое окно «Открыть файл» для информации, хранящейся на Google Диске. Google Picker имеет следующие функции:
- Внешний вид аналогичен пользовательскому интерфейсу Google Диска .
- Несколько представлений, показывающих превью и миниатюры файлов Диска.
- Встроенное модальное окно, чтобы пользователи никогда не покидали основное приложение.
Google Picker API — это API JavaScript, который вы можете использовать в своих веб-приложениях, чтобы пользователи могли открывать или загружать файлы на Диск.
Требования к кандидатам
Приложения, использующие Google Picker, должны соблюдать все существующие Условия использования . Самое главное, вы должны правильно идентифицировать себя в своих запросах.
У вас также должен быть проект Google Cloud .Настройте свою среду
Чтобы начать использовать Google Picker API, необходимо настроить среду.
Включить API
Прежде чем использовать Google API, вам необходимо включить их в проекте Google Cloud. Вы можете включить один или несколько API в одном проекте Google Cloud.
В консоли Google Cloud включите API Google Picker.
Создать ключ API
Ключ API — это длинная строка, содержащая буквы верхнего и нижнего регистра, цифры, знаки подчеркивания и дефисы, например AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe . Этот метод проверки подлинности используется для анонимного доступа к общедоступным данным, например к файлам Google Workspace, к которым предоставлен общий доступ с использованием параметра общего доступа "Все в Интернете, у которых есть эта ссылка". Дополнительные сведения см. в разделе Аутентификация с использованием ключей API .
Чтобы создать ключ API:
- В консоли Google Cloud выберите > API и службы > Учетные данные .
- Щелкните Создать учетные данные > Ключ API .
- Отображается ваш новый ключ API.
- Нажмите Копировать , чтобы скопировать ключ API для использования в коде вашего приложения. Ключ API также можно найти в разделе «Ключи API» учетных данных вашего проекта.
- Нажмите Ограничить ключ , чтобы обновить дополнительные настройки и ограничить использование вашего ключа API. Дополнительные сведения см. в разделе Применение ограничений ключа API .
Авторизация учетных данных для веб-приложения
Чтобы пройти аутентификацию в качестве конечного пользователя и получить доступ к данным пользователя в вашем приложении, вам необходимо создать один или несколько идентификаторов клиента OAuth 2.0. Идентификатор клиента используется для идентификации одного приложения на серверах OAuth Google. Если ваше приложение работает на нескольких платформах, вы должны создать отдельный идентификатор клиента для каждой платформы.
- В консоли Google Cloud выберите > API и службы > Учетные данные .
- Нажмите «Создать учетные данные» > «Идентификатор клиента OAuth» .
- Щелкните Тип приложения > Веб-приложение .
- В поле Имя введите имя учетных данных. Это имя отображается только в консоли Google Cloud.
- Добавьте авторизованные URI, связанные с вашим приложением:
- Клиентские приложения (JavaScript) — в разделе Авторизованные источники JavaScript нажмите Добавить URI . Затем введите URI, который будет использоваться для запросов браузера. Это определяет домены, из которых ваше приложение может отправлять запросы API на сервер OAuth 2.0.
- Серверные приложения (Java, Python и т. д.) . В разделе Авторизованные URI перенаправления нажмите Добавить URI . Затем введите URI конечной точки, на которую сервер OAuth 2.0 может отправлять ответы.
- Щелкните Создать . Появится экран создания клиента OAuth, показывающий ваш новый идентификатор клиента и секрет клиента.
Обратите внимание на идентификатор клиента. Секреты клиента не используются для веб-приложений.
- Нажмите ОК . Вновь созданные учетные данные отображаются в разделе Идентификаторы клиентов OAuth 2.0 .
Picker . Чтобы запросить токен доступа, см. Использование OAuth 2.0 для доступа к API Google .Показать Google Picker
В оставшейся части этого руководства рассказывается, как загружать и отображать 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() {
// TODO(developer): 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.
Показать Google Picker
Приведенная ниже функция createPicker() проверяет завершение загрузки Google Picker API и создание токена OAuth. Затем эта функция создает экземпляр Google Picker и отображает его:
// Create and render a Google Picker object for selecting from Drive.
function createPicker() {
const showPicker = () => {
// TODO(developer): Replace with your API key
const picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.DOCS)
.setOAuthToken(accessToken)
.setDeveloperKey('API_KEY')
.setCallback(pickerCallback)
.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: ''});
}
}
Чтобы создать экземпляр Google Picker, вы должны создать объект Picker с помощью PickerBuilder . PickerBuilder принимает View , токен OAuth, ключ разработчика и функцию обратного вызова для вызова в случае успеха ( pickerCallback ).
Объект Picker отображает одно View за раз. Укажите хотя бы одно представление либо с помощью ViewId ( google.picker.ViewId.* ), либо путем создания экземпляра типа ( google.picker.*View ). Укажите вид по типу для дополнительного контроля над визуализацией представления.
Если в Google Picker добавлено несколько представлений, пользователи могут переключаться с одного представления на другое, щелкая вкладку слева. Вкладки могут быть логически сгруппированы с объектами ViewGroup .
Реализуйте обратный вызов Google Picker
Обратный вызов Google Picker можно использовать для реагирования на действия пользователя в Google Picker, такие как выбор файла или нажатие кнопки «Отмена». Объект Response передает информацию о выборе пользователя.
// A simple callback implementation.
function pickerCallback(data) {
let url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
let doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
let message = `You picked: ${url}`;
document.getElementById('result').innerText = message;
}
Обратный вызов получает объект data в формате JSON. Этот объект содержит Action которое пользователь выполняет с помощью Google Picker ( google.picker.Response.ACTION ). Если пользователь выбирает элемент Document , массив google.picker.Response.DOCUMENTS также заполняется. В этом примере google.picker.Document.URL отображается на главной странице. Подробнее о полях данных см. в справочнике по JSON .
Фильтровать определенные типы файлов
Используйте ViewGroup как способ фильтрации определенных элементов. В следующем примере кода показано, как в подпредставлении «Диск Google» отображаются только документы и презентации.
let 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)
.setCallback(pickerCallback)
.build();
Список допустимых типов представлений см. в ViewId .Настройте внешний вид Google Picker
Вы можете использовать объект Feature для включения или выключения функций для различных представлений. Чтобы настроить внешний вид окна Google Picker, используйте функцию PickerBuilder.enableFeature() или PickerBuilder.disableFeature() . Например, если у вас есть только одно представление, вы можете скрыть панель навигации ( Feature.NAV_HIDDEN ), чтобы предоставить пользователям больше места для просмотра элементов.
В следующем примере кода показан пример средства выбора поиска электронной таблицы, использующего эту функцию.
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.SPREADSHEETS)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Визуализация Google Picker на других языках
Укажите язык пользовательского интерфейса, указав языковой стандарт для экземпляра PickerBuilder с помощью метода setLocale(locale) .
В следующем примере кода показано, как установить французский язык в качестве языкового стандарта:
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.IMAGE_SEARCH)
.setLocale('fr')
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Ниже приведен список локалей, поддерживаемых в настоящее время:
afamarbgbncacs | dadeelenen-GBeses-419 | eteufafifilfrfr-CA | glguhihrhuidis | itiwjaknkoltlv | mlmrmsnlnoplpt-BR | pt-PTroruskslsrsv | swtatethtrukur | vizh-CNzh-HKzh-TWzu |