Guía de inicio rápido de JavaScript

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 la API para manejar algunos detalles del flujo de autenticación y autorización. Te recomendamos que uses las bibliotecas cliente para tus propias apps. En esta guía de inicio rápido, se usa un enfoque de autenticación simplificado apropiado para un entorno de pruebas. En el caso de un entorno de producción, te recomendamos obtener información sobre la autenticación y la autorización antes de elegir las credenciales de acceso adecuadas para la app.

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

Objetivos

Configurar el entorno
Configura la muestra.
Ejecuta la muestra.

Requisitos previos

Se instalaron Node.js y npm.
Un proyecto de Google Cloud

Una cuenta de Google for Education con Google Classroom habilitado

Configura tu entorno

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

Cómo habilitar la API

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

En la consola de Google Cloud, habilita la API de Google Classroom.

Habilitar la API

Cómo configurar la pantalla de consentimiento de OAuth

Si usas un proyecto de Google Cloud nuevo para completar esta guía de inicio rápido, configura la pantalla de consentimiento de OAuth y agrégate como usuario de prueba. Si ya completaste este paso para tu proyecto de Cloud, pasa a la siguiente sección.

En la consola de Google Cloud, ve a Menú > APIs y servicios > Pantalla de consentimiento de OAuth.
Ir a la pantalla de consentimiento de OAuth
Selecciona el tipo de usuario para tu app y, luego, haz clic en Create.
Complete el formulario de registro de la aplicación y, luego, haga clic en Guardar y continuar.
Por ahora, puedes omitir la opción de agregar permisos y hacer clic en Guardar y continuar. En el futuro, cuando crees una app para usarla fuera de tu organización de Google Workspace, deberás agregar y verificar los permisos de autorización que requiere tu app.
Si seleccionaste Externo como tipo de usuario, agrega usuarios de prueba:
1. En Usuarios de prueba, haz clic en Agregar usuarios.
2. Ingresa tu dirección de correo electrónico y cualquier otro usuario de prueba autorizado. Luego, haz clic en Guardar y continuar.
Revisa el resumen del registro de tu app. Para realizar cambios, haz clic en Editar. Si el registro de la app es correcto, haz clic en Volver al panel.

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 IDs de cliente de OAuth 2.0. Un ID de cliente se usa con el fin de identificar una sola app para los servidores de OAuth de Google. Si la app se ejecuta en varias plataformas, debes crear un ID de cliente distinto para cada una.

En la consola de Google Cloud, ve a Menú > APIs y servicios > Credenciales.
Ir a Credenciales
Haz clic en Crear credenciales > ID de cliente de OAuth.
Haz clic en Tipo de aplicación > Aplicación web.
En el campo Nombre, escribe un nombre para la credencial. Este nombre solo se muestra en la consola de Google Cloud.
Agrega URIs 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. Identifica los dominios desde los cuales tu aplicación puede enviar solicitudes de API al servidor OAuth 2.0.
- Apps del servidor (Java, Python y mucho más): En URI de redireccionamiento autorizados, haz clic en Agregar URI. Luego, ingresa un URI de extremo al que el servidor OAuth 2.0 pueda enviar respuestas.
Haz clic en Crear. Aparecerá la pantalla de creación del cliente OAuth que muestra tu ID de cliente nuevo y el secreto de cliente.
Toma nota del ID de cliente. Los secretos del cliente no se usan para las aplicaciones web.
Haz clic en OK. La credencial creada recientemente aparecerá en ID de cliente de OAuth 2.0.

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

Crea una clave de API

En la consola de Google Cloud, ve a Menú > APIs y servicios > Credenciales.
Ir a Credenciales
Haz clic en Crear credenciales > Clave de API.
Aparecerá tu nueva clave de API.
- Haz clic en Copiar para copiar tu clave de API y usarla en el código de tu app. También puedes encontrar la clave de API en la sección "Claves de API" de las credenciales de tu proyecto.
- Haz clic en Restringir clave para actualizar la configuración avanzada y limitar el uso de tu clave de API. Para obtener más detalles, consulta Cómo aplicar restricciones de clave de API.

Configura la muestra

En el directorio de trabajo, crea un archivo llamado index.html.

En el archivo index.html, pega el siguiente código de muestra:

classroom/quickstart/index.html

Ver en GitHub

<!DOCTYPE html>
<html>
  <head>
    <title>Classroom API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Classroom 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://classroom.googleapis.com/$discovery/rest';

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

        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 names of the first 10 courses the user has access to. If
       * no courses are found an appropriate message is printed.
       */
      async function listCourses() {
        let response;
        try {
          response = await gapi.client.classroom.courses.list({
            pageSize: 10,
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }

        const courses = response.result.courses;
        if (!courses || courses.length == 0) {
          document.getElementById('content').innerText = 'No courses found.';
          return;
        }
        // Flatten to string to display
        const output = courses.reduce(
            (str, course) => `${str}${course.name}\n`,
            'Courses:\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:

YOUR_CLIENT_ID: Es el ID de cliente que creaste cuando autorizaste las credenciales para una aplicación web.
YOUR_API_KEY: Es la clave de API que creaste como requisito previo.

Ejecutar la muestra

En tu directorio de trabajo, instala el paquete http-server:
```
npm install http-server
```
En el directorio de trabajo, inicia un servidor web:
```
npx http-server -p 8000
```

En tu navegador, ve a http://localhost:8000.
Verás un mensaje para autorizar el acceso:
1. Si aún no accediste a tu Cuenta de Google, hazlo cuando se te solicite. Si accediste a varias cuentas, selecciona una para usar en la autorización.
2. Haz clic en Aceptar.

Tu aplicación de JavaScript ejecuta y llama a la API de Google Classroom.