Usare Google Drive in Javascript

Mattepuffo's logo
Usare Google Drive in Javascript

Usare Google Drive in Javascript

Programmazione, Javascript - AJAX

Google mette a disposzione parecchie API per i suoi servizi; oggi vediamo come usare quelle per Google Drive con Javascript all'interno delle nostre web app!

Il punto di partenza, per qualsiasi API, è creare un progetto; potete iniziare con il wizard ufficiale.

Poi andate nella sezione Libreria ed attivate le API che volete, GDrive richiede delle credenziali, che potete creare nella sezione Credenziali.

Create quelle di tipo OAuth scegliendo Applicazione web.

Quindi impostate il dominio Origine Javascript autorizzate; questo dipende da dove girerà la vostra web application; salvatevi l'ID client.

Adesso create uun'altra credenziale di tipo Chiave API e salvatevi la chiave; anche qui, se volete, potete impostare dominio e restrizioni.

Per i test potete evitare, ma vi conviene impostarle in produzione per una questione di sicurezza.

Fatto ciò, questo il codice:

<!DOCTYPE html>
<html>
    <head>
        <title>GDRIVE JS TEST</title>
        <meta charset='utf-8'>
    </head>
    <body>
        <button id="authorize-button" style="display: none;">Autorizza</button>
        <button id="signout-button" style="display: none;">Sign out</button>
        <pre id="content"></pre>
        <script type="text/javascript">
            var CLIENT_ID = '';
            var API_KEY = '';
            var DISCOVERY_DOCS = 
                    ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
            var SCOPES = 
                    'https://www.googleapis.com/auth/drive.metadata.readonly';
            var authorizeButton = document.getElementById('authorize-button');
            var signoutButton = document.getElementById('signout-button');

            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;
                }).catch(function (err) {
                    console.log(err);
                });
            }

            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('content');
                var textContent = document.createTextNode(message + 'n');
                pre.appendChild(textContent);
            }

            function listFiles() {
                gapi.client.drive.files.list({
                    'pageSize': 10,
                    'fields': "nextPageToken, files(id, name)"
                }).then(function (response) {
                    appendPre('I TUOI FILES:');
                    var files = response.result.files;
                    if (files && files.length > 0) {
                        for (var i = 0; i < files.length; i++) {
                            var file = files[i];
                            appendPre(file.name + ' (' + file.id + ')');
                        }
                    } else {
                        appendPre('NON CI SONO FILES!');
                    }
                });
            }
        </script>

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

A me ha funzionato bene su Chrome / Chromium e Vivaldi; su Firefox mi ha dato qualche problema all'inizio, che dopo un pò di tentativi sembra si siano risolti da soli (bha!).

Comunque, al primo avvio comparirà il pulsante per l'autenticazione; una volta autenticato comparirà quello per logout e la lista dei files trovati.

Enjoy!

Condividi

Commentami!