Google Spreadsheets API with OAuth2.0 using Javascript

Question

I'm trying to access a private Google Spreadsheet using Javascript. I have sucessfully authorized with OAuth2.0 and can see a listing of all my Google Drive docs. What I can't seem to do is get into a specific spreadsheet. Code is as follows with the relevant spreadsheet code in the function "retrieveAllFiles". A lot of this is culled from Google tutorials.

var clientId = 'working';
var apiKey = 'working';
var scopes = 'https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/drive https://spreadsheets.google.com/feeds';

function handleClientLoad() {
    console.log('inside handleClientLoad function');
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
}

function checkAuth() {
    console.log('inside checkAuth function');
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
    console.log('finished checkAuth function');
}

function handleAuthResult(authResult) {
    console.log('inside handleAuthResult function');
    var authButton = document.getElementById('authButton');
    authButton.style.display = 'none';
    if (authResult && !authResult.error) {
        //Access token has been succesfully retrieved, requests can be sent to the API.
        apiCalls();
    } else {
        //No access token could be retrieved, show the button to start the authorization flow.
        authButton.style.display = 'block';
        authButton.onclick = function() {
            gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
        };
    }
}

function apiCalls() {
    console.log('inside apiCalls function');
    gapi.client.load('drive', 'v2', function() {
         retrieveAllFiles(callback);
    });
}

function retrieveAllFiles(callback) {
     $.get('http://spreadsheets.google.com/feeds/spreadsheets/private/full', function(data) {
        console.log('get request processed');
        console.log(data);
    });
    console.log('inside retrieveAllFiles function');
    var retrievePageOfFiles = function(request, result) {
        request.execute(function(resp) {
        result = result.concat(resp.items);
        var nextPageToken = resp.nextPageToken;
        if (nextPageToken) {
            request = gapi.client.drive.files.list({
                'pageToken': nextPageToken
            });
            retrievePageOfFiles(request, result);
        } else {
            callback(result);
        }
        });
    }
    var initialRequest = gapi.client.drive.files.list();
    retrievePageOfFiles(initialRequest, []);
}

function callback(result) {
    console.log('all should be loaded at this point');
    console.log(result);
    $('#drive-list').append('<ul class="items"></ul>');
    $.map(result, function(v,i){
        $('.items').append('<li>' + v.title + ':' + v.id + '</li>');
    });
}

So to be clear, the end result currently is a listing of all my Google Drive docs, but no console.log for "get data processed". I'm not getting any error messages in the console, so I can't tell what is going on.

Thanks.

Could you please tell me how to get the clientID for SpreadSheets? Thanks! — VladL
– VladL, Commented Dec 9, 2014 at 17:26
Go to Google's Developers Console. Either create a new project or login to an existing project. On the left sidebar, go to the section entitled Credentials under APIs & auth. It has a section called ClientID and you should be able to find out more there. — Josh
– Josh, Commented Dec 9, 2014 at 17:42

Josh · Accepted Answer · 2013-01-14 07:20:10Z

22

Final solution compiled from a bunch of different sources, hopefully this will help someone.

var scopes = 'https://spreadsheets.google.com/feeds';
var clientId = 'working';
var apiKey = 'working';

function handleClientLoad() {
    console.log('inside handleClientLoad function');
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
}

function checkAuth() {
    console.log('inside checkAuth function');
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
    console.log('finished checkAuth function');
}

function handleAuthResult(authResult) {
    console.log('inside handleAuthResult function');
    console.log(gapi.auth.getToken());
    var authButton = document.getElementById('authButton');
    authButton.style.display = 'none';
    if (authResult && !authResult.error) {
        //Access token has been successfully retrieved, requests can be sent to the API.
        loadClient();
    } else {
        //No access token could be retrieved, show the button to start the authorization flow.
        authButton.style.display = 'block';
        authButton.onclick = function() {
            gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
        };
    }
}

function loadClient() {
    console.log('inside loadClient function');
    var token = gapi.auth.getToken().access_token;
    var urlLocation = ''; //Get this from the URL of your Spreadsheet in the normal interface for Google Drive.

    //This gives a spitout of ALL spreadsheets that the user has access to.
    var url = 'https://spreadsheets.google.com/feeds/spreadsheets/private/full?access_token=' + token;

    //This gives a list of all worksheets inside the Spreadsheet, does not give actual data
    var url = 'https://spreadsheets.google.com/feeds/worksheets/' + urlLocation + '/private/full?access_token=' + token;

    //This gives the data in a list view - change the word list to cells to work from a cell view and see https://developers.google.com/google-apps/spreadsheets/#working_with_cell-based_feeds for details
    var url = 'https://spreadsheets.google.com/feeds/list/' + urlLocation + '/od6/private/full?access_token=' + token;

    console.log(url);
    $.get(url, function(data) {
        console.log(data);
    });
}

answered Jan 14, 2013 at 7:20

Josh

3,4526 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jla Over a year ago

I started getting "400 Bad Request" errors again when I first put in the auth_token. It turned out to be a bad worksheetId. It worked when I put in the value of gid= from the docs.google.com url for the spread sheet. I didn't try the full URL for urlLocation. The API docs and most other places say to use the key= value from the docs URL. So if it is docs.google.com/spreadsheet/ccc?key=blahblah&gid=5, then urlLocation='blahblah' and worksheetId=5 as in: 'spreadsheets.google.com/feeds/list/blahblah/5/private/…

Eric Nguyen Over a year ago

So, I get pretty far with this example, but cross-domain security restrictions stop me (i.e. "No 'Access-Control-Allow-Origin' header is present" etc.) Where did you run this script from to give your JS access to the response data?

Collectives™ on Stack Overflow

Google Spreadsheets API with OAuth2.0 using Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related