Google Picker in Webanwendungen einbinden

In diesem Dokument wird erläutert, wie Sie die Google-Auswahl mithilfe der Google Picker API in Ihre Webanwendungen einbinden.

Die Google Picker API ist eine JavaScript API, die Sie implementieren können, damit Nutzer mit der Google-Auswahl Google Drive-Dateien auswählen oder hochladen können. Nutzer können Ihren Apps die Berechtigung erteilen, auf ihre Drive-Daten zuzugreifen. So können sie sicher und autorisiert mit ihren Dateien interagieren.

Funktionen

Die Google-Auswahl bietet mehrere Funktionen:

• Ähnliches Erscheinungsbild wie die Google Drive Benutzeroberfläche.
• Mehrere Ansichten mit Vorschauen und Miniaturansichten von Drive-Dateien
• Vorab gefilterte Ansichten, in denen nur bestimmte Dateitypen (z. B. PDFs oder Bilder) oder bestimmte Ordner angezeigt werden
• Ein modales Inline-Fenster, sodass Nutzer die Hauptanwendung nicht verlassen müssen

Mit der Google-Auswahl können Sie zwar Dateien auswählen und hochladen, aber Nutzer können damit keine Dateien von einem Ordner in einen anderen verschieben oder kopieren. Zum Verwalten von Dateien müssen Sie entweder die Google Drive API oder die Drive-Benutzeroberfläche verwenden.

Vorbereitung

Für Apps, die die Google-Auswahl verwenden, gelten alle bestehenden Nutzungs bedingungen. Vor allem müssen Sie sich in Ihren Anfragen korrekt identifizieren.

Sie benötigen außerdem ein Google Cloud-Projekt.

Umgebung einrichten

Bevor Sie die Google Picker API verwenden können, müssen Sie Ihre Umgebung einrichten.

API aktivieren

• Aktivieren Sie in der Google Cloud Console die Google Picker API.

  API aktivieren

API-Schlüssel erstellen

Ein API-Schlüssel ist ein langer String, der Groß- und Kleinbuchstaben, Zahlen, Unterstriche und Bindestriche enthält. Beispiel: AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe. Diese Authentifizierungsmethode wird verwendet, um anonym auf öffentlich verfügbare Daten zuzugreifen, z. B. auf Google Workspace-Dateien, die mit der Freigabeeinstellung „Jeder im Internet mit diesem Link“ freigegeben wurden. Weitere Informationen finden Sie unter API-Schlüssel verwalten.

So erstellen Sie einen API-Schlüssel:

1. Gehen Sie in der Google Cloud Console zu Menü menu > APIs und Dienste > Anmeldedaten.

   Zu den Anmeldedaten

2. Klicken Sie auf Anmeldedaten erstellen > API-Schlüssel.
3. Ihr neuer API-Schlüssel wird angezeigt.
   • Klicken Sie auf „Kopieren“ content_copy, um Ihren API-Schlüssel zu kopieren und im Code Ihrer App zu verwenden. Der API-Schlüssel ist auch im Bereich „API-Schlüssel“ der Anmeldedaten Ihres Projekts zu finden.
   • Damit eine nicht autorisierte Verwendung verhindert wird, sollten Sie einschränken, wo und für welche APIs der API-Schlüssel verwendet werden kann. Weitere Informationen finden Sie unter API-Einschränkungen hinzufügen.

Anmeldedaten für eine Webanwendung autorisieren

1. Gehen Sie in der Google API Console zu Menü menu > Google Auth-Plattform > Clients.

   Zu den Clients

2. Klicken Sie auf Client erstellen.
3. Klicken Sie auf Anwendungstyp > Webanwendung.
4. Geben Sie im Feld Name einen Namen für die Anmeldedaten ein. Dieser Name wird nur in der Google API Console angezeigt.
5. Fügen Sie autorisierte URIs für Ihre App hinzu:
   • Clientseitige Apps (JavaScript): Klicken Sie unter Autorisierte JavaScript-Quellen auf URI hinzufügen. Geben Sie dann einen URI ein, der für Browseranfragen verwendet werden soll. Dadurch werden die Domains identifiziert, von denen Ihre Anwendung API-Anfragen an den OAuth 2.0-Server senden kann.
   • Serverseitige Apps (Java, Python usw.): Klicken Sie unter Autorisierte Weiterleitungs-URIs auf URI hinzufügen. Geben Sie dann einen Endpunkt-URI ein, an den der OAuth 2.0-Server Antworten senden kann.
6. Klicken Sie auf Erstellen.

   Die neu erstellten Anmeldedaten werden unter OAuth 2.0-Client-IDs angezeigt.

   Notieren Sie sich die Client-ID. Clientschlüssel werden für Webanwendungen nicht verwendet.

Wichtig: Ihre App muss beim Erstellen einesPicker-Objekts ein OAuth 2.0-Zugriffstoken mit Ansichten senden, die auf private Nutzerdaten zugreifen. Informationen zum Anfordern eines Zugriffstokens, siehe OAuth 2.0 für den Zugriff auf Google APIs verwenden.

Google-Auswahl verwalten

Im Rest dieses Dokuments wird beschrieben, wie Sie die Google-Auswahl aus einer Webanwendung laden und anzeigen sowie den Callback implementieren. Das vollständige Codebeispiel finden Sie unter Google Picker API-Funktionen in Webanwendungen verwenden.

Google Picker-Bibliothek laden

