Las guías de inicio rápido explican cómo configurar y ejecutar una app que llama a un API de Google Workspace.
Las guías de inicio rápido de Google Workspace usan las bibliotecas cliente de la API para controlar algunas los detalles del flujo de autenticación y autorización. Te recomendamos lo siguiente: usas las bibliotecas cliente para tus propias apps. En esta guía de inicio rápido, se usa un de autenticación simplificado, adecuado para realizar pruebas en un entorno de nube. Para un entorno de producción, recomendamos conocer autenticación y autorización antes de elige las credenciales de acceso que sean adecuados para tu app.
Crear 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
- Node.js y npm esté instalado.
- Un servicio de proyecto.
- Una Cuenta de Google con Google Drive habilitado
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 Google Drive.
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 has completaste este paso para tu proyecto de Cloud, ve a la siguiente sección.
- En la consola de Google Cloud, ve a Menú > APIs y Servicios > Pantalla de consentimiento de OAuth.
- En Tipo de usuario, selecciona Interno y, luego, haz clic en Crear.
- Completa el formulario de registro de apps y, luego, haz clic en Guardar y continuar.
Por ahora, puedes omitir el paso 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, debes cambiar el Tipo de usuario a Externo y, luego, agregar los permisos de autorización que requiere tu app.
- Revisa el resumen del registro de tu app. Para realizar cambios, haz clic en Editar. Si la aplicación el registro parece estar bien, haz clic en Volver al panel.
Autoriza credenciales para una aplicación web
Para autenticar usuarios finales y acceder a sus datos en tu app, debes hacer lo siguiente: 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 tu app se ejecuta en varias plataformas debes crear un ID de cliente diferente para cada plataforma.- En la consola de Google Cloud, ve a Menú > APIs y Servicios > 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 URI autorizados relacionados con tu aplicación:
- 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 OAuth 2.0.
- Apps del servidor (Java, Python y más): en Authorized redirect URIs, haz clic en Add URI. Luego, ingresa un URI de extremo al que el servidor de OAuth 2.0 pueda enviar respuestas.
- Haz clic en Crear. Aparecerá la pantalla de creación del cliente de OAuth, en la que se mostrará tu nuevo ID de cliente y secreto del cliente.
Anota el ID de cliente. Los secretos del cliente no se usan para las aplicaciones web.
- Haz clic en Aceptar. La credencial creada recientemente aparece en ID de cliente de OAuth 2.0.
Toma nota de estas credenciales, ya que 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.
- Haz clic en Crear credenciales >. Clave de API.
- 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 que se encuentran 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 Aplica 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:Reemplaza lo siguiente:
YOUR_CLIENT_ID
: Es el ID de cliente que creaste. cuando credenciales autorizadas para una aplicación web.YOUR_API_KEY
: La clave de API que creaste como un requisito previo.
Ejecuta la muestra
En el 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:
- Si aún no accediste a tu Cuenta de Google, hazlo cuando se te solicite. Si accediste a varias cuentas, selecciona una para usar la autorización.
- Haz clic en Aceptar.
Tu aplicación de JavaScript se ejecuta y llama a la API de Google Drive.
Próximos pasos
- Soluciona problemas de autenticación y autorización
- Documentación de referencia de la API de Drive
- Sección
google-api-javascript-client
de GitHub