Guía de inicio rápido de JavaScript

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En las guías de inicio rápido, se explica cómo configurar y ejecutar una app que llama a una API de Google Workspace.

Las guías de inicio rápido de Google Workspace usan las bibliotecas cliente de API para manejar algunos detalles del flujo de autenticación y autorización. Te recomendamos que uses las bibliotecas cliente para tus propias apps. Antes de ejecutar la app de muestra, cada guía de inicio rápido requiere que actives la autenticación y la autorización. Si no estás familiarizado con la autenticación y la autorización para las API de Google Workspace, consulta la descripción general de autenticación y autorización.

Crea una aplicación web de JavaScript que realice solicitudes a la API de Google Drive.

Objetivos

  • Configurar el entorno
  • Configura la muestra.
  • Ejecuta la muestra.

Requisitos previos

  • Una Cuenta de Google con Google Drive habilitado

Configure su entorno

Para completar esta guía de inicio rápido, configura tu entorno.

Cómo habilitar la API

Antes de usar las API de Google, debes activarlas en un proyecto de Google Cloud. Puedes activar una o más API en un solo proyecto de Google Cloud.

Autoriza credenciales para una aplicación web

Para autenticarte como usuario final y acceder a los datos del usuario en tu app, debes crear uno o más ID de cliente de OAuth 2.0. Se usa un ID de cliente para identificar una sola app en los servidores de OAuth de Google. Si tu app se ejecuta en varias plataformas, debes crear un ID de cliente por separado para cada plataforma.
  1. En la consola de Google Cloud, ve a Menú > API y servicios > Credenciales.

    Ir a Credenciales

  2. Haz clic en Crear credenciales > ID de cliente de OAuth.
  3. Haz clic en Tipo de aplicación > Aplicación web.
  4. En el campo Nombre, escribe un nombre para la credencial. Este nombre solo se muestra en Google Cloud Console.
  5. Agrega URI autorizados relacionados con tu app:
    • Apps del cliente (JavaScript): En Orígenes autorizados de JavaScript, haz clic en Agregar URI. Luego, ingresa un URI para usar en las solicitudes del navegador. Esto identifica los dominios desde los cuales tu aplicación puede enviar solicitudes de API al servidor de OAuth 2.0.
    • Apps del servidor (Java, Python y más): En URI de redireccionamiento autorizados, haz clic en Agregar URI. Luego, ingresa un URI de extremo al que el servidor de OAuth 2.0 pueda enviar respuestas.
  6. Haz clic en Crear. Aparecerá la pantalla del cliente OAuth que muestra tu nuevo ID de cliente y secreto de cliente.

    Anota el ID de cliente. Los secretos del cliente no se usan para las aplicaciones web.

  7. Haz clic en OK. La credencial creada recientemente se muestra en ID de cliente OAuth 2.0.
  8. Opcional: Si creas credenciales como un requisito previo para una guía de inicio rápido de JavaScript, también debes generar una clave de API.

Toma nota de estas credenciales porque las necesitarás más adelante en esta guía de inicio rápido.

Configura la muestra

  1. En tu directorio de trabajo, crea un archivo llamado index.html.
  2. En el archivo index.html, pega el siguiente código de muestra:

    drive/quickstart/index.html.
    <!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>

    Reemplaza lo siguiente:

Ejecutar la muestra

  1. En el directorio de trabajo, inicia un servidor web:

    Python 2.x

    python -m SimpleHTTPServer 8000
    

    Python 3.x

    python3 -m http.server 8000
    
  2. En tu navegador, ve a http://localhost:8000.

  3. La primera vez que ejecutes la muestra, se te pedirá que autorices el acceso:

    1. Si aún no accediste a tu Cuenta de Google, se te solicitará que lo hagas. Si accediste a varias cuentas, selecciona una para usar en la autorización.
    2. Haz clic en Aceptar.
    3. Copia el código del navegador, pégalo en la ventana de la línea de comandos y presiona Enter.

    La información de autorización se almacena en el sistema de archivos, por lo que la próxima vez que ejecutes el código de muestra no se te solicitará autorización.

Creaste correctamente tu primera aplicación de JavaScript que realiza solicitudes a la API de Google Drive.

Próximos pasos