Google Picker API

Google Seçici iletişim kutusu.

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.

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:

  1. Google Cloud konsolunda Menü'ye gidin > API'lar ve Hizmetler > Kimlik bilgileri.

    Kimlik bilgilerine git

  2. Kimlik bilgileri oluştur > seçeneğini tıklayın. API anahtarı.
  3. 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.

  1. Google Cloud konsolunda Menü > API'ler ve Hizmetler > Kimlik bilgileri.

    Kimlik bilgilerine git

  2. Kimlik Bilgisi Oluştur > OAuth istemci kimliği'ni tıklayın.
  3. Uygulama türü > Web uygulaması'nı tıklayın.
  4. Ad alanına kimlik bilgisi için bir ad yazın. Bu ad yalnızca Google Cloud konsolunda gösterilir.
  5. 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.
  6. 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.

  7. Tamam'ı tıklayın. Yeni oluşturulan kimlik bilgisi OAuth 2.0 İstemci Kimlikleri altında görünür.
ziyaret edin. Önemli: Uygulamanız, bu erişime sahip görünümlere sahip bir OAuth 2.0 erişim jetonu göndermelidir 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();
    
. Geçerli görünüm türlerinin listesi için ViewId bölümüne bakın.

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:

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