Guida rapida di JavaScript

Crea un'applicazione web JavaScript che effettua richieste all'API Google Calendar.

Le guide rapide spiegano come configurare ed eseguire un'app che chiama un'API Google Workspace. Questa guida rapida utilizza un approccio di autenticazione semplificato adatto a un ambiente di test. Per un ambiente di produzione, ti consigliamo di scoprire di più sull'autenticazione e sull'autorizzazione prima di scegliere le credenziali di accesso appropriate per la tua app.

Questa guida rapida utilizza le librerie client API consigliate di Google Workspace per gestire alcuni dettagli del flusso di autenticazione e autorizzazione.

Obiettivi

• Configurare l'ambiente.
• Configurare l'esempio.
• Eseguire l'esempio.

Prerequisiti

• Node.js & npm installati.
• Un progetto Google Cloud .

• Un Account Google con Google Calendar abilitato.

Configurare l'ambiente

Per completare questa guida rapida, configura l'ambiente.

Abilitare 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 Calendar.

  Abilita l'API

Configurare la schermata per il consenso OAuth

Se utilizzi un nuovo progetto Google Cloud per completare questa guida rapida, configura la schermata per il consenso OAuth. Se hai già completato questo passaggio per il tuo progetto Cloud, vai alla sezione successiva.

1. Nella console API di Google, vai a Menu menu > Piattaforma di autenticazione Google > Branding.

   Vai a Branding

2. Se hai già configurato la piattaforma di autenticazione Google, puoi configurare le seguenti impostazioni della schermata per il consenso OAuth in Branding, Pubblico e Accesso ai dati. Se visualizzi il messaggio Google Auth Platform non ancora configurata, fai clic su Inizia:
1. In Informazioni sull'app, nel campo Nome app, inserisci un nome per l'app.
2. In Email di assistenza utente, scegli un indirizzo email di assistenza a cui gli utenti possono contattarti se hanno domande sul loro consenso.
3. Fai clic su Avanti.
4. In Pubblico, seleziona Interno.
5. Fai clic su Avanti.
6. In Dati di contatto, inserisci un indirizzo email a cui ricevere notifiche in merito a eventuali modifiche al progetto.
7. Fai clic su Avanti.
8. In Fine , esamina le Norme relative ai dati utente dei servizi API di Google e, se le accetti, seleziona Accetto le Norme relative ai dati utente: servizi API di Google.
9. Fai clic su Continua.
10. Fai clic su Crea.
3. Per il momento, puoi saltare l'aggiunta di ambiti. In futuro, quando crei un'app da utilizzare al di fuori della tua organizzazione Google Workspace, devi impostare il Tipo di utente su Esterno. Aggiungi poi gli ambiti di autorizzazione richiesti dall'app. Per saperne di più, consulta la guida completa Configurare il consenso OAuth guide.

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 una singola app nei server OAuth di Google. Se l'app viene eseguita su più piattaforme, devi creare un ID client separato per ogni piattaforma.

1. Nella console API di Google, vai a Menu menu > Piattaforma di autenticazione Google > Client.

   Vai a Client

2. Fai clic su Crea client.
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 API di Google.
5. Aggiungi gli URI autorizzati correlati alla tua app:
   • App lato client (JavaScript): in Origini JavaScript autorizzate, fai clic su Aggiungi URI. Poi, inserisci un URI da utilizzare per le richieste del browser. Questo identifica i domini da cui l'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. Poi, inserisci un URI dell'endpoint a cui il server OAuth 2.0 può inviare le risposte.
6. Fai clic su Crea.

   La credenziale appena creata viene visualizzata in ID client OAuth 2.0.

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

Prendi nota di queste credenziali perché ti serviranno più avanti in questa guida rapida.

Creare una chiave API

1. Nella console Google Cloud, vai a 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 da utilizzare in your app's code. La chiave API è disponibile anche nella sezione "Chiavi API" delle credenziali del progetto.
   • Per impedire l'uso non autorizzato, ti consigliamo di limitare dove e per quali API può essere utilizzata la chiave API. Per maggiori dettagli, vedi Aggiungere limitazioni API.

