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

Nube Colectiva

hace 6 años

En esta página:

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


<!-- Botones -->
<button id="autorizar_btn" style="display: none;">Autorizar</button>
<button id="desconectar_btn" style="display: none;">Desconectar</button>

<!-- Tabla HTML (Bootstrap 4) para mostrar los Archivos de Google Drive  -->
<table id="root" class="table table-hover table-bordered table-responsive">
</table>

<button id="autorizar_btn" style="display: none;">Autorizar</button>

<button id="desconectar_btn" style="display: none;">Desconectar</button>

</table>

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


<script type="text/javascript">
      
      // Acá Pega el Cliente ID y el API Key que creaste 
      var CLIENT_ID = 'acá Cliente ID';
      var API_KEY = 'acá API Key';
      
      // Cargamos el servicio Rest API de Google 
      var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
 
      // El servicio de Autenticación con una cuenta de Google 
      var SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';
      
      // Seleccionamos los botones de Iniciar Sesión y Cerrar Sesión 
      var authorizeButton = document.getElementById('autorizar_btn');
      var signoutButton = document.getElementById('desconectar_btn');

      
      function handleClientLoad() {
        gapi.load('client:auth2', initClient);
      }

     
      function initClient() {
        gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          discoveryDocs: DISCOVERY_DOCS,
          scope: SCOPES
        }).then(function () {
          
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
          authorizeButton.onclick = handleAuthClick;
          signoutButton.onclick = handleSignoutClick;
        });
      }

      function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
          authorizeButton.style.display = 'none';
          signoutButton.style.display = 'block';
          listFiles();
        } else {
          authorizeButton.style.display = 'block';
          signoutButton.style.display = 'none';
        }
      }

      
      function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
      }

      function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

      function appendPre(message) {
        var pre = document.getElementById('root');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }
      
      // Acá listamos los archivos de nuestra cuenta de Google Drive, especificamos que datos de los archivos queremos mostrar 
      function listFiles() {
        gapi.client.drive.files.list({
          'pageSize': 10,
          'fields': "nextPageToken, files(id, name, mimeType, createdTime, size)"
        }).then(function(response) {
          
          var files = response.result.files;     
          
          var table = document.getElementById('root');
          listarenTabla(table, ['ID', 'Nombre', 'mimeType', 'Fecha de Creación', 'Tamaño'], 'th');     

          if (files && files.length > 0) {
            for (var i = 0; i < files.length; i++) {              

              var file = files[i];              

              listarenTabla(table, [
                file.id,
                file.name,
                file.mimeType,
                file.createdTime,
                file.size + ' Kbs'
              ]);

              //appendPre(file.name + ' / ' + file.id + ' / ' + file.mimeType + ' / ' + file.createdTime + ' / ' + file.size + ' Kbs') + "<br>";

            }
          } else {
            appendPre('No hay archivos.');
          }
        });
      }

      // Función para pintar la tabla HTML (Bootstrap 4)
      function listarenTabla (table, elements, tag) {
        
        var row = document.createElement('tr')
        elements.forEach(function (e) {

          var cell = document.createElement(tag || 'td')

          if (typeof e === 'string') {
            cell.textContent = e
          } else {
            cell.appendChild(e)
          }
                  
          row.appendChild(cell)
        })

        table.appendChild(row)
      }

</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

// Acá Pega el Cliente ID y el API Key que creaste

var CLIENT_ID = 'acá Cliente ID';

var API_KEY = 'acá API Key';

// Cargamos el servicio Rest API de Google

var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];

// El servicio de Autenticación con una cuenta de Google

var SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';

// Seleccionamos los botones de Iniciar Sesión y Cerrar Sesión

var authorizeButton = document.getElementById('autorizar_btn');

var signoutButton = document.getElementById('desconectar_btn');

function handleClientLoad() {

gapi.load('client:auth2', initClient);

}

function initClient() {

gapi.client.init({

apiKey: API_KEY,

clientId: CLIENT_ID,

discoveryDocs: DISCOVERY_DOCS,

scope: SCOPES

}).then(function () {

gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());

authorizeButton.onclick = handleAuthClick;

signoutButton.onclick = handleSignoutClick;

});

}

function updateSigninStatus(isSignedIn) {

if (isSignedIn) {

authorizeButton.style.display = 'none';

signoutButton.style.display = 'block';

listFiles();

} else {

authorizeButton.style.display = 'block';

signoutButton.style.display = 'none';

}

function handleAuthClick(event) {

gapi.auth2.getAuthInstance().signIn();

}

function handleSignoutClick(event) {

gapi.auth2.getAuthInstance().signOut();

}

function appendPre(message) {

var pre = document.getElementById('root');

var textContent = document.createTextNode(message + '\n');

pre.appendChild(textContent);

}

// Acá listamos los archivos de nuestra cuenta de Google Drive, especificamos que datos de los archivos queremos mostrar

function listFiles() {

gapi.client.drive.files.list({

'pageSize': 10,

'fields': "nextPageToken, files(id, name, mimeType, createdTime, size)"

}).then(function(response) {

var files = response.result.files;

var table = document.getElementById('root');

listarenTabla(table, ['ID', 'Nombre', 'mimeType', 'Fecha de Creación', 'Tamaño'], 'th');

if (files && files.length > 0) {

for (var i = 0; i < files.length; i++) {

var file = files[i];

listarenTabla(table, [

file.id,

file.name,

file.mimeType,

file.createdTime,

file.size + ' Kbs'

]);

//appendPre(file.name + ' / ' + file.id + ' / ' + file.mimeType + ' / ' + file.createdTime + ' / ' + file.size + ' Kbs') + "<br>";

}

} else {

appendPre('No hay archivos.');

}

});

}

// Función para pintar la tabla HTML (Bootstrap 4)

function listarenTabla (table, elements, tag) {

var row = document.createElement('tr')

elements.forEach(function (e) {

var cell = document.createElement(tag || 'td')

if (typeof e === 'string') {

cell.textContent = e

} else {

cell.appendChild(e)

}

row.appendChild(cell)

})

table.appendChild(row)

}

</script>

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


<script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

onload="this.onload=function(){};handleClientLoad()"

onreadystatechange="if (this.readyState === 'complete') this.onload()">

</script>

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

Los pasos mencionados en este tutorial pueden cambiar en futuras versiones de Google Cloud Console, asimismo el código puede ser modificado por Google, esto no depende de nosotros si no de Google que es la empresa que da soporte a Google Cloud Console y a su API Web de Google Drive.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.