Questa pagina è stata tradotta dall'API Cloud Translation.

Guida rapida per JavaScript

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

Le guide rapide di Google Workspace utilizzano le librerie client API per gestire alcuni dettagli del flusso di autenticazione e autorizzazione. Ti consigliamo di utilizzare le librerie client per le tue app. Questa guida rapida utilizza un approccio di autenticazione semplificato appropriato per un ambiente di test. Per un ambiente di produzione, ti consigliamo di acquisire informazioni su autenticazione e autorizzazione prima di scegliere le credenziali di accesso appropriate per la tua app.

Crea un'applicazione web JavaScript che invia richieste all'API Google Drive.

Obiettivi

Configurare l'ambiente.
Configura l'esempio.
Esegui l'esempio.

Prerequisiti

Node.js e npm installati.
Un progetto Google Cloud.

Un Account Google con Google Drive abilitato.

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.

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 e aggiungiti come utente di test. Se hai già completato questo passaggio per il tuo progetto Cloud, passa alla sezione successiva.

Nella console Google Cloud, vai al Menu > API e servizi > Schermata consenso OAuth.
Vai alla schermata per il consenso OAuth
Seleziona il tipo di utente per l'app, poi fai clic su Crea.
Completa il modulo di registrazione dell'app, poi fai clic su Salva e continua.
Per il momento, puoi saltare l'aggiunta di ambiti e fare clic su Salva e continua. In futuro, quando creerai un'app da utilizzare al di fuori della tua organizzazione Google Workspace, dovrai aggiungere e verificare gli ambiti di autorizzazione richiesti dall'app.
Se hai selezionato Esterno come tipo di utente, aggiungi gli utenti di test:
1. In Utenti di test, fai clic su Aggiungi utenti.
2. Inserisci il tuo indirizzo email e tutti gli altri utenti di test autorizzati, quindi fai clic su Salva e continua.
Rivedi il riepilogo della registrazione dell'app. Per apportare modifiche, fai clic su Modifica. Se la registrazione dell'app è corretta, fai clic su Torna alla dashboard.

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. L'ID client consente di 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.

Nella console Google Cloud, vai a Menu > API e servizi > Credenziali.
Vai a 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. Questo 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 l'URI dell'endpoint a cui il server OAuth 2.0 può inviare le risposte.
Fai clic su Crea. Viene visualizzata la schermata relativa al client OAuth creato, 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 credenziale appena creata viene visualizzata in ID client OAuth 2.0.

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

crea una chiave API

Nella console Google Cloud, vai a Menu > API e servizi > Credenziali.
Vai a 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 dell'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 tua chiave API. Per maggiori dettagli, vedi Applicare le limitazioni relative alle chiavi API.

Configura l'esempio

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

Nel file index.html, incolla il seguente codice di esempio:

drive/quickstart/index.html

Visualizza su GitHub

<!DOCTYPE html>
<html>
  <head>
    <title>Drive API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Drive 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/drive/v3/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.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 listFiles();
        };

        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 metadata for first 10 files.
       */
      async function listFiles() {
        let response;
        try {
          response = await gapi.client.drive.files.list({
            'pageSize': 10,
            'fields': 'files(id, name)',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const files = response.result.files;
        if (!files || files.length == 0) {
          document.getElementById('content').innerText = 'No files found.';
          return;
        }
        // Flatten to string to display
        const output = files.reduce(
            (str, file) => `${str}${file.name} (${file.id})\n`,
            'Files:\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 come prerequisito.

Esegui l'esempio

Nella directory di lavoro, installa il pacchetto http-server:
```
npm install http-server
```
Avvia un server web nella directory di lavoro:
```
npx http-server -p 8000
```

Nel browser, vai a http://localhost:8000.
Viene visualizzata una richiesta di autorizzazione dell'accesso:
1. Se non hai ancora eseguito l'accesso al tuo Account Google, accedi 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.