استخدام ميزات Google Picker API في تطبيقات الويب

يوضّح هذا المستند كيفية استخدام ميزات Google Picker API، مثل تفعيل ميزة الاختيار المتعدّد وإخفاء لوحة التنقّل واختيار حساب المستخدم الذي يتضمّن رمز OAuth 2.0 الحالي للتطبيق.

المتطلبات الأساسية

في هذا المثال، عليك تحديد عدة عناصر:

  • للعثور على رقم تعريف العميل ومفتاح واجهة برمجة التطبيقات:

    1. في Google Cloud Console، انتقِل إلى "القائمة" > واجهات برمجة التطبيقات والخدمات > بيانات الاعتماد.

      الانتقال إلى "بيانات الاعتماد"

  • للعثور على رقم تعريف التطبيق:

    1. في Google Cloud Console، انتقِل إلى "القائمة" > إدارة الهوية وإمكانية الوصول والمشرف > الإعدادات.

      الانتقال إلى "الإعدادات"

    2. استخدِم رقم المشروع لمعرّف التطبيق.

يجب أن يحتوي مشروع Google Cloud نفسه على رقم تعريف العميل ورقم تعريف التطبيق، لأنّه يُستخدَم لتفويض الوصول إلى ملفات المستخدم.

إنشاء تطبيق لاختيار الصور ضمن مستند HTML

توضح عينة التعليمات البرمجية التالية كيفية استخدام صفحة لاختيار الصور أو تحميلها يمكن للمستخدمين فتحها من زر في تطبيق ويب.

أنشِئ مستند HTML عاديًا لاستضافة 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>

استخدِم JavaScript لاستدعاء 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>

غيِّر القيم في السلسلة على الشكل التالي:

تسمح الدالة setOAuthToken لأحد التطبيقات باستخدام رمز التفويض الحالي لتحديد حساب Google الذي يستخدمه Google Picker لعرض الملفات. إذا كان المستخدم مسجّلاً الدخول باستخدام حسابات متعدّدة على Google، يمكن أن يعرض Google Picker ملفات الحساب المفوّض المناسب.

أغلِق مستند HTML:

</body>
</html>

بعد الحصول على رقم تعريف الملف من Google Picker عند فتح الملفات، يمكن لأحد التطبيقات جلب بيانات الملف الوصفية وتنزيل محتوى الملف كما هو موضّح في طريقة get التابعة لمورد files.

إنشاء عنصر لاختيار الصور

يوضّح نموذج الرمز البرمجي التالي المنطق الأساسي لإنشاء Google Picker API وعرضه والتعامل معه لإنشاء أداة اختيار الصور.

استخدِم JavaScript لاستدعاء 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);
  }
}

غيِّر القيم في السلسلة على الشكل التالي: