Google Picker API, kullanıcıların Google Drive dosyalarını seçmesine veya yüklemesine izin vermek için web uygulamalarınızda kullanabileceğiniz bir JavaScript API'dir. Kullanıcılar, uygulamalarınıza Drive verilerine erişme izni vererek dosyalarıyla güvenli ve yetkili bir şekilde etkileşim kurabilir.
Google Seçici, Drive'da depolanan bilgiler için "Dosya Aç" iletişim kutusu görevi görür ve çeşitli özelliklere sahiptir:
- Google Drive kullanıcı arayüzüne benzer bir görünüm ve tarz.
- Drive dosyalarının önizlemelerini ve küçük resimlerini gösteren çeşitli görünümler.
- Satır içi bir modal pencere olduğundan kullanıcılar ana uygulamadan hiç ayrılmaz.
Google Seçici'nin, kullanıcıların dosyaları bir klasörden diğerine düzenlemesine, taşımasına veya kopyalamasına izin vermediğini unutmayın. Dosyaları yönetmek için Google Drive API'yi veya Drive kullanıcı arayüzünü kullanmanız gerekir.
Ön koşullar
Google Seçici'yi kullanan uygulamalar, mevcut tüm Hizmet Şartları'na uymalıdır. En önemlisi, isteklerinizde kendinizi doğru şekilde tanımlamanız gerekir.
Ayrıca bir Google Cloud projeniz olmalıdır.
Ortamınızı ayarlama
Google Picker API'yi kullanmaya başlamak için ortamınızı ayarlamanız gerekir.
API'yi etkinleştirme
Google API'lerini kullanmadan önce bir Google Cloud projesinde etkinleştirmeniz gerekir. Tek bir Google Cloud projesinde bir veya daha fazla API'yi etkinleştirebilirsiniz.Google Cloud Console'da Google Picker API'yi etkinleştirin.
API anahtarı oluşturma
API anahtarı, büyük ve küçük harfler, sayılar, alt çizgiler ve kısa çizgiler içeren uzun bir dizedir (ör. AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe).
Bu kimlik doğrulama yöntemi, "İnternette bu bağlantıya sahip olan herkes" paylaşım ayarı kullanılarak paylaşılan Google Workspace dosyaları gibi herkese açık veriye anonim olarak erişmek için kullanılır. Daha fazla bilgi için API anahtarlarını yönetme başlıklı makaleyi inceleyin.
API anahtarı oluşturmak için:
- Google Cloud Console'da Menü > API'ler ve Hizmetler > Kimlik Bilgileri'ne gidin.
- Kimlik bilgileri oluştur > API anahtarı'nı tıklayın.
- Yeni API anahtarınız gösterilir.
- Uygulamanızın kodunda kullanmak üzere API anahtarınızı kopyalamak için Kopyala'yı tıklayın. API anahtarını, projenizin kimlik bilgilerinin "API Anahtarları" bölümünde de bulabilirsiniz.
- Yetkisiz kullanımı önlemek için API anahtarının nerede ve hangi API'ler için kullanılabileceğini kısıtlamanızı öneririz. Daha fazla bilgi için API kısıtlamaları ekleme başlıklı makaleyi inceleyin.
Web uygulaması için kimlik bilgilerini yetkilendirme
Uygulamanızda son kullanıcıların kimliğini doğrulamak ve kullanıcı verilerine erişmek için bir veya daha fazla OAuth 2.0 istemci kimliği oluşturmanız gerekir. İstemci kimliği, tek bir uygulamanın Google OAuth sunucularına tanıtılması için kullanılır. Uygulamanız birden fazla platformda çalışıyorsa her platform için ayrı bir istemci kimliği oluşturmanız gerekir.- İstemci tarafı uygulamaları (JavaScript): Yetkilendirilmiş JavaScript kaynakları bölümünde URI ekle'yi tıklayın. Ardından, tarayıcı isteklerinde kullanılacak bir URI girin. Bu, uygulamanızın OAuth 2.0 sunucusuna API istekleri gönderebileceği alanları tanımlar.
- Sunucu tarafı uygulamaları (Java, Python vb.): Yetkilendirilmiş yönlendirme URI'leri bölümünde URI ekle'yi tıklayın. Ardından, OAuth 2.0 sunucusunun yanıt gönderebileceği bir uç nokta URI'si girin.
Yeni oluşturulan kimlik bilgisi OAuth 2.0 istemci kimlikleri altında görünür.
İstemci kimliğini not edin. İstemci gizli anahtarları web uygulamaları için kullanılmaz.
Önemli: Uygulamanız, Picker nesnesi oluştururken özel kullanıcı verilerine erişen görünümlerle birlikte bir OAuth 2.0 erişim jetonu göndermelidir. Erişim jetonu istemek için Google API'lerine Erişmek İçin OAuth 2.0'ı Kullanma başlıklı makaleyi inceleyin.
Google Seçici'yi yönetme
Bu kılavuzun geri kalanında, Google Seçici'nin bir web uygulamasından nasıl yükleneceği ve görüntüleneceği ile geri çağırma işlevinin nasıl uygulanacağı açıklanmaktadır. Tam örneği görüntülemek için Web uygulamaları için kod örneği başlıklı makaleye bakın.
Google Picker kitaplığını yükleme
Google Picker kitaplığını yüklemek için kitaplık adıyla ve başarılı bir yüklemeden sonra çağrılacak bir geri çağırma işleviyle gapi.load işlevini çağırın:
<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() {
// 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>
Aşağıdakini değiştirin:
CLIENT_ID: Web uygulamanızın istemci kimliği.SCOPES: İhtiyacınız olan erişim düzeyine bağlı olarak Google API'lerine erişmek için istemeniz gereken bir veya daha fazla OAuth 2.0 kapsamı. Daha fazla bilgi için Google API'leri için OAuth 2.0 Kapsamları başlıklı makaleyi inceleyin.
google.accounts.oauth2 JavaScript kitaplığı, kullanıcı izni istemenize ve kullanıcı verileriyle çalışmak için erişim jetonu almanıza yardımcı olur. initTokenClient
yöntemi, web uygulamanızın istemci kimliğiyle yeni bir jeton istemcisi başlatır. Daha fazla bilgi için Jeton modelini kullanma başlıklı makaleyi inceleyin.
onApiLoad işlevi, Google Seçici kitaplıklarını yükler. onPickerApiLoad geri çağırma işlevi, Google Picker kitaplığı başarıyla yüklendikten sonra çağrılır.
Not: TypeScript kullanıyorsanız window.google.picker kullanmak için @types/google.picker yükleyebilirsiniz. Bu türlerle ilgili bir sorunu bildirmek için destek kaydı açın.
Google Seçici'yi görüntüleme
createPicker işlevi, Google Picker API'nin yüklenmesinin tamamlanmasını ve bir OAuth 2.0 jetonunun oluşturulmasını sağlar. Uygulamanın kullanıcının dosyalarına erişmesine izin vermek için Cloud proje numarasını kullanarak Drive uygulama kimliğini ayarlamak üzere PickerBuilder.setAppId yöntemini kullanın. Bu işlev daha sonra Google Picker'ın bir örneğini oluşturur ve görüntüler:
// Create and render a Google Picker object for selecting from Drive.
function createPicker() {
const showPicker = () => {
// Replace with your API key and App ID.
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: ''});
}
}
Aşağıdakini değiştirin:
API_KEY: API anahtarınız.APP_ID: Cloud proje numaranız.
Google Picker örneği oluşturmak için PickerBuilder kullanarak bir Picker nesnesi oluşturmanız gerekir. PickerBuilder, View, OAuth 2.0 jetonu, geliştirici anahtarı ve başarı durumunda çağrılacak bir geri çağırma işlevi (pickerCallback) alır.
Picker nesnesi, her seferinde bir View oluşturur. ViewId (google.picker.ViewId.*) ile veya görünümün nasıl oluşturulacağı üzerinde daha fazla kontrol sahibi olmak için DocsView örneği oluşturarak en az bir görünüm belirtin.
Google Seçici'ye birden fazla görünüm eklenirse kullanıcılar soldaki sekmeyi tıklayarak bir görünümden diğerine geçebilir. Sekmeler, ViewGroup nesneleriyle mantıksal olarak gruplandırılabilir.
Geçerli görünümlerin listesi için Google Picker referansındaki ViewId bölümüne bakın. Bu görünümlerden herhangi birinin jetonunu almak için https://www.googleapis.com/auth/drive.file kapsamını kullanın.
Google seçici geri çağırmasını uygulama
Google Picker'da dosya seçme veya İptal'e basma gibi kullanıcı etkileşimlerine yanıt vermek için Google Picker geri çağırması kullanılabilir. ResponseObject arayüzü, kullanıcının seçimleriyle ilgili bilgileri aktarır.
// A callback implementation.
function pickerCallback(data) {
let url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
const doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
const message = `You picked: ${url}`;
document.getElementById('result').textContent = message;
}
Geri çağırma, JSON kodlu bir veri nesnesi alır. Bu nesne, kullanıcının Google Seçici (google.picker.Response.ACTION) ile gerçekleştirdiği bir Action içerir. Kullanıcı bir öğe seçerse google.picker.Response.DOCUMENTS dizisi de doldurulur. Bu örnekte, google.picker.Document.URL ana sayfada gösterilmektedir. Veri alanlarıyla ilgili ayrıntılar için ResponseObject arayüzüne bakın.
Belirli dosya türlerini filtreleme
Belirli öğeleri filtrelemek için ViewGroup kullanın. Aşağıdaki kod örneğinde, "Drive" alt görünümünde yalnızca dokümanların ve sunuların nasıl gösterildiği açıklanmaktadır.
const 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)
.setAppId(cloudProjectNumber)
.setCallback(pickerCallback)
.build();
Geçerli görünüm türlerinin listesi için ViewId başlıklı makaleye bakın.
Google Seçici'nin görünümünü ayarlama
Çeşitli görünümlerde özellikleri etkinleştirmek veya devre dışı bırakmak için Feature nesnesini kullanabilirsiniz. Google Seçici penceresinin görünümünü hassas bir şekilde ayarlamak için PickerBuilder.enableFeature veya PickerBuilder.disableFeature yöntemini kullanın. Örneğin, yalnızca tek bir görünümünüz varsa kullanıcıların öğeleri görmesi için daha fazla alan sağlamak amacıyla gezinme bölmesini (Feature.NAV_HIDDEN) gizleyebilirsiniz.
Aşağıdaki kod örneğinde, bu özelliğin kullanıldığı bir e-tablonun arama seçicisi örneği gösterilmektedir:
const picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.SPREADSHEETS)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();