Guía de inicio rápido de JavaScript

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

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. En esta guía de inicio rápido, se usa un enfoque de autenticación simplificado que es adecuado para un entorno de pruebas. Para un entorno de producción, te recomendamos que obtengas información sobre la autenticación y la autorización antes de elegir las credenciales de acceso adecuadas para tu app.

En esta guía de inicio rápido, se usan las bibliotecas cliente de API recomendadas de Google Workspace para controlar algunos detalles del flujo de autenticación y autorización.

Objetivos

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

Requisitos previos

• Node.js y npm instalados.
• Un proyecto de Google Cloud.

• Un dominio de Google Workspace con el acceso a la API habilitado.
• Una Cuenta de Google en ese dominio con privilegios de administrador

Configura tu entorno

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

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

  Habilitar la API

Cómo configurar la pantalla de consentimiento de OAuth

Si usas un proyecto nuevo de Google Cloud para completar esta guía de inicio rápido, configura la pantalla de consentimiento de OAuth. Si ya completaste este paso para tu proyecto de Cloud, ve a la siguiente sección.

1. En la Consola de APIs de Google, ve a Menú > Plataforma de autenticación de Google > Branding.

   Ir a Branding

2. Si ya configuraste la plataforma de autenticación de Google, puedes configurar los siguientes parámetros de configuración de la pantalla de consentimiento de OAuth en Branding, Público y Acceso a los datos. Si ves un mensaje que dice Aún no se configuró la plataforma de autenticación de Google, haz clic en Comenzar:
1. En Información de la app, en Nombre de la app, ingresa un nombre para la app.
2. En Correo electrónico de asistencia al usuario, elige una dirección de correo electrónico de asistencia en la que los usuarios puedan comunicarse contigo si tienen preguntas sobre su consentimiento.
3. Haz clic en Siguiente.
4. En Público, selecciona Interno.
5. Haz clic en Siguiente.
6. En Información de contacto, ingresa una Dirección de correo electrónico en la que puedas recibir notificaciones sobre cualquier cambio en tu proyecto.
7. Haz clic en Siguiente.
8. En Finalizar, revisa la Política de Datos del Usuario de los Servicios de las APIs de Google y, si estás de acuerdo, selecciona Acepto la Política de Datos del Usuario de los Servicios de las APIs de Google.
9. Haz clic en Continuar.
10. Haz clic en Crear.
3. Por ahora, puedes omitir la adición de permisos. En el futuro, cuando crees una app para usar fuera de tu organización de Google Workspace, debes cambiar el Tipo de usuario a Externo. Luego, agrega los permisos de autorización que requiere tu app. Para obtener más información, consulta la guía completa Configura el consentimiento de OAuth guide.

Autoriza las credenciales para una aplicación web

Para autenticar a los usuarios finales 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 independiente para cada una.

1. En la Consola de APIs de Google, ve a Menú > Plataforma de autenticación de Google > Clientes.

   Ir a Clientes

2. Haz clic en Crear cliente.
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 la Consola de APIs de Google.
5. 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. Esto identifica los dominios desde los que tu aplicación puede enviar solicitudes a la API al servidor de OAuth 2.0.
   • Apps del servidor (Java, Python y más): En URIs 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.

   La credencial recién creada aparece en IDs de cliente de OAuth 2.0.

   Toma nota del ID de cliente. Los secretos del cliente no se usan para las aplicaciones web.

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

1. En la consola de Google Cloud, ve a Menú > APIs y servicios > Credenciales.

   Ir a Credenciales

2. Haz clic en Crear credenciales > Clave de API.
3. Se mostrará tu nueva clave de API.
   • Haz clic en Copiar para copiar tu clave de API y usarla en el código de tu app. La clave de API también se puede encontrar en la sección "Claves de API" de las credenciales de tu proyecto.
   • Para evitar el uso no autorizado, te recomendamos restringir dónde y para qué APIs se puede usar la clave de API Para obtener más detalles, consulta Agrega restricciones de API.

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:

   people/quickstart/index.html

   Ver en GitHub
   <!DOCTYPE html>
   <html>
     <head>
       <title>People API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>People 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/people/v1/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/contacts.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 listConnectionNames();
           };
   
           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 display name if available for 10 connections.
          */
         async function listConnectionNames() {
           let response;
           try {
             // Fetch first 10 files
             response = await gapi.client.people.people.connections.list({
               'resourceName': 'people/me',
               'pageSize': 10,
               'personFields': 'names,emailAddresses',
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
           const connections = response.result.connections;
           if (!connections || connections.length == 0) {
             document.getElementById('content').innerText = 'No connections found.';
             return;
           }
           // Flatten to string to display
           const output = connections.reduce(
               (str, person) => {
                 if (!person.names || person.names.length === 0) {
                   return `${str}Missing display name\n`;
                 }
                 return `${str}${person.names[0].displayName}\n`;
               },
               'Connections:\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.

Ejecuta la muestra

1. En tu directorio de trabajo, instala el paquete http-server:

   npm install http-server
   

2. En tu directorio de trabajo, inicia un servidor web:

   npx http-server -p 8000
   

3. En tu navegador, ve a http://localhost:8000.
4. 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 usarla en la autorización.
   2. Haz clic en Aceptar.

Tu aplicación de JavaScript se ejecuta y llama a la API de People.

Próximos pasos

• Prueba las APIs de Google Workspace en el Explorador de APIs
  • Soluciona problemas de autenticación y autorización.
  • Documentación de referencia de la API de People
  • Sección google-api-javascript-client de GitHub