Google Picker API'si, kullanıcıların bir öğeyi seçmelerine veya Google Drive dosyaları yükleyin. Kullanıcılar uygulamalarınıza erişmeleri için izin verebilir Dosyalarıyla güvenli ve yetkili bir şekilde etkileşimde bulunmalarını sağlayan Drive verileri.
Google Seçici, "Dosya Açık" olarak çalışır Drive'da depolanan bilgiler için iletişim kutusu ve şu ö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.
- Kullanıcıların hiçbir zaman ana uygulamadan ayrılmaması için satır içi, kalıcı bir pencere.
Google Seçici'nin, kullanıcıların bir klasördeki dosyaları organize etmesine, taşımasına veya kopyalamasına izin vermediğini unutmayın. başka bir kullanıcıya atanır. Bunun için Google Drive API'yi kullanabilirsiniz veya Drive kullanıcı arayüzü.
Başvuru şartları
Google Seçici'yi kullanan uygulamalar mevcut tüm Hizmet Şartları. En önemlisi de, riskleri ve riskleri ele almak için dikkatinizi çekeriz.
Ayrıca bir Google Cloud projeniz de olmalıdır.Ortamınızı ayarlama
Google Picker API'sini 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 konsolunda Google Picker API'yi etkinleştirin.
API anahtarı oluşturma
API anahtarı, üzerinde büyük ve küçük harfler, sayılar,
alt çizgi ve kısa çizgi (ör. AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe) kullanın.
Bu kimlik doğrulama yöntemi, herkese açık bilgilere anonim olarak erişmek için kullanılır
"İnternetteki herkes" kullanılarak paylaşılan Google Workspace dosyaları gibi veriler
bu bağlantıyı kullanarak" paylaşım ayarını açın. Daha fazla bilgi için bkz.
API anahtarları kullanarak kimlik doğrulayın.
API anahtarı oluşturmak için:
- Google Cloud konsolunda Menü'ye gidin > API'lar ve Hizmetler > Kimlik bilgileri.
- Kimlik bilgileri oluştur > seçeneğini tıklayın. API anahtarı.
- Yeni API anahtarınız gösterilir.
- Kopyala'yı tıklayın. özelliğini kullanabilirsiniz. API anahtarı ayrıca "API anahtarları" içinde bulunur kimlik doğrulama bilgileri dahil edilir.
- Gelişmiş ayarları güncellemek ve kullanımı sınırlandırmak için Anahtarı kısıtla'yı tıklayın ekleyin. Daha fazla bilgi için API anahtarı kısıtlamaları uygulama bölümüne bakın.
Bir web uygulaması için kimlik bilgilerini yetkilendirme
Son kullanıcıların kimliğini doğrulamak ve uygulamanızdaki kullanıcı verilerine erişmek için şunları yapmanız gerekir: En az bir OAuth 2.0 İstemci Kimliği oluşturun. Client-ID, bir tek bir uygulamayı Google'ın OAuth sunucularına göndermesini sağlar. Uygulamanız birden fazla platformda çalışıyorsa her platform için ayrı bir istemci kimliği oluşturmanız gerekir.
- Google Cloud konsolunda Menü > API'ler ve Hizmetler > Kimlik bilgileri.
- 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 konsolunda gösterilir.
- Uygulamanızla ilgili yetkili URI'ler 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 alan adlarını tanımlar.
- Sunucu tarafı uygulamalar (Java, Python ve daha fazlası): Yetkili 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.
- Oluştur'u tıklayın. Yeni İstemci Kimliğiniz ve İstemci sırrınızın gösterildiği, OAuth istemcisi oluşturuldu ekranı görüntülenir.
İstemci kimliğini not edin. İstemci gizli anahtarları web uygulamaları için kullanılmaz.
- Tamam'ı tıklayın. Yeni oluşturulan kimlik bilgisi OAuth 2.0 İstemci Kimlikleri altında görünür.
Picker nesnesi oluştururken gizli kullanıcı verileri. Erişim jetonu istemek için Google API'lerine Erişmek için OAuth 2.0'ı Kullanma başlıklı makaleye göz atın.
Google Seçici'yi görüntüle
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. Alıcı: Örneğin tamamını görüntülemek için Google Seçici kod örneğine gidin.Google Seçici kitaplığını yükleyin
Google Seçici kitaplığını yüklemek için gapi.load() numaralı telefonu kullanarak kitaplık adını ve
başarılı bir yüklemeden sonra çağrılacak geri çağırma işlevi:
<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ı başlıklı makaleye bakın.
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 istemcisini başlatır. Daha fazla bilgi için Jeton modelini kullanma bölümüne bakın.
onApiLoad() işlevi, Google Seçici kitaplıklarını yükler. İlgili içeriği oluşturmak için kullanılan
onPickerApiLoad() geri çağırma işlevi, Google Seçici kitaplığından sonra çağrılıyor
başarıyla yüklendi.
Google Seçici'yi görüntüle
createPicker() işlevi, Google Picker API'nin yüklenmesinin tamamlanıp tamamlanmadığını kontrol eder
OAuth jetonunun oluşturulduğuna karar verin. Şunu kullanın:
setAppId alanını kullanarak
Uygulamanın, kullanıcının dosyalarına erişmesine izin vermek için Drive Uygulama Kimliği. Bu fonksiyon
Google Seçici'nin bir örneğini oluşturur ve gösterir:
// 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: ''}); } }
Google Seçici örneği oluşturmak için bir Picker oluşturmanız gerekir
nesnesini PickerBuilder kullanarak oluşturun. İlgili içeriği oluşturmak için kullanılan
PickerBuilder bir View, bir OAuth jetonu, bir
geliştirici anahtarı ve başarıyı çağırmak için bir geri çağırma işlevi (pickerCallback) içerir.
Picker nesnesi, tek seferde bir View oluşturur. En az bir görünüm belirtin
ViewId (google.picker.ViewId.*) aracılığıyla veya
türü (google.picker.*View). Ek bilgiler için görünümü türe göre belirtin
görünümün nasıl oluşturulduğunu kontrol edebilir.
Google Seçici'ye birden fazla görünüm eklenirse, kullanıcılar aşağıdakileri yaparak bir görünümden diğerine geçebilirler:
sekmeyi tıklayın. Sekmeler, ViewGroup nesneleriyle mantıksal olarak gruplandırılabilir.
Google Seçici geri çağırmasını uygulayın
Google Seçici'deki kullanıcı etkileşimlerine tepki vermek için bir Google Seçici geri çağırması kullanılabilir:
bir dosya seçin veya İptal'e basın. Response
nesne, kullanıcının seçimleri hakkında bilgi iletir.
// 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 kodlu bir data nesnesi alır. Bu nesne bir içeriyor
Action
kullanıcı Google Seçici (google.picker.Response.ACTION) ile işlem yapar.
Kullanıcı bir Document öğesi seçerse
google.picker.Response.DOCUMENTS dizisi de
doldurulacağından emin olun. 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 kullanın.
Aşağıdaki kod örneğinde "Google Drive" alt görünüm yalnızca dokümanları ve sunuları gösterir.
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();
ViewId sayfasını inceleyin.
Google Seçici'nin görünümünü ayarlayın
Çeşitli görünümlerde özellikleri açmak veya kapatmak 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şlevi. Örneğin, yalnızca tek bir görünümünüz varsa görünümü gizlemek isteyebilirsiniz.
kullanıcılara öğeleri görmek için daha fazla alan sağlayan gezinme bölmesini (Feature.NAV_HIDDEN) kullanın.
Aşağıdaki kod örneğinde, bu özelliği kullanan bir e-tablo 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şturma
Yerel ayarı PickerBuilder öğesine sağlayarak kullanıcı arayüzü dilini belirtin.
örneğini setLocale(locale) yöntemini kullanarak yapabilirsiniz.
Aşağıdaki kod örneğinde yerel ayarın Fransızca olarak nasıl ayarlanacağı gösterilmektedir:
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 |