Dokumen ini menjelaskan cara menggunakan fitur Google Picker API seperti mengaktifkan multi-pilihan, menyembunyikan panel navigasi, dan memilih akun pengguna dengan token OAuth 2.0 aplikasi saat ini.
Prasyarat
Untuk contoh ini, Anda perlu mengonfigurasi hal berikut di project Google Cloud Anda:
Aktifkan API: Aktifkan Google Picker API dan Google Drive API:
Di Konsol Google Cloud, buka Menu > APIs & Services > Library.
Telusuri dan aktifkan Google Picker API dan Google Drive API.
Membuat kunci API:
Di konsol Google Cloud, buka Menu > APIs & Services > Credentials.
Klik Create credentials > API key.
(Direkomendasikan) Untuk mengamankan kunci API Anda dengan pembatasan, klik Edit API key:
Pembatasan aplikasi: Di bagian Tetapkan pembatasan aplikasi, pilih Situs. Di Batasan situs, tambahkan asal aplikasi Anda (misalnya,
https://example.com/*atauhttp://localhost/*) danhttps://docs.google.com/*ke daftar situs yang ditentukan. Karena Google Picker dirender di iframe yang dihosting didocs.google.com, permintaan akan gagal dengan errorAPI developer key is invalidjikahttps://docs.google.com/*tidak diizinkan.Pembatasan API: Di bagian Pembatasan API, pilih Batasi kunci, lalu pilih Google Picker API dan Google Drive API.
Buat Client ID OAuth 2.0:
Di konsol Google Cloud, buka Menu > APIs & Services > Credentials.
Klik Buat kredensial > Client ID OAuth.
Pilih Aplikasi web dan tambahkan asal JavaScript resmi Anda.
Temukan ID Aplikasi:
Di konsol Google Cloud, buka Menu > IAM & Admin > Setelan.
Gunakan nomor project untuk ID aplikasi.
Project cloud Google Cloud yang sama harus berisi client ID dan ID aplikasi karena digunakan untuk mengizinkan akses ke file pengguna.
Membuat aplikasi pemilih gambar dalam dokumen HTML
Contoh kode berikut menunjukkan cara menggunakan pemilih gambar atau halaman upload yang dapat dibuka pengguna dari tombol di aplikasi web.
Buat dokumen HTML standar untuk menghosting Pemilih Google:
<!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>
Gunakan JavaScript untuk memanggil 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>
Ganti kode berikut:
- CLIENT_ID: client ID yang Anda buat saat Anda mengizinkan kredensial OAuth 2.0 untuk aplikasi web.
- API_KEY: kredensial kunci API yang Anda buat.
- APP_ID: nomor project dari project Google Cloud.
Fungsi setOAuthToken memungkinkan aplikasi menggunakan token autentikasi saat ini untuk menentukan Akun Google mana yang digunakan Google Picker untuk menampilkan file. Jika pengguna login dengan beberapa Akun Google, Pemilih Google dapat menampilkan file dari akun yang berwenang dan sesuai.
Tutup dokumen HTML:
</body>
</html>
Setelah mendapatkan ID file dari Pemilih Google saat membuka file, aplikasi kemudian dapat mengambil metadata file dan mendownload konten file seperti yang dijelaskan dalam metode get dari resource files.
Membuat objek pemilih gambar
Contoh kode berikut menunjukkan logika inti untuk membuat, merender, dan menangani Google Picker API guna membuat pemilih gambar.
Gunakan JavaScript untuk memanggil 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);
}
}
Ganti kode berikut:
- API_KEY: kredensial kunci API yang Anda buat.
- APP_ID: nomor project dari project Google Cloud.
- ACCESS_TOKEN: Token OAuth 2.0 aplikasi Anda.