¿Tus usuarios usan Classroom con Google Meet? Consulta la guía de inicio rápido de Apps Script, en la que se explica cómo comprobar la asistencia de los alumnos en los cursos de Google Meet.

Guía de inicio rápido de JavaScript

Completa los pasos descritos en el resto de esta página para crear una aplicación web de JavaScript simple que realice solicitudes a la API de Classroom.

Prerequisites

Para ejecutar esta guía de inicio rápido, necesitas los siguientes requisitos previos:

  • Python 2.4 o superior (para proporcionar un servidor web)
  • Un proyecto de Google Cloud Platform con la API habilitada Para crear un proyecto y habilitar una API, consulta Crea un proyecto y habilita la API.
  • Credenciales de autorización para una aplicación de escritorio Si quieres obtener información sobre cómo crear credenciales para una aplicación de escritorio, consulta Crea credenciales.

  • Una cuenta de G Suite for Education con Google Classroom habilitado

Paso 1: Configura la muestra

Para configurar la muestra, haz lo siguiente:

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

  2. Incluye el siguiente código en index.html:

    classroom/quickstart/index.html
    <!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', intializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function intializeGapiClient() {
        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>

  3. En el código, reemplaza <YOUR_CLIENT_ID> por el ID de cliente que creaste como un Requisito previo para esta guía de inicio rápido.

  4. En el código, reemplaza <YOUR_API_KEY> por la clave de API que creaste como un Requisito previo para esta guía de inicio rápido.

Paso 2: Ejecuta la muestra

Realiza lo siguiente para ejecutar la muestra:

  1. Inicia el servidor web con el siguiente comando desde tu directorio de trabajo:

Python 2.x

python -m SimpleHTTPServer 8000

Python 3.x

python -m http.server 8000

  1. En tu navegador, navega a http://localhost:8000.

  2. (opcional). Si es la primera vez que ejecutas la muestra, se abrirá una pantalla de consentimiento de OAuth que te pedirá que autorices a la app para acceder a tus datos en tu nombre:

    1. Si aún no lo has hecho, se te solicitará que lo hagas. Si accediste a varias Cuentas de Google, se te pedirá que selecciones una para usar en la autorización.

    2. Haz clic en Aceptar. La app está autorizada para acceder a tus datos.

  3. Se ejecuta la muestra.

Si tienes problemas, consulta la sección Soluciona problemas de la muestra.

Soluciona problemas de la muestra

En esta sección, se describen algunos problemas comunes que puedes encontrar cuando intentas ejecutar esta guía de inicio rápido.

Error: origin_mismatch

Este error se produce durante el flujo de autorización si el host y el puerto utilizados para entregar la página web no coinciden con un origen de JavaScript permitido en tu proyecto de Google Developers Console. Asegúrate de establecer un origen de JavaScript autorizado y que la URL de tu navegador coincida con la URL de origen.

idpiframe_initialization_failed: Failed to read the 'localStorage' property from 'Window'

Este error se produce cuando las cookies y el almacenamiento de datos de terceros no están habilitados en el navegador. La biblioteca de Acceso con Google requiere estas opciones. Para obtener más información, consulta Almacenamiento de datos y cookies de terceros.

idpiframe_initialization_failed: Not a valid origin for the client

Este error se produce cuando el dominio registrado como Requisito previo no coincide con el dominio que se usa para alojar la página web. Asegúrate de que el origen que registraste como Requisito previo coincida con la URL en el navegador.

This app isn't verified

Si en la pantalla de consentimiento de OAuth se muestra el mensaje de advertencia "Esta app no está verificada", significa que tu app solicita permisos que proporcionan acceso a datos sensibles del usuario. Si tu aplicación usa permisos sensibles, debe someterse al proceso de verificación para quitar esa advertencia y otras limitaciones. Durante la fase de desarrollo, para continuar más allá de esta advertencia, selecciona Advanced > Go to {Project Name}(no seguro).

Lecturas adicionales

Para obtener más información sobre las API que se usan en esta guía de inicio rápido, consulta la biblioteca cliente de las API de Google para JavaScript.