Google Drive API (or any other Google API using Oauth)

I’ve been looking through the forums and just by typing in ‘Google’ it looks like there’s a ton of discussions going on regarding the Google Maps API and its implementation within Ionic, however, I haven’t been able to find that many on any of the other API’s that Google has to offer, for example the Google Drive API and/or Sheets API.

Google API’s:
https://developers.google.com/drive/v2/reference/

After walking away from ng-conf 2015, I began thinking about something that Kelly Knight mentioned in her talk with Dirk about how her team uses Google Sheets as a source for data and pulls that into their prototypes (about 16:15 in the video below). I thought that was pretty cool and after doing some research, it seems like others have thought about this approach as well.

Prototyping with Angular? YES Kelly Knight & Dirk Ginader

Some references regarding the Sheets API



http://www.nczonline.net/blog/2014/03/04/accessing-google-spreadsheets-from-node-js/

But … it doesn’t look like anyone has actually tried to do this in Ionic (at least not in the forums)… So … here I am with a blank Ionic proj loaded up and ready to go and have been looking at the following references to begin my attempt but was wondering if anyone has tried this yet and if there’s any learnings and/or challenges that you might have encountered along the way. Specifically regarding ngCordova and it’s Oauth plugin.

Some others I found that are similar to what I’ll be working on:
http://blog.ionic.io/oauth-ionic-ngcordova/
http://techiedreams.com/facebook-and-google-oauth-with-ionic-and-angularjs/

1 Like

Hi,

did you make any progress on your issue. Planning to use the Google Drive API in the future to…

Regards,
Philipp

Hi,

Actually yep, I ended up using Firebase which made it super simple.

I haven’t had the chance to update my progress here but it turns out that if you decide to use Firebase for Oauth (which you should), when you pass the scope value via authWithOAuthPopup, you can literally pass the scope of any Google API (it must set up in Google first, of course).

For example:

var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.authWithOAuthPopup("google", function(error, authData) { /* Your Code */ }, {
  scope: "https://spreadsheets.google.com/feeds"
});

If there are no errors, the response will bring back an access token which you can then use to access the sheets API:

$http({
	method: 'GET',
	url: 'https://spreadsheets.google.com/feeds/spreadsheets/private/full',
	params: {
		access_token: <PLACE RESPONSE TOKEN HERE>,
		alt: 'json-in-script'
	}
}).then(success, error);

And then do what you wish to do from there.

I know it’s not super detailed and I plan to come back to this when I’m done but this should get you in the general direction.

Firebase Google Auth:

Would be great to hear more about where you are at with this. I’m trying to bring Google Drive into my application and have found it to be a bit of a struggle. I was able to get the Oauth side working using Drive.authenticate method of this Service. But have ran into “Invalid ‘X-Frame-Options’” Errors as shown in this SO post When trying to show the picker window.

Yea, unfortunately, the process in getting some sheet data was also a bit of a struggle for me after the initial auth. The API wasn’t really built to support client-side consumption, so it required a couple of chained promises to return some relevant data. In my case, with token in hand, I had to go through a few connections (which supplied their own XHR URL’s) in order to dig deeper and finally get to where I could query the sheet. With that said, I abandoned the project for now and am waiting to see how all of this will evolve. Plus, I was waiting for ng2 to release before spending more time on this.

Now that Firebase is owned by Google, I’m hoping that they integrate with Google API’s a lot deeper. For example, how great would it be if you could sign up and manage the API’s (or others) via the main Firebase dash? For those of us that don’t want to depend on the server to consume data, we could do all of the API communication (Google Maps, Search, etc.) via Firebase. It seems natural to go into this direction when we’re already using Firebase for the majority of what we need a server for … Auth, DB, etc. All it needs now is API support.

I hear you on the Firebase API integration; that would be amazing. I wish I could wait for it to happen but when it comes to the Google Drive integration I kind of let my mouth write a check that my behind may not be able to cash.

This is for an app to let school Parent Teacher Associations schedule and manage fundraising events and I’m already about a month behind where I need need to be. I need them to be able to access their Google Drive to attach documents and event flyer images to events that will be shown in the event feed. I’ll post back here when I come up with something.