Korzystanie z funkcji interfejsu Google Picker API w aplikacjach internetowych

Z tego dokumentu dowiesz się, jak korzystać z funkcji Google Picker API, takich jak włączanie wyboru wielokrotnego, ukrywanie panelu nawigacyjnego i wybieranie konta użytkownika za pomocą bieżącego tokena OAuth 2.0 aplikacji.

Wymagania wstępne

W tym przykładzie musisz skonfigurować w projekcie Google Cloud te elementy:

  • Włącz interfejsy API: włącz Google Picker API i Google Drive API:

    1. W konsoli Google Cloud otwórz Menu > Interfejsy API i usługi > Biblioteka.

      Otwórz Bibliotekę

    2. Wyszukaj i włącz Google Picker API i Google Drive API.

  • Utwórz klucz interfejsu API:

    1. W konsoli Google Cloud otwórz Menu > Interfejsy API i usługi > Dane logowania.

      Przejdź do danych logowania

    2. Kliknij Utwórz dane logowania > Klucz interfejsu API.

    3. (Zalecane) Aby zabezpieczyć klucz interfejsu API za pomocą ograniczeń, kliknij Edytuj klucz interfejsu API:

      • Ograniczenia aplikacji: w sekcji Ustaw ograniczenie aplikacji wybierz Witryny. W sekcji Ograniczenia dostępu do stron dodaj do listy określonych witryn źródło aplikacji (np. https://example.com/* lub http://localhost/*) oraz https://docs.google.com/* Ponieważ Google Picker renderuje się w elemencie iframe hostowanym na docs.google.com, żądania kończą się niepowodzeniem z powodu błędu API developer key is invalid, jeśli https://docs.google.com/* nie jest dozwolony.

      • Ograniczenia interfejsu API: w sekcji Ograniczenia interfejsu API wybierz Ogranicz klucz, a następnie wybierz Google Picker API i Google Drive API.

  • Utwórz identyfikator klienta OAuth 2.0:

    1. W konsoli Google Cloud otwórz Menu > Interfejsy API i usługi > Dane logowania.

    2. Kliknij Utwórz dane logowania > Identyfikator klienta OAuth.

    3. Wybierz Aplikacja internetowa i dodaj autoryzowane źródła JavaScript.

  • Znajdź identyfikator aplikacji:

    1. W konsoli Google Cloud otwórz Menu > Administracja > Ustawienia.

      Otwórz ustawienia

    2. Jako identyfikator aplikacji użyj numeru projektu.

Ten sam projekt w chmurze Google musi zawierać zarówno identyfikator klienta, jak i identyfikator aplikacji, ponieważ jest używany do autoryzowania dostępu do plików użytkownika.

Tworzenie aplikacji do wybierania obrazów w dokumencie HTML

Poniższy przykładowy kod pokazuje, jak używać selektora obrazów lub strony przesyłania, którą użytkownicy mogą otworzyć za pomocą przycisku w aplikacji internetowej.

Utwórz standardowy dokument HTML, w którym będzie hostowany Google Picker:

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

Użyj JavaScript, aby wywołać Google Picker API:

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

Zastąp te elementy:

Funkcja setOAuthToken umożliwia aplikacji używanie bieżącego tokena autoryzacji do określania, którego konta Google ma używać Google Picker do wyświetlania plików. Jeśli użytkownik jest zalogowany na kilka kont Google, Google Picker może wyświetlać pliki odpowiedniego autoryzowanego konta.

Zamknij dokument HTML:

</body>
</html>

Po uzyskaniu identyfikatora pliku z Google Picker podczas otwierania plików, aplikacja może pobrać metadane pliku i pobrać jego zawartość zgodnie z opisem w metodzie get zasobu files.

Tworzenie obiektu selektora obrazów

Poniższy przykładowy kod pokazuje podstawową logikę tworzenia, renderowania i obsługi Google Picker API w celu utworzenia selektora obrazów.

Użyj JavaScript, aby wywołać Google Picker API:

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

Zastąp te elementy: