Guida rapida per JavaScript

Le guide rapide spiegano come configurare ed eseguire un'app che chiama una l'API Google Workspace.

Le guide rapide di Google Workspace utilizzano le librerie client API per gestire alcune i dettagli del flusso di autenticazione e autorizzazione. È consigliabile di usare le librerie client per le tue app. Questa guida rapida utilizza un un approccio all'autenticazione semplificato, appropriato per gli ambienti di test completamente gestito di Google Cloud. Per un ambiente di produzione, consigliamo di imparare autenticazione e autorizzazione prima del giorno scelta delle credenziali di accesso che siano appropriati per la tua app.

Creare un'applicazione web JavaScript che invii richieste all'API Google Drive Activity.

Obiettivi

• Configurare l'ambiente.
• Configura il Sample.
• Esegui l'esempio.

Prerequisiti

• Node.js e installato.
• Un account Google Cloud progetto.

• Un Account Google

Configura l'ambiente

Per completare questa guida rapida, configura 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 Drive Activity.

  Abilita l'API

Configurare la schermata per il consenso OAuth

Se utilizzi un nuovo progetto Google Cloud per completare questa guida rapida, configura schermata per il consenso OAuth e aggiungiti come utente di test. Se hai già hai completato questo passaggio per il tuo progetto Cloud, passa alla sezione successiva.

1. Nella console Google Cloud, vai al Menu > API e Servizi > Schermata consenso OAuth.

   Vai alla schermata per il consenso OAuth

2. In Tipo di utente, seleziona Interno, quindi fai clic su Crea.
3. Compila il modulo di registrazione dell'app, quindi fai clic su Salva e continua.

4. Per ora, puoi saltare l'aggiunta di ambiti e fare clic su Salva e continua. In futuro, quando creerai un'app da utilizzare al di fuori del tuo Nell'organizzazione Google Workspace, devi modificare il Tipo di utente in Esterno e poi aggiungi gli ambiti di autorizzazione richiesti dalla tua app.

5. Esamina il riepilogo della registrazione dell'app. Per apportare modifiche, fai clic su Modifica. Se l'app la registrazione sembra a posto, fai clic su Torna alla Dashboard.

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

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

crea una chiave API

1. Nella console Google Cloud, vai al 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 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.

Configura l'esempio

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

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

   drive/activity-v2/index.html

   Visualizza su GitHub

   <!DOCTYPE html>
   <html>
     <head>
       <title>Drive Activity API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Drive Activity 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/driveactivity/v2/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/drive.activity.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 listActivities();
           };
   
           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 recent activity.
          */
         async function listActivities() {
           let response;
           try {
             response = await gapi.client.driveactivity.activity.query({
               'pageSize': 10,
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const activities = response.result.activities;
           if (!activities || activities.length == 0) {
             document.getElementById('content').innerText = 'No activities found.';
             return;
           }
           // Flatten to string to display
           const output = activities.reduce(
               (str, activity) => {
                 const time = getTimeInfo(activity);
                 const action = getActionInfo(activity['primaryActionDetail']);
                 const actors = activity.actors.map(getActorInfo);
                 const targets = activity.targets.map(getTargetInfo);
                 return `${str}${time}: ${truncated(actors)}, ${action}, ${truncated(targets)}\n`;
               },
               'Activities:\n');
           document.getElementById('content').innerText = output;
         }
   
         // Utility methods for formatting activity records
   
         /**
          * Returns a string representation of the first N elements in a list.
          * @param {string[]} array - Values to join
          * @param {number} limit - # of elements to show
          * @return {string} formatted string
          */
         function truncated(array, limit = 2) {
           const contents = array.slice(0, limit).join(', ');
           const more = array.length > limit ? ', ...' : '';
           return `[${contents}${more}]`;
         }
   
         /**
          * Returns the first found property name in an object.
          * @param {object} object - Object to search
          * @return {string} key name or 'unknown'
          */
         function getOneOf(object) {
           const props = Object.getOwnPropertyNames(object);
           if (props.length === 0) {
             return 'unknown';
           }
           return props[0];
         }
   
         /**
          * Returns a time associated with an activity.
          * @param {object} activity - Activity record
          * @return {string} Formatted timestamp
          */
         function getTimeInfo(activity) {
           if ('timestamp' in activity) {
             return activity.timestamp;
           }
           if ('timeRange' in activity) {
             return activity.timeRange.endTime;
           }
           return 'unknown';
         }
   
         /**
          * Returns the type of action.
          * @param {object} actionDetail
          * @return {string} Action type as string
          */
         function getActionInfo(actionDetail) {
           return getOneOf(actionDetail);
         }
   
         /**
          * Returns user information, or the type of user if not a known user.
          * @param {object} user - User record
          * @return {string} user type as string
          */
         function getUserInfo(user) {
           if ('knownUser' in user) {
             const knownUser = user['knownUser'];
             const isMe = knownUser['isCurrentUser'] || false;
             return isMe ? 'people/me' : knownUser['personName'];
           }
           return getOneOf(user);
         }
   
         /**
          * Returns actor information, or the type of actor if not a user.
          * @param {object} actor - Actor record
          * @return {string} actor type as string
          */
         function getActorInfo(actor) {
           if ('user' in actor) {
             return getUserInfo(actor['user']);
           }
           return getOneOf(actor);
         }
   
         /**
          * Returns the type of a target and an associated title.
          * @param {object} target - Activity target record
          * @return {string} target type as string
          */
         function getTargetInfo(target) {
           if ('driveItem' in target) {
             const title = target.driveItem.title || 'unknown';
             return `driveItem:"${title}"`;
           }
           if ('drive' in target) {
             const title = target.drive.title || 'unknown';
             return `drive:"${title}"`;
           }
           if ('fileComment' in target) {
             const parent = target.fileComment.parent || {};
             const title = parent.title || 'unknown';
             return `fileComment:"${title}"`;
           }
           return `${getOneOf(target)}:unknown`;
         }
       </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 credenziali autorizzate per un'applicazione web.
   • YOUR_API_KEY: la chiave API che hai creato come un prerequisito.

Esegui l'esempio

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

   npm install http-server
   

2. Avvia un server web nella directory di lavoro:

   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, esegui l'accesso quando ti viene richiesto. Se Hai eseguito l'accesso a più account, selezionane uno da utilizzare per l'autorizzazione.
   2. Fai clic su Accept (accetta).

L'applicazione JavaScript esegue e chiama l'API Google Drive Activity.

Passaggi successivi

• Risolvere i problemi di autenticazione e autorizzazione
• Documentazione di riferimento dell'API Drive Activity
• Sezione google-api-javascript-client di GitHub