Selektor Google to okno „Plik otwarty” dla informacji przechowywanych na Dysku Google. Selektor Google ma te funkcje:
- Wygląd i styl interfejsu Dysku Google.
- Kilka widoków z podglądem plików z Dysku i miniaturami.
- Wbudowane okno modalne, dzięki któremu użytkownicy nigdy nie opuszczają głównej aplikacji.
Interfejs Google Picker API to interfejs API JavaScript, który umożliwia użytkownikom otwieranie i przesyłanie plików na Dysku.
Wymagania
Aplikacje korzystające z selektora Google muszą być zgodne ze wszystkimi Warunkami korzystania z usługi. Najważniejsze jest jednak poprawne identyfikowanie się użytkowników.
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 włączyć je w projekcie Google Cloud. W jednym projekcie Google Cloud możesz włączyć jeden lub więcej interfejsów API.
W konsoli Google Cloud włącz interfejs Google Picker API.
utworzysz klucz interfejsu API;
Klucz interfejsu API to długi ciąg zawierający duże i małe litery, cyfry, podkreślenia i łączniki, takie jak AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe.
Ta metoda uwierzytelniania służy do anonimowego dostępu do danych dostępnych publicznie, takich jak pliki Google Workspace udostępniane przy użyciu ustawienia udostępniania „Każdy użytkownik internetu mający ten link”. Więcej informacji znajdziesz w artykule Uwierzytelnianie przy użyciu kluczy interfejsu API.
Aby utworzyć klucz interfejsu API:
- W konsoli Google Cloud kliknij Menu > Interfejsy API i usługi > Dane logowania.
- Kliknij Utwórz dane logowania > Klucz interfejsu API.
- Pojawi się Twój nowy klucz interfejsu API.
- Kliknij Kopiuj , aby skopiować klucz interfejsu API do użycia w kodzie aplikacji. Klucz interfejsu API możesz też znaleźć w sekcji „Klucze interfejsu API” danych logowania do projektu.
- Kliknij Ogranicz klucz, aby zaktualizować ustawienia zaawansowane i ograniczyć użycie klucza interfejsu API. Więcej informacji znajdziesz w sekcji Stosowanie ograniczeń interfejsu API.
Autoryzowanie danych logowania do aplikacji internetowej
Aby uwierzytelnić się jako użytkownik końcowy i uzyskać dostęp do danych użytkownika w aplikacji, musisz utworzyć co najmniej 1 identyfikator klienta OAuth 2.0. Identyfikator klienta służy do identyfikowania jednej aplikacji na serwerach OAuth Google. Jeśli aplikacja działa na wielu platformach, musisz utworzyć oddzielny identyfikator klienta dla każdej z nich.
- W konsoli Google Cloud kliknij 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 widoczna tylko w konsoli Google Cloud.
- Dodaj autoryzowane identyfikatory URI powiązane z aplikacją:
- Aplikacje po stronie klienta (JavaScript) – w sekcji Autoryzowane źródła JavaScriptu kliknij Dodaj identyfikator URI. Następnie wpisz identyfikator URI, który będzie używany w żądaniach dotyczących przeglądarki. Określa domeny, z których aplikacja może wysyłać żądania do interfejsu API na serwer 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, na który serwer OAuth 2.0 może wysyłać odpowiedzi.
- Kliknij Utwórz. Pojawi się ekran utworzony przez klienta OAuth zawierający nowy identyfikator klienta i tajny klucz 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.
- Opcjonalnie: jeśli dane logowania tworzysz jako wstępny warunek do uruchomienia JavaScriptu, musisz też wygenerować klucz interfejsu API.
Picker Twoja aplikacja musi wysyłać token dostępu OAuth 2.0 z widokami, które mają dostęp do prywatnych danych użytkownika. Aby dowiedzieć się, jak poprosić o token dostępu, przeczytaj artykuł Uzyskiwanie dostępu do interfejsów API Google przy użyciu protokołu OAuth 2.0.
Wyświetl selektor Google
Pozostała część tego przewodnika opisuje, jak wczytywać i wyświetlać selektor Google z aplikacji internetowej. Aby zobaczyć pełny przykład, przejdź do przykładowego kodu selektora Google.Wczytaj bibliotekę selektora Google
Aby wczytać bibliotekę selektora Google, wywołaj gapi.load() z nazwą biblioteki i funkcją wywołania zwrotnego, która zostanie wywołana 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: 'YOUR_CLIENT_ID',
scope: 'YOUR_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>
Funkcja onApiLoad() wczytuje biblioteki selektora Google. Funkcja wywołania zwrotnego onPickerApiLoad() jest wywoływana po wczytaniu biblioteki wyboru Google.
Wyświetl selektor Google
Funkcja createPicker() sprawdza, czy interfejs Google Picker API się kończy i czy utworzono token OAuth. Następnie ta funkcja tworzy instancję selektora Google i wyświetla ją:
// 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('YOUR_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: ''});
}
}
Aby utworzyć instancję Google Picker, musisz udostępnić funkcję View, oauthToken, developerKey i wywołanie zwrotne w celu wywołania metody (pickerCallback).
Obiekt Picker renderuje pojedynczo View. Określ co najmniej 1 widok danych za pomocą właściwości ViewId (google.picker.ViewId.*) lub tworząc instancję określonego typu (google.picker.*View). Określ widok według typu, aby uzyskać dodatkową kontrolę nad tym, jak jest on renderowany.
Jeśli do selektora Google dodasz więcej niż jeden widok, użytkownicy będą mogli przełączać się między widokami, klikając kartę po lewej stronie. Karty można logicznie grupować za pomocą obiektów ViewGroup.
Wdrażanie wywołania zwrotnego selektora
Za pomocą wywołania zwrotnego selektora można reagować na interakcje użytkowników w selektorze Google, na przykład wybrać plik lub nacisnąć Anuluj.
// 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 otrzymuje obiekt data zakodowany w formacie JSON. Ten obiekt zawiera wszystkie działania, które użytkownik wykonuje w selektorze Google (google.picker.Response.ACTION). Jeśli użytkownik wybierze element, tablica google.picker.Response.DOCUMENTS również zostanie wypełniona. W tym przykładzie element google.picker.Document.URL jest widoczny na stronie głównej.
Szczegółowe informacje o polach danych znajdziesz w dokumentacji JSON.
Filtrowanie określonych typów plików
Używaj ViewGroup do filtrowania konkretnych elementów. W tym przykładzie podwidok „Dysk Google” zawiera 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();
Dostosowywanie wyglądu selektora Google
Użyj funkcji PickerBuilder.enableFeature(), aby dostosować wygląd okna selektora Google. Jeśli na przykład masz tylko jeden widok, możesz ukryć panel nawigacyjny, aby użytkownicy mieli więcej miejsca, w którym mogą wyświetlić elementy. Oto przykładowy selektor arkusza kalkulacyjnego pokazujący tę funkcję:
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 instancji PickerBuilder za pomocą metody setLocale(locale). Oto przykład języka francuskiego:
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.IMAGE_SEARCH)
.setLocale('fr')
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Oto lista obsługiwanych obecnie języków:
afamarbgbncacs |
dadeelenen-GBeses-419 |
eteufafifilfrfr-CA |
glguhihrhuidis |
itiwjaknkoltlv |
mlmrmsnlnoplpt-BR |
pt-PTroruskslsrsv |
swtatethtrukur |
vizh-CNzh-HKzh-TWzu |