Google+ Sign in from Javascript - Invalid Parameter value for origin

Question

I've been going through the steps to add a Google+ Sign-in to my web application as found in https://developers.google.com/+/web/signin/

When used in a 'typical' web site, the 'client side' flow works just fine. Now, I'm trying to integrate this Google+ sign inside PhoneGap. Since PhoneGap runs the web page as a file:// URL, the origin that gets sent in the request is file://. In every other PhoneGap I've written, this hasn't been a problem.

However, when I click the Google+ sign in button from my page in PhoneGap, the origin being sent as file:// causes the following error message:

Error: invalid_request
Invalid parameter value for origin: Missing authority: file://

I went to the Google API console and tried to assign file:// as an authorized Javascript origin. But, of course, it doesn't allow file:// to be entered as an origin.

So I'm wondering if anyone has any insight in how to do this kind of web-style (Javascript) Google+ sign in from within PhoneGap (or from a local web page where there is no server - just a page being run as a file://). I really don't want to have to do the sign-in in native code and then integrate the token back over into the 'PhoneGap' realm since that kind of defeats the purpose of writing the app once for multiple platforms.

Answer 1

My understanding is that you cannot use the standard client-side flow with Cordova/PhoneGap because file:// is not a valid origin.

However, you can use the In-App Browser plugin along with window.open, which will allow to initiate a "standard" client-side flow from within the application. You then listen to events on the opened window to deal with the responses.

The plugin works cross-platform so you won't have to maintain multiple native implementations.

The ng-cordova-oauth library implements this for AngularJS.

For more details about the implementation, see this tutorial for details, as well as the Google OAuth documentation.