Pemilih Google adalah dialog "File Terbuka" untuk informasi yang disimpan di Google Drive. Pemilih Google memiliki fitur berikut:
- Tampilan dan nuansa yang mirip dengan UI Google Drive.
- Beberapa tampilan yang menampilkan pratinjau dan thumbnail file Drive.
- Jendela modal inline, sehingga pengguna tidak pernah meninggalkan aplikasi utama.
Google Picker API adalah JavaScript API yang dapat Anda gunakan di aplikasi web untuk memungkinkan pengguna membuka atau mengupload file Drive.
Persyaratan permohonan
Aplikasi yang menggunakan Google Picker harus mematuhi semua Persyaratan Layanan yang sudah ada. Yang terpenting, Anda harus mengidentifikasi diri dalam permintaan dengan benar.
Anda juga harus memiliki project Google Cloud.Menyiapkan lingkungan Anda
Untuk mulai menggunakan Google Picker API, Anda harus menyiapkan lingkungan Anda.
Mengaktifkan API
Sebelum menggunakan Google API, Anda perlu mengaktifkannya di project Google Cloud. Anda dapat mengaktifkan satu atau beberapa API dalam satu project Google Cloud.
Di Google Cloud Console, aktifkan Google Picker API.
Membuat kunci API
Kunci API adalah string panjang yang berisi huruf besar dan kecil, angka, garis bawah, dan tanda hubung, seperti AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe.
Metode autentikasi ini digunakan untuk mengakses data yang tersedia secara anonim, seperti file Google Workspace yang dibagikan menggunakan setelan berbagi "Siapa saja di Internet
yang memiliki link ini". Untuk mengetahui detail selengkapnya, lihat
Mengautentikasi menggunakan kunci API.
Untuk membuat kunci API:
- Di Google Cloud Console, buka Menu > API & Layanan > Kredensial.
- Klik Create credentials > API key.
- Kunci API baru Anda akan ditampilkan.
- Klik Salin untuk menyalin kunci API Anda agar dapat digunakan di kode aplikasi Anda. Kunci API juga dapat ditemukan di bagian "Kunci API" pada kredensial project Anda.
- Klik Restrict key untuk memperbarui setelan lanjutan dan membatasi penggunaan kunci API Anda. Untuk detail selengkapnya, lihat Menerapkan pembatasan kunci API.
Melakukan otorisasi kredensial untuk aplikasi web
Untuk mengautentikasi sebagai pengguna akhir dan mengakses data pengguna di aplikasi, Anda harus membuat satu atau beberapa Client ID OAuth 2.0. Client ID digunakan untuk mengidentifikasi satu aplikasi ke server OAuth Google. Jika aplikasi Anda berjalan di beberapa platform, Anda harus membuat client ID terpisah untuk setiap platform.
- Di Google Cloud Console, buka Menu > API & Layanan > Kredensial.
- Klik Buat Kredensial > Client ID OAuth.
- Klik Jenis aplikasi > Aplikasi web.
- Di kolom Name, ketik nama untuk kredensial tersebut. Nama ini hanya ditampilkan di Google Cloud Console.
- Tambahkan URI resmi yang terkait dengan aplikasi Anda:
- Aplikasi sisi klien (JavaScript)–Di bagian Asal JavaScript resmi, klik Tambahkan URI. Kemudian, masukkan URI yang akan digunakan untuk permintaan browser. Ini mengidentifikasi domain tempat aplikasi Anda dapat mengirim permintaan API ke server OAuth 2.0.
- Aplikasi sisi server (Java, Python, dan lainnya)–Di bagian URI pengalihan yang sah, klik Tambahkan URI. Kemudian, masukkan URI endpoint yang dapat digunakan oleh server OAuth 2.0 untuk mengirim respons.
- Klik Create. Layar klien OAuth yang dibuat akan muncul, yang menunjukkan Client ID dan Rahasia klien baru Anda.
Catat Client ID. Rahasia klien tidak digunakan untuk aplikasi Web.
- Klik OK. Kredensial yang baru dibuat muncul di Client ID OAuth 2.0.
Picker. Untuk meminta token akses, lihat Menggunakan OAuth 2.0 untuk Mengakses Google API.
Menampilkan Google Picker
Bagian selanjutnya dari panduan ini membahas cara memuat dan menampilkan Google Picker dari aplikasi web. Untuk melihat contoh lengkap, buka contoh kode Pemilih Google.Memuat library Google Picker
Untuk memuat library Google Picker, panggil gapi.load() dengan nama library
dan fungsi callback yang akan dipanggil setelah pemuatan berhasil:
<script>
let tokenClient;
let accessToken = null;
let pickerInited = false;
let gisInited = false;
// Use the API Loader script to load google.picker
function onApiLoad() {
gapi.load('picker', onPickerApiLoad);
}
function onPickerApiLoad() {
pickerInited = true;
}
function gisLoaded() {
// TODO(developer): Replace with your client ID and required scopes.
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: 'CLIENT_ID',
scope: 'SCOPES',
callback: '', // defined later
});
gisInited = true;
}
</script>
<!-- Load the Google API Loader script. -->
<script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
Ganti kode berikut:
CLIENT_ID: Client ID aplikasi web Anda.SCOPES: Satu atau beberapa cakupan OAuth 2.0 yang harus diminta untuk mengakses Google API, bergantung pada tingkat akses yang diperlukan. Untuk informasi selengkapnya, lihat Cakupan OAuth 2.0 untuk Google API.
Library JavaScript google.accounts.oauth2 membantu Anda meminta izin pengguna dan memperoleh token akses untuk menggunakan data pengguna.
Metode initTokenClient() menginisialisasi klien token baru dengan client ID aplikasi web Anda. Untuk mengetahui informasi selengkapnya, lihat Menggunakan model token.
Fungsi onApiLoad() memuat library Pemilih Google. Fungsi callback onPickerApiLoad() dipanggil setelah library Google Picker berhasil dimuat.
Menampilkan Google Picker
Fungsi createPicker() di bawah ini memeriksa untuk memastikan Google Picker API selesai dimuat dan bahwa token OAuth dibuat. Fungsi ini kemudian membuat instance Google Picker dan menampilkannya:
// Create and render a Google Picker object for selecting from Drive.
function createPicker() {
const showPicker = () => {
// TODO(developer): Replace with your API key
const picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.DOCS)
.setOAuthToken(accessToken)
.setDeveloperKey('API_KEY')
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
}
// Request an access token.
tokenClient.callback = async (response) => {
if (response.error !== undefined) {
throw (response);
}
accessToken = response.access_token;
showPicker();
};
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: ''});
}
}
Untuk membuat instance Google Picker, Anda harus membuat objek Picker menggunakan PickerBuilder. PickerBuilder
mengambil View, token OAuth, kunci developer, dan fungsi callback untuk memanggil setelah berhasil (pickerCallback).
Objek Picker merender View satu per satu. Tentukan setidaknya satu tampilan,
baik oleh ViewId (google.picker.ViewId.*) atau dengan membuat instance
jenis (google.picker.*View). Tentukan tampilan menurut jenis untuk kontrol
tambahan atas cara tampilan dirender.
Jika lebih dari satu tampilan ditambahkan ke Google Picker, pengguna dapat beralih dari satu tampilan ke tampilan lain dengan
mengklik tab di sebelah kiri. Tab dapat dikelompokkan secara logis dengan objek ViewGroup.
Mengimplementasikan callback Google Picker
Callback Google Picker dapat digunakan untuk bereaksi terhadap interaksi pengguna di Google Picker, seperti
memilih file atau menekan Cancel. Objek Response
menyampaikan informasi tentang pilihan pengguna.
// A simple callback implementation.
function pickerCallback(data) {
let url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
let doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
let message = `You picked: ${url}`;
document.getElementById('result').innerText = message;
}
Callback menerima objek data yang dienkode JSON. Objek ini berisi
Action
yang dilakukan pengguna dengan Google Picker (google.picker.Response.ACTION).
Jika pengguna memilih item Document,
array google.picker.Response.DOCUMENTS juga akan
diisi. Dalam contoh ini, google.picker.Document.URL ditampilkan di halaman utama.
Untuk mengetahui detail tentang kolom data, lihat Referensi JSON.
Memfilter jenis file tertentu
Gunakan ViewGroup sebagai cara untuk memfilter item tertentu.
Contoh kode berikut menunjukkan bagaimana subtampilan "Google Drive" hanya menampilkan dokumen dan presentasi.
let picker = new google.picker.PickerBuilder()
.addViewGroup(
new google.picker.ViewGroup(google.picker.ViewId.DOCS)
.addView(google.picker.ViewId.DOCUMENTS)
.addView(google.picker.ViewId.PRESENTATIONS))
.setOAuthToken(oauthToken)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Untuk daftar jenis tampilan yang valid, lihat ViewId.
Menyesuaikan tampilan Pemilih Google
Anda dapat menggunakan objek Feature untuk mengaktifkan atau menonaktifkan fitur untuk berbagai tampilan.
Untuk menyesuaikan tampilan jendela Pemilih Google, gunakan
fungsi PickerBuilder.enableFeature() atau PickerBuilder.disableFeature(). Misalnya, jika Anda hanya memiliki satu tampilan, Anda mungkin ingin menyembunyikan
panel navigasi (Feature.NAV_HIDDEN) untuk memberi pengguna lebih banyak ruang untuk melihat item.
Contoh kode berikut menunjukkan contoh pemilih penelusuran spreadsheet menggunakan fitur ini:
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.SPREADSHEETS)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Merender Google Picker dalam bahasa lain
Tentukan bahasa UI dengan menyediakan lokalitas ke instance PickerBuilder
menggunakan metode setLocale(locale).
Contoh kode berikut menunjukkan cara menyetel lokalitas ke bahasa Prancis:
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.IMAGE_SEARCH)
.setLocale('fr')
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Berikut adalah daftar lokal yang saat ini didukung:
afamarbgbncacs |
dadeelenen-GBeses-419 |
eteufafifilfrfr-CA |
glguhihrhuidis |
itiwjaknkoltlv |
mlmrmsnlnoplpt-BR |
pt-PTroruskslsrsv |
swtatethtrukur |
vizh-CNzh-HKzh-TWzu |