Google Picker in Webanwendungen einbinden

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

Die Google Picker API ist eine JavaScript API, mit der Nutzer Google Drive-Dateien über die Google-Auswahl 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.

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

Umgebung einrichten

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

API aktivieren

Bevor Sie Google APIs verwenden können, müssen Sie sie in einem Google Cloud-Projekt aktivieren. Sie können eine oder mehrere APIs in einem einzelnen Google Cloud-Projekt 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, z. B. 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ü > 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“ , um Ihren API-Schlüssel für die Verwendung im Code Ihrer App zu kopieren. 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

Für die Authentifizierung von Endnutzern und für den Zugriff auf Nutzerdaten in Ihrer Anwendung müssen Sie mindestens eine OAuth 2.0-Client-ID erstellen. Eine Client-ID wird zur Identifizierung einer einzelnen Anwendung bei den OAuth-Servern von Google verwendet. Wenn Ihre Anwendung auf mehreren Plattformen ausgeführt wird, müssen Sie für jede Plattform eine separate Client-ID erstellen.

1. Gehen Sie in der Google API Console zu Menü > 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.

Hinweis: Die @googleworkspace/drive-picker-element benutzerdefinierte Webkomponente ist eine optimierte Möglichkeit, die Google-Auswahl in Ihre Webanwendung einzubinden. Verwenden Sie für React-Anwendungen die frameworkspezifische @googleworkspace/drive-picker-react Komponente.

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 die Nutzereinwilligung einholen 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

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.

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

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

Wenn der Google-Auswahl mehr als eine Ansicht hinzugefügt wird, können Nutzer links auf einen Tab klicken, um zwischen den Ansichten zu 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 Array google.picker.Response.DOCUMENTS gefüllt. In diesem Beispiel wird die google.picker.Document.URL auf der Hauptseite angezeigt. Details zu den Datenfeldern finden Sie in der Schnittstelle ResponseObject.

Bestimmte Dateitypen filtern

Verwenden Sie ein 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.

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, um Nutzern mehr Platz für die Elemente zu geben.

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

Hinweis: Wenn Sie einen anderen Bereich als https://www.googleapis.com/auth/drive oder https://www.googleapis.com/auth/drive.readonly verwenden, empfiehlt es sich, PickerBuilder.setMode(DocsViewMode.LIST) zu verwenden, da der Nutzer keinen Zugriff auf Miniaturansichten gewährt hat.

Weitere Informationen

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