Übersicht über Web-Apps

Die Google Picker API ist eine JavaScript API, mit der Nutzer in Ihren Webanwendungen 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 auf sichere und autorisierte Weise mit ihren Dateien interagieren.

Die Google Picker API fungiert als Dialogfeld „Datei öffnen“ für in Drive gespeicherte Informationen und bietet mehrere Funktionen:

• Ähnliches Erscheinungsbild wie die Google Drive Benutzeroberfläche.
• Mehrere Ansichten mit Vorschauen und Miniaturansichten von Drive-Dateien
• Ein modales Inline-Fenster, sodass Nutzer die Hauptanwendung nicht verlassen müssen

Mit der Google Picker API können Nutzer 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 Picker API verwenden, gelten alle bestehenden Nutzungsbedingungen. 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. 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ü > 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 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

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.

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

Zu den Clients

Klicken Sie auf Client erstellen.

Klicken Sie auf Anwendungstyp > Webanwendung.

Geben Sie im Feld Name einen Namen für die Anmeldedaten ein. Dieser Name wird nur in der Google API Console angezeigt.

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.

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 eines Picker-Objekts ein OAuth 2.0-Zugriffstoken mit Ansichten senden, die auf private Nutzerdaten zugreifen. Informationen zum Anfordern eines Zugriffs tokens finden Sie unter Mit OAuth 2.0 auf Google APIs zugreifen.

Google Picker verwalten

Im Rest dieses Leitfadens wird beschrieben, wie Sie die Google Picker API aus einer Webanwendung laden und anzeigen sowie den Callback implementieren. Das vollständige Beispiel finden Sie unter Codebeispiel für Webanwendungen.

Hinweis: Die @googleworkspace/drive-picker-element benutzerdefinierte Webkomponente ist eine optimierte Möglichkeit, die Google Picker API in Ihre Webanwendung zu integrieren. Für React-Anwendungen verwenden Sie 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 Nutzer um ihre Einwilligung 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 Picker 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 Picker API 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 Picker-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 Picker API mehrere Ansichten hinzugefügt wurden, können Nutzer durch Klicken auf einen Tab auf der linken Seite zwischen den Ansichten wechseln. Tabs können logisch gruppiert werden mit ViewGroup Objekten.

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 im Google Picker 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 dem Google Picker ausführt (google.picker.Response.ACTION). Wenn der Nutzer ein Element auswählt, wird auch das google.picker.Response.DOCUMENTS Array gefüllt. In diesem Beispiel wird die google.picker.Document.URL auf der Hauptseite angezeigt. Weitere Informationen zu Datenfeldern 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.

Erscheinungsbild des Google Picker 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 Picker-Fensters 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 bieten.

Das folgende Codebeispiel zeigt einen Such-Picker für Tabellen, der diese Funktion verwendet:

    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.