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.
Devi anche avere un progetto Google Cloud.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.
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:
- Nella console Google Cloud, vai al Menu > API e Servizi > Credenziali.
- Fai clic su Crea credenziali > Chiave API.
- Viene visualizzata la nuova chiave API.
- Fai clic su Copia 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.
- Nella console Google Cloud, vai a Menu > API e Servizi > Credenziali.
- Fai clic su Crea credenziali > ID client OAuth.
- Fai clic su Tipo di applicazione > Applicazione web.
- Nel campo Nome, digita un nome per la credenziale. Questo nome viene visualizzato solo nella console Google Cloud.
- 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.
- 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.
- Fai clic su OK. Le credenziali appena create vengono visualizzate nella sezione ID client OAuth 2.0.
Picker
. Per richiedere un token di accesso, consulta l'articolo Utilizzo di OAuth 2.0 per accedere alle API di Google.
Visualizza il selettore di Google
Il resto di questa guida spiega come caricare e visualizzare il selettore Google da un'app web. A Per visualizzare l'esempio completo, vai all'esempio di codice del 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();Per un elenco dei tipi di visualizzazioni validi, consulta
ViewId
.
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:
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 |