De Google Drive REST API

Bronnen

1. De Google Drive REST API Overview
2. De Google Drive REST API Reference (naslag)
3. How to use CORS to access Google APIs (Cross-origin Resource Sharing)

Inleiding

In deze les gebruiken we geen Google Drive Library maar maken we REST call's met behulp van het XMLHttpRequest object.

We halen een toeganscode op - we gaan ervan uit dat de gebruiker is aangemeld met oAuth - en voegen die als key/value paar toe aan de request header. We maken een exemplaar van het XMLHttpRequest object. In de URL zetten we de call naar de Google Drive API en geven in de querystring mee dat we de deleted bestanden niet willen en dat we enkel het bestandsicoon en de naam willen ophalen:

function getFiles() {
    var accessToken = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token; // or this: gapi.auth.getToken().access_token;
    var ajax = new XMLHttpRequest();
    ajax.open("GET", "https://www.googleapis.com/drive/v3/files?q=not+trashed&fields=files(iconLink%2Cname)", true);
    ajax.setRequestHeader('Authorization', 'Bearer ' + accessToken);
    ajax.onreadystatechange = function() {
        // server sent response and
        // OK 200 The request was fulfilled.
        if (ajax.readyState == 4 && ajax.status == 200) {
           var response = JSON.parse(ajax.responseText);
        var ul = document.getElementById("list");
        for (var i = 0; i < response.files.length; i++) {
            var item = response.files[i];
            var li = document.createElement("li");
            li.innerHTML = "<img src='" + item.iconLink + "'> " + item.name;
            ul.appendChild(li);
        }

        }
    };
    ajax.send();
}

Deze functie plaatsen we in een bestand met de naam google-drive-api-rest.js in de map js. Je vind de volledige code op mijn team workspace in les 12.