Il selettore Google è una finestra di dialogo "Apertura file" per le informazioni memorizzate su Google Drive. Il selettore Google dispone di queste funzionalità:
- Un aspetto e un aspetto simili a quelli dell'interfaccia utente di Google Drive.
- Diverse visualizzazioni che mostrano anteprime e miniature di file di Drive.
- Una finestra modale in linea, in modo che gli utenti non abbandonino mai l'applicazione principale.
L'API Google Picker è un'API JavaScript che puoi utilizzare nelle tue app web per consentire agli utenti di aprire o caricare file di Drive.
Requisiti dell'applicazione
Le applicazioni che utilizzano il selettore di Google devono rispettare tutti i Termini di servizio esistenti. Cosa più importante, devi identificarti correttamente nelle tue richieste.
Devi anche avere un progetto Google Cloud.Configura l'ambiente
Per iniziare a utilizzare l'API Google Picker, 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 Picker.
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 dati disponibili pubblicamente, ad esempio i file di Google Workspace condivisi utilizzando l'impostazione di condivisione "Chiunque su Internet
con questo link". Per maggiori dettagli, consulta
Autenticarsi utilizzando le chiavi API.
Per creare una chiave API:
- Nella console Google Cloud, vai a 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 da utilizzare nel codice della tua app. La chiave API è disponibile anche 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 ulteriori dettagli, consulta la sezione Applicare le limitazioni relative alle chiavi API.
Autorizzare le credenziali per un'applicazione web
Per eseguire l'autenticazione come utente finale e accedere ai dati utente nella tua app, devi creare uno o più ID client OAuth 2.0. Un ID client viene utilizzato per identificare una singola app ai server OAuth di Google. Se la tua app viene eseguita su più piattaforme, devi creare un ID client separato 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 la tua applicazione può inviare richieste API al server OAuth 2.0.
- App lato server (Java, Python e altro): in URI di reindirizzamento autorizzati, fai clic su Aggiungi URI. Quindi, inserisci l'URI di un endpoint a cui il server OAuth 2.0 può inviare risposte.
- Fai clic su Crea. Viene visualizzata la schermata creata del client OAuth, che mostra il nuovo ID client e il client secret.
Prendi nota dell'ID client. I client secret non vengono utilizzati per le applicazioni web.
- Fai clic su OK. La nuova credenziale viene visualizzata in ID client OAuth 2.0.
Picker. Per richiedere un token di accesso, vedi Utilizzare OAuth 2.0 per accedere alle API di Google.
Mostra il selettore Google
La parte rimanente di questa guida illustra come caricare e visualizzare il selettore Google da un'app web. Per visualizzare l'esempio completo, vai all'esempio di codice del selettore Google.Carica la libreria del selettore Google
Per caricare la libreria di Google Picker, chiama gapi.load() con il nome della libreria e una 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: l'ID client della tua app web.SCOPES: uno o più ambiti OAuth 2.0 richiesti per accedere alle API di Google, a seconda del livello di accesso richiesto. Per saperne di più, vedi Ambiti OAuth 2.0 per le API di Google.
La libreria JavaScript di google.accounts.oauth2 ti aiuta a richiedere il consenso degli utenti e a 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 la sezione Utilizzo del modello di token.
La funzione onApiLoad() carica le librerie del selettore di Google. La funzione di callback onPickerApiLoad() viene chiamata dopo il caricamento della libreria di Google Picker.
Mostra il selettore Google
La funzione createPicker() controlla di seguito per assicurarsi che l'API Google Picker finisca il caricamento e che venga creato un token OAuth. Questa funzione crea quindi 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)
.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 di Google Picker, devi creare un oggetto Picker utilizzando PickerBuilder. PickerBuilder richiede un View, un token OAuth, una chiave sviluppatore e una funzione di callback per richiamare l'attività (pickerCallback).
L'oggetto Picker esegue il rendering di un elemento View alla volta. Specifica almeno una vista, tramite ViewId (google.picker.ViewId.*) o creando un'istanza di tipo (google.picker.*View). Specifica la visualizzazione per tipo per un controllo aggiuntivo sul modo in cui viene visualizzata.
Se vengono aggiunte più visualizzazioni al selettore Google, gli utenti possono passare da una visualizzazione all'altra facendo clic su una scheda a sinistra. Le schede possono essere raggruppate logicamente con oggetti ViewGroup.
Implementare il callback Google Picker
È possibile utilizzare un callback di Google Picker per reagire alle interazioni degli utenti nel selettore di Google, ad esempio per selezionare un file o premere Annulla. L'oggetto 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 un
Action
che l'utente esegue con il selettore di Google (google.picker.Response.ACTION).
Se l'utente seleziona un elemento Document,
viene completato anche l'array google.picker.Response.DOCUMENTS. In questo esempio, google.picker.Document.URL viene mostrato nella pagina principale.
Per informazioni dettagliate sui campi dei dati, consulta la pagina Riferimento JSON.
Filtra tipi di file specifici
Utilizza ViewGroup per filtrare elementi specifici.
Il seguente esempio di codice mostra come la vista secondaria "Google Drive" 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 visualizzazione validi, consulta ViewId.
Abbina l'aspetto del selettore Google
Puoi utilizzare l'oggetto Feature per attivare o disattivare le funzionalità per diverse viste.
Per ottimizzare l'aspetto della finestra del selettore di Google, utilizza la funzione PickerBuilder.enableFeature() o PickerBuilder.disableFeature(). Ad esempio, se hai una sola vista, puoi nascondere il riquadro di navigazione (Feature.NAV_HIDDEN) per concedere 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();
Visualizzare il selettore Google in altre lingue
Specifica la lingua dell'interfaccia utente fornendo le impostazioni internazionali all'istanza 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:
afamarbgbncacs |
dadeelenen-GBeses-419 |
eteufafifilfrfr-CA |
glguhihrhuidis |
itiwjaknkoltlv |
mlmrmsnlnoplpt-BR |
pt-PTroruskslsrsv |
swtatethtrukur |
vizh-CNzh-HKzh-TWzu |