Rufen Sie gapi.load mit dem Bibliotheksnamen und einer Callback-Funktion auf, die nach dem erfolgreichen Laden aufgerufen werden soll, um die Google Picker-Bibliothek zu laden:

    <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>

Ersetzen Sie Folgendes:

• CLIENT_ID: Die Client-ID Ihrer Webanwendung.
• SCOPES: Ein oder mehrere OAuth 2.0-Bereiche, die Sie für den Zugriff auf Google APIs anfordern müssen, je nach erforderlichem Zugriffsniveau. Weitere Informationen finden Sie unter OAuth 2.0-Bereiche für Google APIs.

Mit der JavaScript-Bibliothek google.accounts.oauth2 können Sie Nutzer um ihre Zustimmung bitten und ein Zugriffstoken abrufen, um mit Nutzerdaten zu arbeiten. Die Methode initTokenClient initialisiert einen neuen Token-Client mit der Client-ID Ihrer Webanwendung. Weitere Informationen finden Sie unter Tokenmodell verwenden.

Die Funktion onApiLoad lädt die Google Picker-Bibliotheken. Die Callback-Funktion onPickerApiLoad wird aufgerufen, nachdem die Google Picker-Bibliothek erfolgreich geladen wurde.

Hinweis: Wenn Sie TypeScript verwenden, können Sie @types/google.picker installieren, um window.google.picker zu verwenden. Wenn Sie ein Problem mit diesen Typen melden möchten, erstellen Sie ein Support Ticket.

Google-Auswahl anzeigen

Um eine Google-Auswahl-Instanz zu erstellen, müssen Sie mit PickerBuilder ein Picker-Objekt erstellen. Der PickerBuilder verwendet eine View, ein OAuth 2.0-Token, einen Entwicklerschlüssel und eine Callback-Funktion, die bei Erfolg aufgerufen wird (pickerCallback).

Die Funktion createPicker sorgt dafür, dass die Google Picker API vollständig geladen wird und ein OAuth 2.0-Token erstellt wird. Verwenden Sie die PickerBuilder.setAppId-Methode, um die Drive-App-ID mit der Cloud-Projektnummer festzulegen, damit die App auf die Dateien des Nutzers zugreifen kann. Diese Funktion erstellt dann eine Instanz der Google-Auswahl und zeigt sie an:

    // 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: ''});
      }
    }

Ersetzen Sie Folgendes:

• API_KEY: Ihr API-Schlüssel.
• APP_ID: Ihre Cloud-Projektnummer.

Das Picker-Objekt rendert jeweils eine View. Geben Sie mindestens eine Ansicht an, entweder über ViewId (google.picker.ViewId.*) oder indem Sie eine Instanz von DocsView erstellen, um die Darstellung der Ansicht besser zu steuern.

Wenn der Google-Auswahl mehr als eine Ansicht hinzugefügt wird, können Nutzer durch Klicken auf einen Tab auf der linken Seite zwischen den Ansichten wechseln. Tabs können logisch mit ViewGroup Objekten gruppiert werden.

Eine Liste der gültigen Ansichten finden Sie unter ViewId in der Google Picker-Referenz. Verwenden Sie den Bereich https://www.googleapis.com/auth/drive.file, um das Token für eine dieser Ansichten abzurufen.

Google Picker-Callback implementieren

Mit einem Google Picker-Callback können Sie auf Nutzerinteraktionen in der Google-Auswahl reagieren, z. B. wenn ein Nutzer eine Datei auswählt oder auf „Abbrechen“ klickt. Die ResponseObject Schnittstelle enthält Informationen zu den Auswahlmöglichkeiten des Nutzers.

    // 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;
    }

Der Callback empfängt ein JSON-codiertes Datenobjekt. Dieses Objekt enthält eine action, die der Nutzer mit der Google-Auswahl ausführt (google.picker.Response.ACTION). Wenn der Nutzer ein Element auswählt, wird auch das docs Array gefüllt. In diesem Beispiel wird google.picker.Document.URL auf der Hauptseite angezeigt. Details zu allen Properties finden Sie in der Schnittstelle ResponseObject.

Bestimmte Dateitypen filtern

Verwenden Sie ViewGroup, um bestimmte Elemente zu filtern. Im folgenden Codebeispiel werden in der Unteransicht „Drive“ nur Dokumente und Präsentationen angezeigt.

    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();

Eine Liste der gültigen Ansichtstypen finden Sie unter ViewId. Das DocsView Objekt kann auch für zusätzliche Filteroptionen verwendet werden.

Erscheinungsbild der Google-Auswahl anpassen

Mit dem Feature Objekt können Sie Funktionen für verschiedene Ansichten aktivieren oder deaktivieren. Verwenden Sie die PickerBuilder.enableFeature oder PickerBuilder.disableFeature Methode, um das Erscheinungsbild des Google-Auswahlfensters anzupassen. Wenn Sie beispielsweise nur eine Ansicht haben, können Sie den Navigationsbereich (Feature.NAV_HIDDEN) ausblenden, damit Nutzer mehr Platz für die Elemente haben.

Das folgende Codebeispiel zeigt eine Tabellenauswahl, in der diese Funktion verwendet wird:

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

Weitere Informationen

• Codebeispiel: Google Picker API-Funktionen in Webanwendungen verwenden
• Google Picker-Webkomponente verwenden
• Google Drive API-Bereiche auswählen