Interfejs Google Picker API to interfejs API JavaScript, którego możesz użyć w swoich aplikacjach internetowych, aby umożliwić użytkownikom przesyłanie plików na Dysk Google. Użytkownicy mogą przyznawać Twoim aplikacjom uprawnienia dostępu do dane na Dysku, dzięki czemu mogą korzystać z plików użytkowników w bezpieczny i autoryzowany sposób;
Selektor Google działa jako „otwarcie pliku” okno z informacjami przechowywanymi na Dysku i obejmuje te funkcje:
- wygląd i sposób działania interfejsu Dysku Google.
- Kilka widoków przedstawiających podgląd i miniatury plików na Dysku.
- Wbudowane okno modalne, dzięki któremu użytkownicy nigdy nie opuszczają głównej aplikacji.
Selektor Google nie pozwala użytkownikom porządkować, przenosić ani kopiować plików z jednego folderu. do innego. Aby to zrobić, możesz użyć interfejsu Google Drive API. lub interfejsu Dysku.
Wymagania dotyczące zgłoszenia
Aplikacje korzystające z selektora Google muszą być zgodne ze wszystkimi Warunki korzystania z usługi. Przede wszystkim należy poprawnie w swoich żądaniach.
Musisz też mieć projekt Google Cloud.Konfigurowanie środowiska
Aby zacząć korzystać z interfejsu Google Picker API, musisz skonfigurować środowisko.
Włącz API
Zanim zaczniesz korzystać z interfejsów API Google, musisz je włączyć w projekcie Google Cloud. W jednym projekcie Google Cloud możesz włączyć 1 lub więcej interfejsów API.
W konsoli Google Cloud włącz interfejs Google Picker API.
Tworzenie klucza interfejsu API
Klucz interfejsu API to długi ciąg znaków zawierający wielkie i małe litery, cyfry,
podkreślenia i łączniki, np. AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe
.
Ta metoda uwierzytelniania służy do anonimowego dostępu do publicznie dostępnych informacji
takich jak pliki Google Workspace udostępniane za pomocą ustawienia „Każdy użytkownik internetu”
za pomocą tego linku”. ustawienia udostępniania. Więcej informacji:
Uwierzytelnij się za pomocą kluczy interfejsu API.
Aby utworzyć klucz interfejsu API:
- W konsoli Google Cloud otwórz menu > Interfejsy API i Usługi > Dane logowania. .
- Kliknij Utwórz dane logowania >. Klucz interfejsu API.
- Wyświetli się Twój nowy klucz interfejsu API.
- Kliknij Kopiuj . aby skopiować klucz interfejsu API i użyć go w kodzie aplikacji. Kluczem interfejsu API może być również w „kluczach interfejsu API” danych logowania do projektu.
- Kliknij Ogranicz klucz, aby zaktualizować ustawienia zaawansowane i ograniczyć korzystanie z klucza swojego klucza interfejsu API. Więcej informacji znajdziesz w artykule Stosowanie ograniczeń dotyczących kluczy interfejsu API.
Autoryzacja danych logowania w aplikacji internetowej
Aby uwierzytelniać użytkowników i uzyskiwać dostęp do ich danych w aplikacji, musisz: utwórz co najmniej jeden identyfikator klienta OAuth 2.0. Identyfikator klienta służy do identyfikowania z jedną aplikacją na serwery OAuth Google. Jeśli Twoja aplikacja działa na wielu platformach, musisz utworzyć oddzielny identyfikator klienta dla każdej platformy.
- W konsoli Google Cloud otwórz Menu > Interfejsy API i Usługi > Dane logowania.
- Kliknij Utwórz dane logowania > Identyfikator klienta OAuth.
- Kliknij Typ aplikacji > Aplikacja internetowa.
- W polu Nazwa wpisz nazwę danych logowania. Ta nazwa jest wyświetlana tylko w konsoli Google Cloud.
- Dodaj autoryzowane identyfikatory URI powiązane z Twoją aplikacją:
- Aplikacje po stronie klienta (JavaScript) – w sekcji Autoryzowane źródła JavaScript kliknij Dodaj identyfikator URI. Następnie wpisz identyfikator URI, którego chcesz używać w przypadku żądań przeglądarki. Identyfikuje domeny, z których aplikacja może wysyłać żądania interfejsu API do serwera OAuth 2.0.
- Aplikacje po stronie serwera (Java, Python i inne) – w sekcji Autoryzowane identyfikatory URI przekierowania kliknij Dodaj identyfikator URI. Następnie wpisz identyfikator URI punktu końcowego, do którego serwer OAuth 2.0 może wysyłać odpowiedzi.
- Kliknij Utwórz. Pojawi się ekran tworzenia klienta OAuth z nowym identyfikatorem klienta i tajnym kluczem klienta.
Zapisz identyfikator klienta. Tajne klucze klienta nie są używane w aplikacjach internetowych.
- Kliknij OK. Nowo utworzone dane logowania pojawią się w sekcji Identyfikatory klienta OAuth 2.0.
Picker
. Jeśli chcesz poprosić o token dostępu, przeczytaj artykuł Uzyskiwanie dostępu do interfejsów API Google przy użyciu OAuth 2.0.
Wyświetlanie selektora Google
Pozostała część tego przewodnika dotyczy sposobu wczytywania i wyświetlania selektora Google w aplikacji internetowej. Do pełny przykład znajdziesz w przykładowym kodzie selektora Google.Wczytaj bibliotekę selektora Google
Aby wczytać bibliotekę Google Picker, wywołaj gapi.load()
z nazwą biblioteki i znakiem
funkcja wywołania zwrotnego do wywołania po udanym wczytaniu:
<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>
Zastąp następujące elementy:
CLIENT_ID
: identyfikator klienta Twojej aplikacji internetowej.SCOPES
: co najmniej 1 zakres OAuth 2.0, który musisz zażądać, aby uzyskać dostęp do interfejsów API Google w zależności od potrzebnego poziomu dostępu. Więcej informacji znajdziesz w artykule Zakresy protokołu OAuth 2.0 dla interfejsów API Google.
Biblioteka JavaScript google.accounts.oauth2
ułatwia wyświetlanie prośby o zgodę użytkownika i uzyskiwanie tokena dostępu umożliwiającego przetwarzanie jego danych.
Metoda initTokenClient()
inicjuje nowego klienta tokena z identyfikatorem klienta Twojej aplikacji internetowej. Więcej informacji znajdziesz w artykule na temat używania modelu tokenów.
Funkcja onApiLoad()
wczytuje biblioteki selektora Google.
Funkcja wywołania zwrotnego onPickerApiLoad()
jest wywoływana za biblioteką selektora Google
udało się wczytać.
Wyświetlanie selektora Google
Funkcja createPicker()
sprawdza, czy interfejs Google Picker API się zakończy.
i że został utworzony token OAuth. Użyj
setAppId
, aby ustawić
Identyfikator aplikacji Dysku, aby zezwolić aplikacji na dostęp do plików użytkownika. Ta funkcja w takim razie
tworzy wystąpienie selektora Google i wyświetla je:
// 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) .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: ''}); } }
Aby utworzyć wystąpienie selektora Google, musisz utworzyć obiekt Picker
za pomocą funkcji PickerBuilder
.
PickerBuilder
używa View
, tokena OAuth,
programisty oraz funkcję wywołania zwrotnego do wywołania po udanym wywołaniu (pickerCallback
).
Obiekt Picker
renderuje jeden obiekt View
naraz. Wybierz co najmniej jeden widok danych.
przez ViewId
(google.picker.ViewId.*
) lub przez utworzenie instancji
typ (google.picker.*View
). Określ widok według typu dla dodatkowych
i kontrolować sposób renderowania widoku.
Jeśli do selektora Google dodano więcej niż jeden widok, użytkownicy mogą przełączać się między widokami, wybierając
klikając kartę po lewej stronie. Karty można logicznie grupować z obiektami ViewGroup
.
Wdrażanie wywołania zwrotnego Google Picker
Wywołanie zwrotne selektora Google może służyć do reagowania na interakcje użytkownika w selektorze Google, takie jak:
wybierz plik lub naciśnij Anuluj. Response
przekazuje informacje o wyborze użytkownika.
// 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; }
Wywołanie zwrotne odbiera obiekt data
zakodowany w formacie JSON. Ten obiekt zawiera
Action
użytkownik wykonuje za pomocą selektora Google (google.picker.Response.ACTION
).
Jeśli użytkownik wybierze element Document
,
tablica google.picker.Response.DOCUMENTS
też jest
. W tym przykładzie na stronie głównej jest widoczny obiekt google.picker.Document.URL
.
Szczegółowe informacje o polach danych znajdziesz w dokumentacji JSON.
Filtruj określone typy plików
Aby filtrować konkretne elementy, użyj ViewGroup
.
Poniższy przykładowy kod pokazuje, jak interfejs „Dysk Google” w widoku podrzędnym widoczne są tylko dokumenty i prezentacje.
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();Listę prawidłowych typów widoków znajdziesz w sekcji
ViewId
.
Dostosowywanie wyglądu selektora Google
Za pomocą obiektu Feature
możesz włączać i wyłączać funkcje w różnych widokach.
Aby dostosować wygląd okna selektora Google, użyj
Funkcja PickerBuilder.enableFeature()
lub PickerBuilder.disableFeature()
. Jeśli na przykład masz tylko jeden widok, możesz ukryć
panel nawigacji (Feature.NAV_HIDDEN
), aby dać użytkownikom więcej miejsca na wyświetlanie elementów.
Następujący przykładowy kod przedstawia przykładowy selektor wyszukiwania w arkuszu kalkulacyjnym, który korzysta z tej funkcji:
let picker = new google.picker.PickerBuilder() .addView(google.picker.ViewId.SPREADSHEETS) .enableFeature(google.picker.Feature.NAV_HIDDEN) .setDeveloperKey(developerKey) .setCallback(pickerCallback) .build();
Renderowanie selektora Google w innych językach
Określ język interfejsu, podając język dla PickerBuilder
za pomocą metody setLocale(locale)
.
Poniższy przykładowy kod pokazuje, jak ustawić język francuski:
let picker = new google.picker.PickerBuilder() .addView(google.picker.ViewId.IMAGE_SEARCH) .setLocale('fr') .setDeveloperKey(developerKey) .setCallback(pickerCallback) .build();
Oto lista aktualnie obsługiwanych języków:
af am ar bg bn ca cs |
da de el en en-GB es es-419 |
et eu fa fi fil fr fr-CA |
gl gu hi hr hu id is |
it iw ja kn ko lt lv |
ml mr ms nl no pl pt-BR |
pt-PT ro ru sk sl sr sv |
sw ta te th tr uk ur |
vi zh-CN zh-HK zh-TW zu |