Configurare l'esempio

1. Nella directory di lavoro, crea un file denominato index.html.

2. Nel file index.html, incolla il seguente codice campione:

   calendar/quickstart/index.html

   Visualizza su GitHub
   <!DOCTYPE html>
   <html>
     <head>
       <title>Google Calendar API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Google Calendar 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>
   
       <script type="text/javascript">
         /* exported gapiLoaded */
         /* exported gisLoaded */
         /* exported handleAuthClick */
         /* exported handleSignoutClick */
   
         // TODO(developer): Set to client ID and API key from the Developer Console
         const CLIENT_ID = '<YOUR_CLIENT_ID>';
         const API_KEY = '<YOUR_API_KEY>';
   
         // Discovery doc URL for APIs used by the quickstart
         const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';
   
         let tokenClient;
         let gapiInited = 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', initializeGapiClient);
         }
   
         /**
          * Callback after the API client is loaded. Loads the
          * discovery doc to initialize the API.
          */
         async function initializeGapiClient() {
           await gapi.client.init({
             apiKey: API_KEY,
             discoveryDocs: [DISCOVERY_DOC],
           });
           gapiInited = 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 (gapiInited && gisInited) {
             document.getElementById('authorize_button').style.visibility = 'visible';
           }
         }
   
         /**
          *  Sign in the user upon button click.
          */
         function handleAuthClick() {
           tokenClient.callback = async (resp) => {
             if (resp.error !== undefined) {
               throw (resp);
             }
             document.getElementById('signout_button').style.visibility = 'visible';
             document.getElementById('authorize_button').innerText = 'Refresh';
             await listUpcomingEvents();
           };
   
           if (gapi.client.getToken() === 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() {
           const token = gapi.client.getToken();
           if (token !== null) {
             google.accounts.oauth2.revoke(token.access_token);
             gapi.client.setToken('');
             document.getElementById('content').innerText = '';
             document.getElementById('authorize_button').innerText = 'Authorize';
             document.getElementById('signout_button').style.visibility = 'hidden';
           }
         }
   
         /**
          * Print the summary and start datetime/date of the next ten events in
          * the authorized user's calendar. If no events are found an
          * appropriate message is printed.
          */
         async function listUpcomingEvents() {
           let response;
           try {
             const request = {
               'calendarId': 'primary',
               'timeMin': (new Date()).toISOString(),
               'showDeleted': false,
               'singleEvents': true,
               'maxResults': 10,
               'orderBy': 'startTime',
             };
             response = await gapi.client.calendar.events.list(request);
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const events = response.result.items;
           if (!events || events.length == 0) {
             document.getElementById('content').innerText = 'No events found.';
             return;
           }
           // Flatten to string to display
           const output = events.reduce(
               (str, event) => `${str}${event.summary} (${event.start.dateTime || event.start.date})\n`,
               'Events:\n');
           document.getElementById('content').innerText = output;
         }
       </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>
     </body>
   </html>

   Sostituisci quanto segue:

   • YOUR_CLIENT_ID: l'ID client che hai creato quando hai autorizzato le credenziali per un'applicazione web.
   • YOUR_API_KEY: la chiave API che hai creato.

Eseguire l'esempio

1. Nella directory di lavoro, installa il pacchetto http-server:

   npm install http-server
   

2. Nella directory di lavoro, avvia un server web:

   npx http-server -p 8000
   

3. Nel browser, vai a http://localhost:8000.
4. Viene visualizzato un messaggio che ti chiede di autorizzare l'accesso:
   1. Se non hai ancora eseguito l'accesso al tuo Account Google, fallo quando ti viene richiesto. Se hai eseguito l'accesso a più account, seleziona un account da utilizzare per l'autorizzazione.
   2. Fai clic su Accetto.

L'applicazione JavaScript viene eseguita e chiama l'API Google Calendar.

Passaggi successivi

• Prova le API Google Workspace in Explorer API
  • Crea eventi
  • Risolvi i problemi di autenticazione e autorizzazione
  • Documentazione di riferimento dell'API Calendar
  • Sezione google-api-javascript-client di GitHub