Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Integrando Google Drive API Web (Actualizado: 29-07-2019)

Demo Github

En ocasiones necesitas usar un servicio para alojar tus archivos o documentos en línea, básicamente en la nube, existen muchos servicios que ofrecen su API para Web u otros entornos y lenguajes de programación, uno de estos servicios es Google Drive, pertenece a Google y es uno de los mejores servicios junto a otros para crear, eliminar, exportar, listar, etc. archivos en su plataforma.

Antes de continuar te recomendamos leer nuestro artículo Que es una API en Desarrollo Web para que estés familiarizado con este Tutorial.

Google Console Developers

Ve a la Consola de Google , ingresa con tu cuenta Gmail, si no tienes una crea una nueva y luego ve Biblioteca y busca al API de Google Drive y luego de encontrarla dale clic para que te envíe a una página con un botón para Habilitar la API

API KEY / ID CLIENTE

Una vez que habilites la API, te enviará a una nueva página, ve a la parte izquierda de la pantalla y haz clic en Credenciales

Ahora has click en el texto enlace Credenciales en la sección API y servicios y te enviará a una nueva página

Luego has clic en el botón Azul Crear credenciales, se desplegará un conjunto de opciones, vas a crear 2 primero la API KEY y luego el Cliente ID, para que puedas integrar Google Drive API en tu sitio Web

Cuando creas el Cliente ID te va salir una pantalla para ponerle nombre, deja las opciones como están, luego dale guardar y te va enviar a una página de configuración de la Autenticación, primero coloca el dominio de tu proyecto y luego la página a donde debe redireccionar al usuario, después que inicie sesión con su cuenta de Google (gmail)

Al Guardar te enviará a una pantalla nueva en donde estará tu API KEY y el Cliente ID

Integración Google Drive API

A continuación vamos a crear la vista HTML en donde desplegaremos Google Drive, crearemos 3 elementos, un botón para iniciar sesión, otro para cerrar sesión y un contenedor en donde desplegaremos los archivos que tenemos guardados en Google Drive


Paso seguido agregaremos métodos nativos de Google para manejar Sesiones con una cuenta de Google(Gmail) y métodos para conectar a Google Drive y Listar los archivos que tengas alojados en Google Drive y otras funciones, en el código te explicamos que hacen las líneas de Código


Si ves en el código anterior en la parte en donde listamos los archivos de nuestra cuenta de Google Drive estamos llamando al id, nombre, formato de archivo, fecha de creación, tamaño del archivo, puedes obtener otros datos de los archivos, puedes consultar la documentación oficial en donde hay muchas propiedades que puedes usar según lo que deseas obtener de los archivos.

Por último debajo del código anterior coloca el siguiente código para llamar a la librería de APIs de Google con el evento onload que hace que cargen las APIs de Google que vamos a consumir, en este caso la API de Google Drive


Ahora abre tu proyecto en el Navegador, inicia sesión y da los permisos a tu cuenta, veras que se listaran los archivos de tu cuenta de Google Drive

Puedes optar por listar los archivos en una bonita tabla y trabajar con otros métodos, para eliminar, crear, actualizar, etc. archivos en tu  cuenta de Google Drive.

Nota

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos. 
Salir de la versión móvil