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 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, Drive'da depolanan bilgiler için "Dosya Aç" iletişim kutusu gibi çalışır ve aşağıdaki ö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. Bunu yapmak için Google Drive API'yi veya Drive kullanıcı arayüzünü kullanabilirsiniz.
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 Seçici 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ı, ü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 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 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ını, projenizin kimlik bilgilerinin "API anahtarları" bölümünde de bulabilirsiniz.
- 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ı 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 bir veya daha fazla OAuth 2.0 istemci kimliği oluşturmanız gerekir. 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 Console'da Menü > API'ler ve Hizmetler > Kimlik bilgileri'ne gidin.
- Kimlik Bilgileri Oluştur > OAuth istemci kimliği'ni tıklayın.
- Uygulama türü > Web uygulaması'nı tıklayın.
- Ad alanına, kimliğin adını yazın. Bu ad yalnızca Google Cloud Console'da 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 diğerleri): 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.
- 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ı makaleyi inceleyin.
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ükleme
Google Seçici kitaplığını yüklemek için kitaplık adını ve başarılı bir yükleme sonrasında çağrılacak bir geri çağırma işlevini belirterek 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() { // 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 istekte bulunmanız 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 başlıklı makaleyi inceleyin.
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çiciyi gösterme
createPicker() işlevi, Google Picker API'nin yüklenmesinin tamamlanıp tamamlanmadığını kontrol eder
OAuth jetonunun oluşturulduğuna karar verin. 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. Ardından bu işlev, Google Seçici'nin bir örneğini oluşturup 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 PickerBuilder öğesini kullanarak bir Picker nesnesi oluşturmanız gerekir. PickerBuilder, bir View, OAuth jetonu, geliştirici anahtarı ve başarı durumunda çağrılacak bir geri çağırma işlevi (pickerCallback) alır.
Picker nesnesi, tek seferde bir View öğesi oluşturur. En az bir görünüm belirtin
ViewId (google.picker.ViewId.*) aracılığıyla veya
Ek alan için DocsView
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. ResponseObject
arayüz, kullanıcının seçimleri hakkında bilgi verir.
// A simple callback implementation. function pickerCallback(data) { const 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 işlevi, JSON kodlamalı bir data 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ı hakkında ayrıntılı bilgi 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 "Google Drive" alt görünüm yalnızca dokümanları ve sunuları gösterir.
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();
ViewId bölümüne bakın.
Google Seçici'nin görünümünü ayarlama
Çeşitli görünümler için özellikleri etkinleştirmek veya devre dışı bırakmak üzere 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 gezinme bölmesini gizlemek isteyebilirsiniz.
(Feature.NAV_HIDDEN) seçeneğini tıklayın.
Aşağıdaki kod örneğinde, bu özelliği kullanan bir e-tablonun arama seçicisine bir örnek gösterilmektedir:
const picker = new google.picker.PickerBuilder() .addView(google.picker.ViewId.SPREADSHEETS) .enableFeature(google.picker.Feature.NAV_HIDDEN) .setDeveloperKey(developerKey) .setCallback(pickerCallback) .build();