Google Picker API-Funktionen in Web-Apps verwenden

In diesem Dokument wird erläutert, wie Sie Google Picker API-Funktionen verwenden, z. B. die Mehrfachauswahl aktivieren, den Navigationsbereich ausblenden und das Nutzerkonto mit dem aktuellen OAuth 2.0-Token der App auswählen.

Vorbereitung

Für dieses Beispiel müssen Sie in Ihrem Google Cloud-Projekt Folgendes konfigurieren:

  • APIs aktivieren: Aktivieren Sie sowohl die Google Picker API als auch die Google Drive API:

    1. Rufen Sie in der Google Cloud Console das Menü > APIs und Dienste > Bibliothek auf.

      Zur Bibliothek

    2. Suchen Sie nach der Google Picker API und der Google Drive API und aktivieren Sie beide.

  • API-Schlüssel erstellen :

    1. Rufen Sie in der Google Cloud Console das Menü > APIs und Dienste > Anmeldedaten auf.

      Zu den Anmeldedaten

    2. Klicken Sie auf Anmeldedaten erstellen > API-Schlüssel.

    3. (Empfohlen) Wenn Sie Ihren API-Schlüssel mit Einschränkungen schützen möchten, klicken Sie auf API-Schlüssel bearbeiten:

      • Anwendungseinschränkungen: Wählen Sie unter Anwendungseinschränkung festlegen die Option Websites aus. Fügen Sie unter Website-Einschränkungen den Ursprung Ihrer App (z. B. https://example.com/* oder http://localhost/*) und https://docs.google.com/* der Liste der angegebenen Websites hinzu. Da der Google Picker in einem Iframe auf docs.google.com gerendert wird, schlagen Anfragen mit dem Fehler API developer key is invalid fehl, wenn https://docs.google.com/* nicht zulässig ist.

      • API-Einschränkungen: Wählen Sie unter API-Einschränkungen die Option Schlüssel einschränken und dann sowohl die Google Picker API als auch die Google Drive API aus.

  • OAuth 2.0-Client-ID erstellen :

    1. Rufen Sie in der Google Cloud Console das Menü > APIs und Dienste > Anmeldedaten auf.

    2. Klicken Sie auf Anmeldedaten erstellen > OAuth-Client-ID.

    3. Wählen Sie Webanwendung aus und fügen Sie Ihre autorisierten JavaScript-Quellen hinzu.

  • App-ID suchen :

    1. Rufen Sie in der Google Cloud Console das Menü > IAM und Verwaltung > Einstellungen auf.

      Einstellungen aufrufen

    2. Verwenden Sie die Projektnummer für die App-ID.

Sowohl die Client-ID als auch die App-ID müssen sich im selben Google Cloud-Projekt befinden, da sie verwendet werden, um den Zugriff auf die Dateien eines Nutzers zu autorisieren.

Bildauswahl-App in einem HTML-Dokument erstellen

Das folgende Codebeispiel zeigt, wie Sie eine Bildauswahl oder eine Upload-Seite verwenden, die Nutzer über eine Schaltfläche in einer Webanwendung öffnen können.

Erstellen Sie ein Standard-HTML-Dokument, um den Google Picker zu hosten:

<!DOCTYPE html>
<html>
<head>
  <title>Google Picker API Quickstart</title>
  <meta charset="utf-8" />
</head>
<body>
<p>Google Picker API Quickstart</p>

<!--Add buttons to initiate auth sequence and sign out.-->
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

<pre id="content" style="white-space: pre-wrap;"></pre>

Rufen Sie die Google Picker API mit JavaScript auf:

<script type="text/javascript">
  /* exported gapiLoaded */
  /* exported gisLoaded */
  /* exported handleAuthClick */
  /* exported handleSignoutClick */

  // Authorization scopes required by the API; multiple scopes can be
  // included, separated by spaces.
  const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';

  // Replace with your client ID and API key from https://console.cloud.google.com/.
  const CLIENT_ID = 'CLIENT_ID';
  const API_KEY = 'API_KEY';

  // Replace with your project number from https://console.cloud.google.com/.
  const APP_ID = 'APP_ID';

  let tokenClient;
  let accessToken = null;
  let pickerInited = false;
  let gisInited = false;

  document.getElementById('authorize_button').style.visibility = 'hidden';
  document.getElementById('signout_button').style.visibility = 'hidden';

  /**
   * Callback after api.js is loaded.
   */
  function gapiLoaded() {
    gapi.load('client:picker', initializePicker);
  }

  /**
   * Callback after the API client is loaded. Loads the
   * discovery doc to initialize the API.
   */
  async function initializePicker() {
    await gapi.client.load('https://www.googleapis.com/discovery/v1/apis/drive/v3/rest');
    pickerInited = true;
    maybeEnableButtons();
  }

  /**
   * Callback after Google Identity Services are loaded.
   */
  function gisLoaded() {
    tokenClient = google.accounts.oauth2.initTokenClient({
      client_id: CLIENT_ID,
      scope: SCOPES,
      callback: '', // defined later
    });
    gisInited = true;
    maybeEnableButtons();
  }

  /**
   * Enables user interaction after all libraries are loaded.
   */
  function maybeEnableButtons() {
    if (pickerInited && gisInited) {
      document.getElementById('authorize_button').style.visibility = 'visible';
    }
  }

  /**
   *  Sign in the user upon button click.
   */
  function handleAuthClick() {
    tokenClient.callback = async (response) => {
      if (response.error !== undefined) {
        throw (response);
      }
      accessToken = response.access_token;
      document.getElementById('signout_button').style.visibility = 'visible';
      document.getElementById('authorize_button').innerText = 'Refresh';
      await createPicker();
    };

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

  /**
   *  Sign out the user upon button click.
   */
  function handleSignoutClick() {
    if (accessToken) {
      google.accounts.oauth2.revoke(accessToken);
      accessToken = null;
      document.getElementById('content').innerText = '';
      document.getElementById('authorize_button').innerText = 'Authorize';
      document.getElementById('signout_button').style.visibility = 'hidden';
    }
  }

  /**
   *  Create and render a Google Picker object for searching images.
   */
  function createPicker() {
    const view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes('image/png,image/jpeg,image/jpg');
    const picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setDeveloperKey(API_KEY)
        .setAppId(APP_ID)
        .setOAuthToken(accessToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setCallback(pickerCallback)
        .build();
    picker.setVisible(true);
  }

  /**
   * Displays the file details of the user's selection.
   * @param {object} data - Contains the user selection from the Google Picker.
   */
  async function pickerCallback(data) {
    if (data.action === google.picker.Action.PICKED) {
      let text = `Google Picker response: \n${JSON.stringify(data, null, 2)}\n`;
      const selectedDoc = data[google.picker.Response.DOCUMENTS][0];
      const fileId = selectedDoc[google.picker.Document.ID];
      console.log(fileId);
      const res = await gapi.client.drive.files.get({
        'fileId': fileId,
        'fields': '*',
      });
      text += `Drive API response for first document: \n${JSON.stringify(res.result, null, 2)}\n`;
      window.document.getElementById('content').innerText = text;
    }
  }
</script>
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>

Ersetzen Sie Folgendes:

Mit der Funktion setOAuthToken kann eine App das aktuelle Autorisierungstoken verwenden, um zu bestimmen, welches Google-Konto der Google Picker zum Anzeigen der Dateien verwendet. Wenn ein Nutzer mit mehreren Google-Konten angemeldet ist, kann der Google Picker die Dateien des entsprechenden autorisierten Kontos anzeigen.

Schließen Sie das HTML-Dokument:

</body>
</html>

Nachdem die Datei-ID beim Öffnen von Dateien vom Google Picker abgerufen wurde, kann eine App die Metadaten der Datei abrufen und den Dateiinhalt herunterladen, wie in der get Methode der files Ressource beschrieben.

Bildauswahl-Objekt erstellen

Das folgende Codebeispiel zeigt die Kernlogik zum Erstellen, Rendern und Verarbeiten der Google Picker API, um eine Bildauswahl zu erstellen.

Rufen Sie die Google Picker API mit JavaScript auf:

/**
 * Create and render a Google Picker object for searching images.
 */
function createPicker() {
  // Define what types of files the Picker should show (e.g., images)
  const view = new google.picker.View(google.picker.ViewId.DOCS);
  view.setMimeTypes('image/png,image/jpeg,image/jpg');

  // Build and display the picker.
  const picker = new google.picker.PickerBuilder()
      .enableFeature(google.picker.Feature.NAV_HIDDEN)
      .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
      .setDeveloperKey('API_KEY')
      .setAppId('APP_ID')
      .setOAuthToken('ACCESS_TOKEN')
      .addView(view)
      .addView(new google.picker.DocsUploadView()) // Adds an upload tab
      .setCallback(pickerCallback)
      .build();

  picker.setVisible(true);
}

/**
 * Displays the file details of the user's selection.
 * @param {object} data - Contains the user selection from the Google Picker.
 */
async function pickerCallback(data) {
  if (data.action === google.picker.Action.PICKED) {
    let text = `Google Picker response: \n${JSON.stringify(data, null, 2)}\n`;

    // Extract the ID of the first selected document.
    const selectedDoc = data[google.picker.Response.DOCUMENTS][0];
    const fileId = selectedDoc[google.picker.Document.ID];
    console.log("Selected File ID:", fileId);

    // Optional: Fetch metadata using the Drive API based on the selected file ID.
    const res = await gapi.client.drive.files.get({
      'fileId': fileId,
      'fields': '*',
    });

    text += `Drive API response for first document: \n${JSON.stringify(res.result, null, 2)}\n`;
    // Update your UI with the results
    console.log(text);
  }
}

Ersetzen Sie Folgendes: