API Google Picker

L'API Google Selecter è un'API JavaScript che puoi utilizzare nelle tue app web per consentire agli utenti di selezionare o caricare file di Google Drive. Gli utenti possono concedere alle tue app l'autorizzazione ad accedere ai loro i dati di Drive, offrendo un modo sicuro e autorizzato per interagire con i file.

Il selettore Google ha la funzione di "apertura file" finestra di dialogo per le informazioni archiviate su Drive e include le seguenti funzionalità:

• Simile alla UI di Google Drive.
• Diverse visualizzazioni che mostrano anteprime e immagini in miniatura dei file di Drive.
• Una finestra modale in linea, in modo che gli utenti non abbandonino mai l'applicazione principale.

Tieni presente che il selettore di Google non consente agli utenti di organizzare, spostare o copiare file da una cartella a un altro. Per farlo, puoi utilizzare l'API Google Drive o la UI di Drive.

Requisiti dell'applicazione

Le applicazioni che utilizzano il selettore Google devono rispettare tutte le Termini di servizio. Ma soprattutto, è necessario identificare correttamente nelle tue richieste.

Configura l'ambiente

Per iniziare a utilizzare l'API Google Selecter, devi configurare il tuo ambiente.

Abilita l'API

Prima di utilizzare le API di Google, devi attivarle in un progetto Google Cloud. Puoi attivare una o più API in un singolo progetto Google Cloud.

• Nella console Google Cloud, abilita l'API Google Selecter.

  Abilita l'API

crea una chiave API

Una chiave API è una lunga stringa contenente lettere maiuscole e minuscole, numeri trattini bassi e trattini, come AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe. Questo metodo di autenticazione viene utilizzato per accedere in modo anonimo ai contenuti disponibili pubblicamente quali i file di Google Workspace condivisi utilizzando l'opzione "Chiunque navighi su internet" con questo link" impostazione di condivisione. Per ulteriori dettagli, vedi Esegui l'autenticazione mediante chiavi API.

Per creare una chiave API:

1. Nella console Google Cloud, vai al Menu menu > API e Servizi > Credenziali.

   Vai a credenziali

2. Fai clic su Crea credenziali > Chiave API.
3. Viene visualizzata la nuova chiave API.
   • Fai clic su Copia content_copy per copiare la chiave API per utilizzarla nel codice della tua app. La chiave API può anche essere che si trovano nella sezione "Chiavi API" delle credenziali del progetto.
   • Fai clic su Limita chiave per aggiornare le impostazioni avanzate e limitare l'utilizzo della chiave API. Per maggiori dettagli, consulta Applicazione di limitazioni relative alle chiavi API.

Autorizzare le credenziali per un'applicazione web

Per autenticare gli utenti finali e accedere ai dati utente nella tua app, devi: Creare uno o più ID client OAuth 2.0. L'ID client viene utilizzato per identificare singola app ai server OAuth di Google. Se la tua app viene eseguita su più piattaforme, devi creare un ID cliente distinto per ogni piattaforma.

1. Nella console Google Cloud, vai a Menu menu > API e Servizi > Credenziali.

   Vai a credenziali

2. Fai clic su Crea credenziali > ID client OAuth.
3. Fai clic su Tipo di applicazione > Applicazione web.
4. Nel campo Nome, digita un nome per la credenziale. Questo nome viene visualizzato solo nella console Google Cloud.
5. Aggiungi gli URI autorizzati relativi alla tua app:
   • App lato client (JavaScript): in Origini JavaScript autorizzate, fai clic su Aggiungi URI. Quindi, inserisci un URI da utilizzare per le richieste del browser. Identifica i domini da cui l'applicazione può inviare richieste API al server OAuth 2.0.
   • App lato server (Java, Python e altri): in URI di reindirizzamento autorizzati, fai clic su Aggiungi URI. Quindi, inserisci un URI dell'endpoint a cui il server OAuth 2.0 può inviare le risposte.
6. Fai clic su Crea. Viene visualizzata la schermata di creazione del client OAuth, che mostra il nuovo ID client e il nuovo client secret.

   Prendi nota dell'ID client. I client secret non vengono utilizzati per le applicazioni web.

7. Fai clic su OK. Le credenziali appena create vengono visualizzate nella sezione ID client OAuth 2.0.

Visualizza il selettore di Google

Carica la libreria di Google Selecter

Per caricare la libreria di Google Selecter, chiama gapi.load() con il nome della libreria e un funzione di callback da richiamare dopo un caricamento riuscito:

    <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>
    

Sostituisci quanto segue:

• CLIENT_ID: ID client della tua app web.
• SCOPES: uno o più ambiti OAuth 2.0 che devi richiedere per accedere alle API di Google, a seconda del livello di accesso necessario. Per ulteriori informazioni, vedi Ambiti OAuth 2.0 per le API di Google.

La libreria JavaScript di google.accounts.oauth2 ti consente di richiedere il consenso degli utenti e ottenere un token di accesso per lavorare con i dati utente. Il metodo initTokenClient() inizializza un nuovo client token con l'ID client della tua app web. Per ulteriori informazioni, consulta Utilizzo del modello di token.

La funzione onApiLoad() carica le librerie dei selettori di Google. La La funzione di callback onPickerApiLoad() viene richiamata dopo che la libreria di Google Selecter viene caricato correttamente.

Visualizza il selettore di Google

La funzione createPicker() verifica che l'API Google Picker termini il caricamento e la creazione di un token OAuth. Utilizza la setAppId per impostare ID app Drive per consentire all'app di accedere ai file dell'utente. Questa funzione crea un'istanza del selettore Google e la visualizza:

    // 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: ''});
      }
    }
    

Per creare un'istanza del selettore di Google, devi creare un elemento Picker utilizzando l'oggetto PickerBuilder. La PickerBuilder richiede View, un token OAuth, chiave sviluppatore e una funzione di callback da chiamare in caso di esito positivo (pickerCallback).

L'oggetto Picker esegue il rendering di un elemento View alla volta. Specifica almeno una visualizzazione, tramite ViewId (google.​picker.​ViewId.*) o creando un'istanza di un tipo (google.​picker.​*View). Specifica la visualizzazione in base al tipo per ulteriori controllo su come viene visualizzata la visualizzazione.

Se vengono aggiunte più visualizzazioni al selettore di Google, gli utenti possono passare da una visualizzazione all'altra facendo clic su una scheda a sinistra. Le schede possono essere raggruppate logicamente con gli oggetti ViewGroup.

Implementare il callback Google Selecter

È possibile utilizzare un callback di Google Selecter per reagire alle interazioni degli utenti nello strumento, ad esempio selezionando un file o premendo Annulla. La Response trasmette informazioni sulle selezioni dell'utente.

    // 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;
    }
    

Il callback riceve un oggetto data con codifica JSON. Questo oggetto contiene Action l'utente esegue le operazioni con il selettore di Google (google.picker.Response.ACTION). Se l'utente seleziona un elemento di Document, anche l'array google.picker.Response.DOCUMENTS compilate. In questo esempio, google.picker.Document.URL viene mostrato nella pagina principale. Per maggiori dettagli sui campi di dati, consulta la pagina di riferimento per JSON.

Filtrare tipi di file specifici

Utilizza un ViewGroup come metodo per filtrare elementi specifici. Il seguente esempio di codice mostra come "Google Drive" la visualizzazione secondaria mostra solo documenti e presentazioni.

    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();
    

Ottimizza l'aspetto del selettore di Google

Puoi utilizzare l'oggetto Feature per attivare o disattivare le funzionalità per diverse visualizzazioni. Per ottimizzare l'aspetto della finestra di selezione di Google, utilizza lo Funzione PickerBuilder.enableFeature() o PickerBuilder.disableFeature(). Ad esempio, se hai una sola visualizzazione, potresti voler nascondere il riquadro di navigazione (Feature.NAV_HIDDEN) per offrire agli utenti più spazio per visualizzare gli elementi.

Il seguente esempio di codice mostra un esempio di selettore di ricerca di un foglio di lavoro che utilizza questa funzionalità:

     let picker = new google.picker.PickerBuilder()
         .addView(google.picker.ViewId.SPREADSHEETS)
         .enableFeature(google.picker.Feature.NAV_HIDDEN)
         .setDeveloperKey(developerKey)
         .setCallback(pickerCallback)
         .build();
     

Visualizza il selettore di Google in altre lingue

Specifica la lingua dell'interfaccia utente fornendo le impostazioni internazionali a PickerBuilder utilizzando il metodo setLocale(locale).

Il seguente esempio di codice mostra come impostare le impostazioni internazionali sul francese:

    let picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.IMAGE_SEARCH)
        .setLocale('fr')
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
    

Di seguito è riportato l'elenco delle impostazioni internazionali attualmente supportate: