I want to integrate google drive in my Ionic app, but there isn’t much help available for this over the forum or web.
If someone can provide a demo project with the Ionic/ng-cordova/google-drive integration that would be very helpful. I tried to make it work using cordovaOauth plugin but couldn’t.
I have couple of questions with regard to this, what kind of app should I create on google.developer.console a web-app or installed-ios-app? Secondly, which api should I use for google drive authentication cordovaOauth or googleApi?
Hey,
I don’t have a demo app to show you as it does depend on what you are trying to achieve. But the fundamentals are straight forward to walk you through.
You need to create a web-app, although it’s using Cordova and installed on an iOS device you are still making web calls. So you’ll need to obtain the relevant credentials from creating a web app. Here is the relevant documentation which includes a wizard to help you create the right app and credentials etc.
https://developers.google.com/drive/web/quickstart/js
Then you can use http://ngcordova.com/docs/plugins/oauth/ and more specifically the google provider signature $cordovaOauth.google(string clientId, appScope).
This will then provide you with an access token that you can use to make calls to the REST API. Here is a great library for simplifying the calls etc.
Using that library you shouldn’t need to make use of the cordova plugin, but it’s another option available to you.
Ionic is also just a AngularJS application at it’s heart so here’s an example of an AngularJS app which acts as a real-time TODO using GD.
Hopefully all that helps.
Hi delta98 thank you very much for your detail reply.
I think my problem is to set up the right web-app on google-developer-console. My problem is I don’t have backend-server for my project. And I tried too many different option to fix this issue for origin_missmatch_error
This is how I configure my application on google-developer-console,
I also tried with setting Javascript Origings as ‘none’, but nothing work 
I’m using $cordovaOauth for google authentication… any thoughts ?
Could you not just use the https://github.com/christiansmith/ngGAPI instead? Also with cordova OAuth you might need to set proxy in your ionic.project file.
Ahh! thanks for quick reply @delta98
I will create a demo project with this ngGAPI and will let you know if this works, Thanks 
Hey, can you please explain what do you mean by
"Also with cordova OAuth you might need to set proxy in your ionic.project file".
Service Proxies
The serve command can add some proxies to the http server. These proxies are useful if you are developing in the browser and you need to make calls to an external API. With this feature you can proxy request to the external api through the ionic http server preventing the No ‘Access-Control-Allow-Origin’ header is present on the requested resource error.
In the ionic.project file you can add a property with an array of proxies you want to add. The proxies are object with two properties:
path: string that will be matched against the beginning of the incoming request URL.
proxyUrl: a string with the url of where the proxied request should go.
{
"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}
Using the above configuration, you can now make requests to your local server at http://localhost:8100/v1 to have it proxy out requests to https://api.instagram.com/v1
http://ionicframework.com/docs/cli/test.html
I tried to use this https://github.com/christiansmith/ngGAPI library, the authentication method is not working. For demo project https://github.com/christiansmith/ngOAuthExamples ‘npm install’ command isn’t working getting deprecated errors.
However, I think I can’t use ngGAPI library for the authentication purpose as it doesn’t incorporate the ionic/ng-cordova/in-app-browser plugin behavior for google-authroization.
Hi @delta98.
Actually, my issue was;
I am using ngCordovaOauth javascript client ( https://github.com/nraboy/ng-cordova-oauth ) for google authorization, and then I was using google-api-javascript-client ( https://developers.google.com/api-client-library/javascript/start/start-js ) for google drive calls after loading google-drive client.
-
The problem was, ngCordovaOauth.google() authenticate method open authentication scheme within in-app-browser-plugin by directly calling google-oauth-url in the browser-url and after user authentication, it simply return the token information.
-
In order to use this token for any further calls with google-api javascript client I need to set this token in google-api javascript client like this;
gapi.auth.setToken(token_info);
So, it remembers the authentication token for any further calls
I wrote a simple demo project which first authenticate user with google and then access user google-drive files info. I also described step-by-step implementation in the readme file, here is the link.
Thanks for your help
I’m trying to impliment Google Drive picker using this plugin https://github.com/softmonkeyjapan/angular-google-picker.
But when the plugin calls gapi.auth.authorize and passes in my client id and API key my app crashes with no errors. For ionic applications should the client id in the Google APIs console be configured as a “Web Application”? Or do we need to make a separate client id with each having a type set to “Android” and “iOS”?
It’s all web. You need to create web application.
@mrazadar I got the authorization to work using your Drive.authenticate method here. But when trying to call the Drive.showPicker method I get the below errors;
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://docs.google.com’) does not match the recipient window’s origin (‘http://localhost’).
Invalid ‘X-Frame-Options’ header encountered when loading ‘https://docs.google.com/picker?protocol=gadgets&origin=http%3A%2F%2Flocalho…%3Atrue}))&rpctoken=e2x1eop3h1rr&rpcService=2qeo0ns6gu13&thirdParty=true’: ‘ALLOW-FROM http://localhost’ is not a recognized directive. The header will be ignored.
Similar to what is seen in this SO post
