Google Picker API adalah JavaScript API yang dapat Anda gunakan di aplikasi web untuk memungkinkan pengguna memilih atau mengupload file Google Drive. Pengguna dapat memberikan izin kepada aplikasi Anda untuk mengakses Data Drive, yang memberikan cara yang aman dan terotorisasi untuk berinteraksi dengan file mereka.
Alat Pilih Google berfungsi sebagai "File Open" dialog untuk informasi yang disimpan di Drive serta memiliki fitur berikut:
- Tampilan dan nuansa yang mirip dengan UI Google Drive.
- Beberapa tampilan yang menampilkan pratinjau dan gambar thumbnail file Drive.
- Jendela modal inline, sehingga pengguna tidak pernah keluar dari aplikasi utama.
Perlu diketahui bahwa Alat Pilih Google tidak mengizinkan pengguna mengatur, memindahkan, atau menyalin file dari satu folder ke negara lain. Untuk melakukannya, Anda dapat menggunakan Google Drive API atau UI Drive.
Persyaratan permohonan
Aplikasi yang menggunakan Pemilih Google harus mematuhi semua persyaratan Persyaratan Layanan. Yang terpenting, Anda harus mengidentifikasi dengan benar diri Anda sendiri dalam permintaan Anda.
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 harus mengaktifkannya di project Google Cloud. Anda dapat mengaktifkan satu atau beberapa API dalam satu project Google Cloud.
Di konsol Google Cloud, 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 akses publik yang tersedia secara anonim
data, seperti file Google Workspace yang dibagikan menggunakan daftar "Siapa saja di Internet
dengan tautan ini" setelan berbagi. Untuk detail selengkapnya, lihat
Autentikasi menggunakan kunci API.
Untuk membuat kunci API:
- Di konsol Google Cloud, buka Menu > API & Layanan > Kredensial.
- Klik Buat kredensial > Kunci API.
- Kunci API baru Anda akan ditampilkan.
- Klik Salin menyalin kunci API untuk digunakan dalam kode aplikasi Anda. Kunci API juga bisa berupa yang ditemukan dalam "API keys" kredensial project Anda.
- Klik Restrict key untuk memperbarui setelan lanjutan dan membatasi penggunaan kunci API. Untuk detail selengkapnya, lihat Menerapkan pembatasan kunci API.
Memberi otorisasi kredensial untuk aplikasi web
Untuk mengautentikasi pengguna akhir dan mengakses data pengguna di aplikasi, Anda harus buat satu atau beberapa ID Klien OAuth 2.0. Client ID digunakan untuk mengidentifikasi aplikasi tunggal ke server OAuth Google. Jika aplikasi Anda berjalan di beberapa platform, Anda harus membuat ID klien terpisah untuk setiap platform.
- Di konsol Google Cloud, buka Menu > APIs & Layanan > Kredensial.
- Klik Create Credentials > OAuth client ID.
- Klik Jenis aplikasi > Aplikasi web.
- Di kolom Name, ketik nama untuk kredensial tersebut. Nama ini hanya ditampilkan di Konsol Google Cloud.
- Tambahkan URI yang diberi otorisasi yang terkait dengan aplikasi Anda:
- Aplikasi sisi klien (JavaScript)–Di bagian Asal JavaScript yang diotorisasi, klik Tambahkan URI. Kemudian, masukkan URI yang akan digunakan untuk permintaan browser. Atribut ini mengidentifikasi domain tempat aplikasi Anda dapat mengirim permintaan API ke server OAuth 2.0.
- Aplikasi sisi server (Java, Python, dan lainnya)–Di bagian Authorized redirect URI, klik Add URI. Kemudian, masukkan URI endpoint yang dapat menerima respons dari server OAuth 2.0.
- Klik Buat. Layar yang dibuat klien OAuth akan muncul, yang menunjukkan Client ID dan Rahasia klien baru Anda.
Catat Client-ID-nya. Rahasia klien tidak digunakan untuk aplikasi Web.
- Klik Oke. Kredensial yang baru dibuat akan muncul di bagian Client ID OAuth 2.0.
Picker
. Untuk meminta token akses, lihat Menggunakan OAuth 2.0 untuk Mengakses Google API.
Menampilkan Pemilih Google
Bagian selanjutnya dalam panduan ini mencakup cara memuat dan menampilkan Pemilih Google dari aplikasi web. Kepada melihat contoh lengkapnya, buka contoh kode Pemilih Google.Memuat library Pemilih Google
Untuk memuat library Pemilih Google, 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 perlu diminta untuk mengakses Google API, bergantung pada tingkat akses yang Anda perlukan. Untuk informasi selengkapnya, lihat Cakupan OAuth 2.0 untuk Google API.
Library JavaScript google.accounts.oauth2
membantu Anda meminta izin pengguna dan mendapatkan token akses untuk digunakan dengan 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. Tujuan
Fungsi callback onPickerApiLoad()
dipanggil setelah library Pemilih Google
berhasil dimuat.
Menampilkan Pemilih Google
Fungsi createPicker()
memeriksa untuk memastikan Google Picker API selesai memuat
token OAuth telah dibuat. Gunakan
Kolom setAppId
untuk menetapkan
ID Aplikasi Drive untuk mengizinkan aplikasi mengakses file pengguna. Fungsi ini kemudian
membuat instance Pemilih Google 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) .setAppId(APP_ID) .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 Pemilih Google, Anda harus membuat Picker
menggunakan PickerBuilder
. Tujuan
PickerBuilder
mengambil View
, token OAuth,
kunci developer, dan fungsi callback untuk memanggil keberhasilan (pickerCallback
).
Objek Picker
merender satu View
dalam satu waktu. Tentukan setidaknya satu tampilan,
baik oleh ViewId
(google.picker.ViewId.*
) atau dengan membuat instance
jenis (google.picker.*View
). Tentukan tampilan menurut jenis untuk
mengontrol cara merender tampilan.
Jika lebih dari satu tampilan ditambahkan ke Alat Pilih Google, 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 Pemilih Google
Callback Google Picker dapat digunakan untuk bereaksi terhadap interaksi pengguna di Google Picker, seperti
memilih file atau menekan Batal. 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 dijalankan pengguna dengan Pemilih Google (google.picker.Response.ACTION
).
Jika pengguna memilih item Document
,
array google.picker.Response.DOCUMENTS
juga
telah 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 tampilan "Google Drive" subtampilan 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 mengetahui daftar jenis tampilan yang valid, lihat
ViewId
.
Menyesuaikan tampilan Alat Pilih 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 hanya memiliki satu tampilan, Anda dapat menyembunyikan
panel navigasi (Feature.NAV_HIDDEN
) untuk memberikan lebih banyak ruang kepada pengguna 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 Pemilih Google dalam bahasa lain
Tentukan bahasa UI dengan memberikan lokalitas ke 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 lokalitas yang saat ini didukung:
af am ar bg bn ca cs |
da de el en en-GB es es-419 |
et eu fa fi fil fr fr-CA |
gl gu hi hr hu id is |
it iw ja kn ko lt lv |
ml mr ms nl no pl pt-BR |
pt-PT ro ru sk sl sr sv |
sw ta te th tr uk ur |
vi zh-CN zh-HK zh-TW zu |