تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

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

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

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

في هذا المثال، عليك ضبط ما يلي في مشروعك على Google Cloud:

تفعيل واجهات برمجة التطبيقات: فعِّل كلاً من Google Picker API وGoogle Drive API:
1. في Google Cloud Console، انتقِل إلى "القائمة" > واجهات برمجة التطبيقات والخدمات > المكتبة.
  
  الانتقال إلى المكتبة
2. ابحث عن Google Picker API وGoogle Drive API وفعِّلهما.
إنشاء مفتاح واجهة برمجة تطبيقات:
1. في Google Cloud Console، انتقِل إلى "القائمة" > واجهات برمجة التطبيقات والخدمات > بيانات الاعتماد.
  
  الانتقال إلى "بيانات الاعتماد"
2. انقر على إنشاء بيانات اعتماد > مفتاح واجهة برمجة التطبيقات.
3. (إجراء مُقترَح) لتأمين مفتاح واجهة برمجة التطبيقات من خلال القيود، انقر على تعديل مفتاح واجهة برمجة التطبيقات:
  - قيود التطبيقات: ضمن وضع قيود على التطبيقات، اختَر المواقع الإلكترونية. في القيود على المواقع الإلكترونية، أضِف مصدر تطبيقك (على سبيل المثال، https://example.com/* أو http://localhost/*) و https://docs.google.com/* إلى قائمة المواقع الإلكترونية المحدّدة. بما أنّ Google Picker يعرض المحتوى في إطار iframe مستضاف على docs.google.com، ستتعذّر الطلبات مع ظهور الخطأ API developer key is invalid إذا لم يكن https://docs.google.com/* مسموحًا به.
  - القيود المفروضة على واجهة برمجة التطبيقات: ضمن القيود المفروضة على واجهة برمجة التطبيقات، انقر على تقييد المفتاح، ثم اختَر كلاً من Google Picker API وGoogle Drive API.
إنشاء معرّف عميل OAuth 2.0:
1. في Google Cloud Console، انتقِل إلى "القائمة" > واجهات برمجة التطبيقات والخدمات > بيانات الاعتماد.
2. انقر على إنشاء بيانات اعتماد > معرِّف عميل OAuth.
3. اختَر تطبيق ويب وأضِف مصادر JavaScript المسموح بها.
تحديد موقع معرّف التطبيق:
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>

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

CLIENT_ID: هو معرّف العميل الذي أنشأته عند تفويض بيانات اعتماد OAuth 2.0 لتطبيق الويب.
API_KEY: بيانات اعتماد مفتاح واجهة برمجة التطبيقات التي أنشأتها.
APP_ID: رقم المشروع من مشروع Google Cloud

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

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

</body>
</html>

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

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

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