Questo documento spiega come utilizzare le funzionalità dell'API Google Picker, ad esempio attivare la selezione multipla, nascondere il riquadro di navigazione e scegliere l'account utente con il token OAuth 2.0 corrente dell'app.
Prerequisiti
Per questo esempio, devi configurare quanto segue nel tuo progetto Google Cloud:
Attiva le API: attiva sia l'API Google Picker sia l' API Google Drive:
Nella console Google Cloud, vai a Menu > API e servizi > Libreria.
Cerca e attiva sia l'API Google Picker sia l'API Google Drive.
Crea una chiave API :
Nella console Google Cloud, vai a Menu > API e servizi > Credenziali.
Fai clic su Crea credenziali > Chiave API.
(Consigliato) Per proteggere la chiave API con le limitazioni, fai clic su Modifica chiave API:
Limitazioni delle applicazioni: in Imposta una limitazione delle applicazioni, seleziona Siti web. In Limitazioni relative ai siti web, aggiungi l'origine della tua app (ad esempio
https://example.com/*ohttp://localhost/*) ehttps://docs.google.com/*all'elenco dei siti web specificati. Poiché Google Picker viene visualizzato in un iframe ospitato sudocs.google.com, le richieste non vanno a buon fine e viene visualizzato unAPI developer key is invaliderrore sehttps://docs.google.com/*non è consentito.Limitazioni delle API: in Limitazioni delle API, seleziona Limita chiave, quindi seleziona sia l'API Google Picker sia l' API Google Drive.
Crea un ID client OAuth 2.0 :
Nella console Google Cloud, vai a Menu > API e servizi > Credenziali.
Fai clic su Crea credenziali > ID client OAuth.
Seleziona Applicazione web e aggiungi le origini JavaScript autorizzate.
Individua l'ID app :
Nella console Google Cloud, vai a Menu > IAM e amministrazione > Impostazioni.
Utilizza il numero di progetto per l'ID app.
Lo stesso progetto Google Cloud deve contenere sia l'ID client sia l'ID app, poiché viene utilizzato per autorizzare l'accesso ai file di un utente.
Creare un'app di selezione delle immagini all'interno di un documento HTML
Il seguente esempio di codice mostra come utilizzare una pagina di selezione o caricamento delle immagini che gli utenti possono aprire da un pulsante in un'app web.
Crea un documento HTML standard per ospitare Google Picker:
<!DOCTYPE html>
<html>
<head>
<title>Google Picker API Quickstart</title>
<meta charset="utf-8" />
</head>
<body>
<p>Google Picker API Quickstart</p>
<!--Add buttons to initiate auth sequence and sign out.-->
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
Utilizza JavaScript per chiamare l'API Google Picker:
<script type="text/javascript">
/* exported gapiLoaded */
/* exported gisLoaded */
/* exported handleAuthClick */
/* exported handleSignoutClick */
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';
// Replace with your client ID and API key from https://console.cloud.google.com/.
const CLIENT_ID = 'CLIENT_ID';
const API_KEY = 'API_KEY';
// Replace with your project number from https://console.cloud.google.com/.
const APP_ID = 'APP_ID';
let tokenClient;
let accessToken = null;
let pickerInited = false;
let gisInited = false;
document.getElementById('authorize_button').style.visibility = 'hidden';
document.getElementById('signout_button').style.visibility = 'hidden';
/**
* Callback after api.js is loaded.
*/
function gapiLoaded() {
gapi.load('client:picker', initializePicker);
}
/**
* Callback after the API client is loaded. Loads the
* discovery doc to initialize the API.
*/
async function initializePicker() {
await gapi.client.load('https://www.googleapis.com/discovery/v1/apis/drive/v3/rest');
pickerInited = true;
maybeEnableButtons();
}
/**
* Callback after Google Identity Services are loaded.
*/
function gisLoaded() {
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: CLIENT_ID,
scope: SCOPES,
callback: '', // defined later
});
gisInited = true;
maybeEnableButtons();
}
/**
* Enables user interaction after all libraries are loaded.
*/
function maybeEnableButtons() {
if (pickerInited && gisInited) {
document.getElementById('authorize_button').style.visibility = 'visible';
}
}
/**
* Sign in the user upon button click.
*/
function handleAuthClick() {
tokenClient.callback = async (response) => {
if (response.error !== undefined) {
throw (response);
}
accessToken = response.access_token;
document.getElementById('signout_button').style.visibility = 'visible';
document.getElementById('authorize_button').innerText = 'Refresh';
await createPicker();
};
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: ''});
}
}
/**
* Sign out the user upon button click.
*/
function handleSignoutClick() {
if (accessToken) {
google.accounts.oauth2.revoke(accessToken);
accessToken = null;
document.getElementById('content').innerText = '';
document.getElementById('authorize_button').innerText = 'Authorize';
document.getElementById('signout_button').style.visibility = 'hidden';
}
}
/**
* Create and render a Google Picker object for searching images.
*/
function createPicker() {
const view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes('image/png,image/jpeg,image/jpg');
const picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setDeveloperKey(API_KEY)
.setAppId(APP_ID)
.setOAuthToken(accessToken)
.addView(view)
.addView(new google.picker.DocsUploadView())
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
}
/**
* Displays the file details of the user's selection.
* @param {object} data - Contains the user selection from the Google Picker.
*/
async function pickerCallback(data) {
if (data.action === google.picker.Action.PICKED) {
let text = `Google Picker response: \n${JSON.stringify(data, null, 2)}\n`;
const selectedDoc = data[google.picker.Response.DOCUMENTS][0];
const fileId = selectedDoc[google.picker.Document.ID];
console.log(fileId);
const res = await gapi.client.drive.files.get({
'fileId': fileId,
'fields': '*',
});
text += `Drive API response for first document: \n${JSON.stringify(res.result, null, 2)}\n`;
window.document.getElementById('content').innerText = text;
}
}
</script>
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
Sostituisci quanto segue:
- CLIENT_ID: l'ID client che hai creato quando hai autorizzato le credenziali OAuth 2.0 per l' applicazione web.
- API_KEY: le credenziali della chiave API che hai creato.
- APP_ID: il numero di progetto del progetto Google Cloud.
La funzione setOAuthToken consente a un'app di utilizzare il token di autenticazione corrente per determinare quale Account Google utilizza Google Picker per visualizzare i file. Se un utente ha eseguito l'accesso con più Account Google, Google Picker può visualizzare i file dell'account autorizzato appropriato.
Chiudi il documento HTML:
</body>
</html>
Dopo aver ottenuto l'ID file da Google Picker durante l'apertura dei file,
un'app può recuperare i metadati del file e scaricare il contenuto del file come
descritto nel get metodo della
files risorsa.
Creare un oggetto di selezione delle immagini
Il seguente esempio di codice mostra la logica di base per creare, eseguire il rendering e gestire l'API Google Picker per creare un selettore di immagini.
Utilizza JavaScript per chiamare l'API Google Picker:
/**
* Create and render a Google Picker object for searching images.
*/
function createPicker() {
// Define what types of files the Picker should show (e.g., images)
const view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes('image/png,image/jpeg,image/jpg');
// Build and display the picker.
const picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setDeveloperKey('API_KEY')
.setAppId('APP_ID')
.setOAuthToken('ACCESS_TOKEN')
.addView(view)
.addView(new google.picker.DocsUploadView()) // Adds an upload tab
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
}
/**
* Displays the file details of the user's selection.
* @param {object} data - Contains the user selection from the Google Picker.
*/
async function pickerCallback(data) {
if (data.action === google.picker.Action.PICKED) {
let text = `Google Picker response: \n${JSON.stringify(data, null, 2)}\n`;
// Extract the ID of the first selected document.
const selectedDoc = data[google.picker.Response.DOCUMENTS][0];
const fileId = selectedDoc[google.picker.Document.ID];
console.log("Selected File ID:", fileId);
// Optional: Fetch metadata using the Drive API based on the selected file ID.
const res = await gapi.client.drive.files.get({
'fileId': fileId,
'fields': '*',
});
text += `Drive API response for first document: \n${JSON.stringify(res.result, null, 2)}\n`;
// Update your UI with the results
console.log(text);
}
}
Sostituisci quanto segue:
- API_KEY: le credenziali della chiave API che hai creato.
- APP_ID: il numero di progetto del progetto Google Cloud.
- ACCESS_TOKEN: il token OAuth 2.0 della tua app.