Google Picker in Webanwendungen einbinden

In diesem Dokument wird erläutert, wie Sie den Google Picker mithilfe der Google Picker API in Ihre Web-Apps einbinden.

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

Funktionen

Die Google-Auswahl bietet mehrere Funktionen:

• Die Benutzeroberfläche ähnelt der 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 Inline-Modal-Fenster, damit Nutzer die Haupt-App 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 Google Picker verwenden, gelten alle bestehenden Nutzungsbedingungen. Am wichtigsten ist, dass 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. Rufen Sie in der Google Cloud Console das Menü menu > APIs und Dienste > Anmeldedaten auf.

   Zu den Anmeldedaten

2. Klicken Sie auf Anmeldedaten erstellen > API-Schlüssel.
3. Der neue API-Schlüssel wird angezeigt.
   • Klicken Sie auf „Kopieren“ content_copy, um den 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.

Wenn Sie Ihren API-Schlüssel einschränken, um eine nicht autorisierte Nutzung zu verhindern, wenden Sie die folgenden Konfigurationen an:

• Anwendungseinschränkungen:Wenn Sie Anwendungseinschränkungen für Websites festlegen, müssen Sie die Domain Ihrer Anwendung (z. B. https://example.com/*) und https://docs.google.com/* der Liste der angegebenen Websites unter Website-Einschränkungen hinzufügen. Da der Google Picker in einem iFrame gerendert wird, der auf docs.google.com gehostet wird, wird beim Weglassen des API-Schlüssels im Google Picker der Fehler „API-Entwicklerschlüssel ist ungültig“ angezeigt.
• API-Einschränkungen:Wenn Sie den Schlüssel auf bestimmte APIs beschränken, wählen Sie die Google Picker API und die Drive API aus, falls Ihre App direkte Drive API-Aufrufe ausführt.

Anmeldedaten für eine Web-App autorisieren

1. Rufen Sie in der Google Cloud Console das Menü menu > Google Auth Platform > Clients auf.

   Zu „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 Cloud 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 für Browseranfragen ein. Damit werden die Domains angegeben, 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.

   Clientschlüssel werden nicht für Webanwendungen verwendet.

Wichtig:Ihre App muss beim Erstellen eines Picker-Objekts ein OAuth 2.0-Zugriffstoken mit Ansichten senden, die auf private Nutzerdaten zugreifen. Informationen zum Anfordern eines Zugriffstokens finden Sie unter Mit OAuth 2.0 auf Google APIs zugreifen.

Google Picker verwalten

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

Google Picker-Bibliothek laden

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

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