این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

استفاده از ویژگی‌های Google Picker API در برنامه‌های وب

این سند نحوه استفاده از ویژگی‌های API انتخابگر گوگل مانند فعال کردن انتخاب چندگانه، پنهان کردن پنل ناوبری و انتخاب حساب کاربری با توکن OAuth 2.0 فعلی برنامه را توضیح می‌دهد.

پیش‌نیازها

برای این مثال، باید چندین مورد را مشخص کنید:

برای یافتن شناسه کلاینت و کلید API :
1. در کنسول گوگل کلود، به Menu > APIs & Services > Credentials بروید.
  به اعتبارنامه‌ها بروید
برای پیدا کردن شناسه برنامه :
1. در کنسول گوگل کلود، به Menu > IAM & Admin > Settings بروید.
  به تنظیمات بروید
2. برای شناسه برنامه از شماره پروژه استفاده کنید.

یک پروژه گوگل کلود باید شامل هر دو شناسه کلاینت و شناسه برنامه باشد، زیرا از آن برای مجوز دسترسی به فایل‌های کاربر استفاده می‌شود.

یک برنامه انتخاب تصویر در یک سند 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>

برای فراخوانی 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 : اعتبارنامه‌های کلید API که ایجاد کرده‌اید.
APP_ID : شماره پروژه از پروژه Google Cloud.

تابع setOAuthToken به یک برنامه اجازه می‌دهد تا از توکن احراز هویت فعلی برای تعیین اینکه Google Picker از کدام حساب گوگل برای نمایش فایل‌ها استفاده می‌کند، استفاده کند. اگر کاربری با چندین حساب گوگل وارد سیستم شده باشد، Google Picker می‌تواند فایل‌های حساب مجاز مربوطه را نمایش دهد.

سند HTML را ببندید:

</body>
</html>

پس از دریافت شناسه فایل از Google Picker هنگام باز کردن فایل‌ها، یک برنامه می‌تواند فراداده فایل را دریافت کرده و محتوای فایل را همانطور که در متد get از منبع files توضیح داده شده است، دانلود کند.

ایجاد یک شیء انتخابگر تصویر

نمونه کد زیر منطق اصلی ساخت، رندر و مدیریت API انتخابگر گوگل (Google Picker) برای ایجاد یک انتخابگر تصویر را نشان می‌دهد.