Interfejs Google Picker API

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.

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.

  Włączanie interfejsu 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:

1. W konsoli Google Cloud otwórz menu menu. > Interfejsy API i Usługi > Dane logowania.

   Przejdź do danych logowania

2. Kliknij Utwórz dane logowania >. Klucz interfejsu API.
3. Wyświetli się Twój nowy klucz interfejsu API.
   • Kliknij Kopiuj content_copy. 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.

1. W konsoli Google Cloud otwórz Menu menu > Interfejsy API i Usługi > Dane logowania.

   Przejdź do danych logowania

2. Kliknij Utwórz dane logowania > Identyfikator klienta OAuth.
3. Kliknij Typ aplikacji > Aplikacja internetowa.
4. W polu Nazwa wpisz nazwę danych logowania. Ta nazwa jest wyświetlana tylko w konsoli Google Cloud.
5. 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.
6. 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.

7. Kliknij OK. Nowo utworzone dane logowania pojawią się w sekcji Identyfikatory klienta OAuth 2.0.

Wyświetlanie 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();
    

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: