Sử dụng các tính năng của Google Picker API trong ứng dụng web

Tài liệu này giải thích cách sử dụng các tính năng của Google Picker API, chẳng hạn như bật chế độ chọn nhiều, ẩn ngăn điều hướng và chọn tài khoản người dùng bằng mã thông báo OAuth 2.0 hiện tại của ứng dụng.

Điều kiện tiên quyết

Trong ví dụ này, bạn cần định cấu hình những nội dung sau trong dự án Google Cloud:

  • Bật các API: Bật cả Google Picker API và API Google Drive:

    1. Trong Google Cloud Console, hãy chuyển đến phần Trình đơn > API và dịch vụ > Thư viện.

      Chuyển đến Thư viện

    2. Tìm kiếm và bật cả Google Picker API và API Google Drive.

  • Tạo khoá API:

    1. Trong Google Cloud Console, hãy chuyển đến phần Trình đơn > API và dịch vụ > Thông tin xác thực.

      Chuyển đến phần Thông tin đăng nhập

    2. Nhấp vào Tạo thông tin xác thực > Khoá API.

    3. (Nên dùng) Để bảo mật khoá API bằng các quy tắc hạn chế, hãy nhấp vào Chỉnh sửa khoá API:

      • Hạn chế cho ứng dụng: Trong phần Đặt hạn chế cho ứng dụng, hãy chọn Trang web. Trong phần Hạn chế về trang web, hãy thêm nguồn gốc của ứng dụng (ví dụ: https://example.com/* hoặc http://localhost/*) và https://docs.google.com/* vào danh sách các trang web được chỉ định. Vì Google Picker hiển thị trong một iframe được lưu trữ trên docs.google.com, nên các yêu cầu sẽ không thành công với lỗi API developer key is invalid nếu https://docs.google.com/* không được phép.

      • API restrictions (Hạn chế cho API): Trong mục API restrictions (Hạn chế cho API), hãy chọn Restrict key (Hạn chế cho khoá), sau đó chọn cả Google Picker API và API Google Drive.

  • Tạo mã ứng dụng OAuth 2.0:

    1. Trong Google Cloud Console, hãy chuyển đến phần Trình đơn > API và dịch vụ > Thông tin xác thực.

    2. Nhấp vào Tạo thông tin xác thực > Mã ứng dụng OAuth.

    3. Chọn Ứng dụng web rồi thêm các nguồn gốc JavaScript được uỷ quyền.

  • Tìm mã nhận dạng ứng dụng:

    1. Trong Bảng điều khiển Google Cloud, hãy chuyển đến phần Trình đơn > IAM và quản trị > Cài đặt.

      Chuyển đến mục Cài đặt

    2. Sử dụng số dự án cho mã ứng dụng.

Cùng một dự án trên đám mây của Google phải chứa cả mã ứng dụng khách và mã ứng dụng vì dự án này được dùng để uỷ quyền truy cập vào các tệp của người dùng.

Tạo ứng dụng chọn hình ảnh trong tài liệu HTML

Mẫu mã sau đây cho thấy cách sử dụng một bộ chọn hình ảnh hoặc trang tải lên mà người dùng có thể mở từ một nút trong ứng dụng web.

Tạo một tài liệu HTML tiêu chuẩn để lưu trữ 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>

Sử dụng JavaScript để gọi 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>

Thay thế nội dung sau:

Hàm setOAuthToken cho phép một ứng dụng sử dụng mã thông báo uỷ quyền hiện tại để xác định Tài khoản Google mà Google Picker dùng để hiển thị các tệp. Nếu người dùng đăng nhập bằng nhiều Tài khoản Google, thì Google Picker có thể hiển thị các tệp của tài khoản được uỷ quyền thích hợp.

Đóng tài liệu HTML:

</body>
</html>

Sau khi lấy mã nhận dạng tệp từ Google Picker khi mở tệp, ứng dụng có thể tìm nạp siêu dữ liệu tệp và tải nội dung tệp xuống như mô tả trong phương thức get của tài nguyên files.

Tạo một đối tượng bộ chọn hình ảnh

Mã mẫu sau đây cho thấy logic cốt lõi để tạo, kết xuất và xử lý Google Picker API nhằm tạo một bộ chọn hình ảnh.

Sử dụng JavaScript để gọi 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);
  }
}

Thay thế nội dung sau: