Google Seçici, Google Drive'da depolanan bilgiler için bir "Dosya Açma" iletişim kutusudur. Google Seçici aşağıdaki özelliklere sahiptir:
- Google Drive kullanıcı arayüzüne benzer bir görünüş ve tarz.
- Drive dosyalarının önizlemelerini ve küçük resimlerini gösteren çeşitli görünümler.
- Kullanıcıların ana uygulamadan asla çıkmaması için satır içi, kalıcı bir pencere.
Google Picker API, kullanıcıların Drive dosyalarını açmasına veya yüklemesine olanak tanımak için web uygulamalarınızda kullanabileceğiniz bir JavaScript API'sidir.
Başvuru şartları
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ı ayarlayın
Google Picker API'yi kullanmaya başlamak için ortamınızı kurmanız gerekir.
API'yi etkinleştirme
Google API'lerini kullanmadan önce bir Google Cloud projesinde etkinleştirmeniz gerekir. Bir veya daha fazla API'yi tek bir Google Cloud projesinde 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, rakamlar, alt çizgi ve tire (ör. AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe) içeren uzun bir dizedir.
Bu kimlik doğrulama yöntemi, "İnternet'te herkes bu bağlantıyı kullanarak" paylaşım ayarı kullanılarak paylaşılan Google Workspace dosyaları gibi herkese açık verilere anonim olarak erişmek için kullanılır. Daha fazla bilgi için API anahtarlarını kullanarak kimlik doğrulama 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 bilgisi oluştur > API anahtarı'nı tıklayın.
- Yeni API anahtarınız görüntülenir.
- API anahtarınızı uygulamanızın kodunda kullanmak üzere kopyalamak için Kopyala'yı tıklayın. API anahtarı, projenizin kimlik bilgilerinin "API anahtarları" bölümünde de bulunabilir.
- Gelişmiş ayarları güncellemek ve API anahtarınızın kullanımını sınırlamak için Anahtarı kısıtla'yı tıklayın. Daha fazla bilgi için API anahtarı kısıtlamalarını uygulama başlıklı makaleyi inceleyin.
Bir web uygulaması için kimlik bilgilerini yetkilendirme
Son kullanıcı olarak kimlik doğrulaması yapmak ve uygulamanızdaki 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 uygulamayı Google'ın OAuth sunucularına tanımlamak 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.
- Google Cloud Console'da Menü > API'ler ve Hizmetler > Kimlik Bilgileri'ne gidin.
- Kimlik bilgisi oluştur > OAuth istemci kimliği'ni tıklayın.
- Uygulama türü > Web uygulaması'nı tıklayın.
- Ad alanına, kimlik bilgisi için bir ad yazın. Bu ad yalnızca Google Cloud Console'da gösterilir.
- Uygulamanızla ilgili yetkili URI'lar ekleyin:
- İstemci tarafı uygulamalar (JavaScript) - Yetkili JavaScript kaynakları altında URI ekle'yi tıklayın. Ardından, tarayıcı istekleri için 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 ve diğerleri) - Yetkili yönlendirme URI'leri altında URI ekle'yi tıklayın. Ardından, OAuth 2.0 sunucusunun yanıt gönderebileceği bir uç nokta URI'si girin.
- Oluştur'u tıklayın. Yeni istemci kimliğinizi ve istemci gizli anahtarınızı gösteren OAuth istemcisi tarafından oluşturulan ekran görünür.
İstemci Kimliğini not edin. İstemci gizli anahtarları web uygulamaları için kullanılmaz.
- OK (Tamam) seçeneğini tıklayın. Yeni oluşturulan kimlik bilgisi OAuth 2.0 istemci kimlikleri altında görünür.
Picker nesnesi oluştururken gizli kullanıcı verilerine erişen görünümlere sahip bir OAuth 2.0 erişim jetonu göndermelidir. Erişim jetonu istemek için Google API'lerine Erişmek için OAuth 2.0'ı Kullanma konusuna bakın.
Google Seçici'yi göster
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 ele alınmaktadır. Tam örneği görüntülemek için Google Seçici kodu örneğine gidin.Google Seçici kitaplığını yükleme
Google Seçici kitaplığını yüklemek için gapi.load() yöntemini kitaplık adı ve başarılı bir yüklemeden sonra çağrılacak bir geri çağırma işleviyle ç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() {
// 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>
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ı bölümüne bakın.
google.accounts.oauth2 JavaScript kitaplığı, kullanıcı rızasını istemenize ve kullanıcı verileriyle çalışmak için bir 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ı makaleye bakın.
onApiLoad() işlevi, Google Seçici kitaplıklarını yükler. onPickerApiLoad() geri çağırma işlevi, Google Seçici kitaplığı başarıyla yüklendikten sonra çağrılır.
Google Seçici'yi göster
Aşağıdaki createPicker() işlevi, Google Seçici API'sının yüklenmesinin tamamlandığında ve bir OAuth jetonu oluşturulduğundan emin olur. Bu işlev daha sonra bir Google Seçici örneği oluşturur ve bu örneği görüntüler:
// 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: ''});
}
}
Google Seçici örneği oluşturmak için PickerBuilder kullanarak Picker nesnesi oluşturmanız gerekir. PickerBuilder, başarılı olduğunda çağrılacak bir View, OAuth jetonu, geliştirici anahtarı ve bir geri çağırma işlevi (pickerCallback) alır.
Picker nesnesi aynı anda bir View oluşturur. ViewId (google.picker.ViewId.*) veya bir tür örneği (google.picker.*View) oluşturarak en az bir görünüm belirtin. Görünümün nasıl oluşturulacağı üzerinde daha fazla kontrol sahibi olmak için görünümü türe göre belirtin.
Google Seçici'ye birden fazla görünüm eklenirse kullanıcılar soldaki bir sekmeyi tıklayarak bir görünümden diğerine geçebilir. Sekmeler ViewGroup nesneleriyle mantıksal olarak gruplandırılabilir.
Google Seçici geri çağırmasını uygulama
Google Seçici geri çağırması, Google Seçici'deki bir dosya seçme veya İptal'e basma gibi kullanıcı etkileşimlerine tepki vermek için kullanılabilir. Response nesnesi, kullanıcının seçimleri hakkında bilgi aktarır.
// 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;
}
Geri çağırma, JSON olarak kodlanmış data nesnesi alır. Bu nesne, kullanıcının Google Seçici (google.picker.Response.ACTION) ile yaptığı bir Action içerir. Kullanıcı bir Document öğesi 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 JSON Referansı'na bakın.
Belirli dosya türlerini filtreleme
Belirli öğeleri filtrelemek için ViewGroup kullanabilirsiniz.
Aşağıdaki kod örneğinde, "Google Drive" alt görünümünde yalnızca doküman ve sunuların nasıl gösterildiği gösterilmektedir.
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();
Geçerli görünüm türlerinin listesi için ViewId adresine göz atın.
Google Seçici'nin görünümünü ayarlayın
Ç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ünde ince ayar yapmak için PickerBuilder.enableFeature() veya PickerBuilder.disableFeature() işlevini kullanın. Örneğin, yalnızca tek bir görünümünüz varsa kullanıcılara öğeleri görmek için daha fazla alan sağlamak üzere gezinme bölmesini (Feature.NAV_HIDDEN) gizlemek isteyebilirsiniz.
Aşağıdaki kod örneğinde, bu özelliği kullanan bir e-tablonun arama seçicisi örneği gösterilmektedir:
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.SPREADSHEETS)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Google Seçici'yi diğer dillerde oluşturun
setLocale(locale) yöntemini kullanarak yerel ayarı PickerBuilder örneğine sağlayarak kullanıcı arayüzü dilini belirtin.
Aşağıdaki kod örneği, yerel ayarın Fransızca olarak nasıl ayarlanacağını göstermektedir:
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.IMAGE_SEARCH)
.setLocale('fr')
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Şu anda desteklenen yerel ayarların listesi aşağıda verilmiştir:
afamarbgbncacs |
dadeelenen-GBeses-419 |
eteufafifilfrfr-CA |
glguhihrhuidis |
itiwjaknkoltlv |
mlmrmsnlnoplpt-BR |
pt-PTroruskslsrsv |
swtatethtrukur |
vizh-CNzh-HKzh-TWzu |