I am developing a PhoneGap application and require my users to sign in through Google with OAuth2. Is this possible directly through JavaScript? I have almost no experience with JavaScript (and jQuery).

What are the options? I have thought of a cumbersome alternative which involves posting the username/password to an application I have hosted on a server which then takes care of logging in. Then the PhoneGap app will have to ask the server if the authentication was successful. However, I was hoping there would be a simpler way.

What is the best way signing in through Google on a PhoneGap app?

I am developing a PhoneGap application and require my users to sign in through Google with OAuth2. Is this possible directly through JavaScript? I have almost no experience with JavaScript (and jQuery).

What are the options? I have thought of a cumbersome alternative which involves posting the username/password to an application I have hosted on a server which then takes care of logging in. Then the PhoneGap app will have to ask the server if the authentication was successful. However, I was hoping there would be a simpler way.

What is the best way signing in through Google on a PhoneGap app?

• javascript
• cordova
• oauth-2.0

• Libby's tutorial on this topic is probably the best place for you to start: mobiledevelopersolutions./home/start/twominutetutorials/… – Simon MacDonald Commented Mar 21, 2012 at 1:41

2 Answers 2

I have managed to get it working! I'm posting my thoughts here because I had a hard time finding the answer after hours of searching the web.

The important steps are:

• Make sure ChildBrowser works properly
• Setup a function that will listen to page changes window.plugins.childBrowser.onLocationChange = function(fooUrl) { console.log(fooUrl); }
• Build the URL with the query string as described in this tutorial
• Point ChildBrowser to the URL
• When the user logs in, you will be able to extract the session token from fooUrl

If you still don't know how to do this, have a look at this Android app. (There is a lot of code, and it might seem overwhelming, so I suggest only going for this as a last resort)

Google will not allow you to perform direct authentication by handling the user credentials directly. Instead Google wants you to perform an authentication protocol, typically OAuth 2.0. Other popular authentication protocols you may hear about is OpenID 1.0, 2.0, OpenID Connect, SAML 2.0, ID-FF, etc. These protocols will redirect the user to the Identity Provider (Google, in this case), and send you back with an assertion that you may use to trust the user. With APIs, like Google, you would make use of the authorization functionality of OAuth, which provides you with a token that you may use with all Google APIs after authentication.

• A good introduction to how OAuth 2.0 works

With PhoneGap and mobile apps, things are a bit different than the typical OAuth setup.

In your case, the browser is in a controlled environment, your app, and you may

• select to redirect the user to Google Authorization endpoint using the main view,
• select to open a ChildBrowser with the Google Authorization endpoint, to not lose any state on your app.
• to somehow open Safari or another browser with the authorization endpoint, and register a custom schema handler, to redirect the user back to your app after authentication.

These examples are vaguely mentioned in the OAuth 2.0 specifications, but there are no aid in what is the best or optimal in a specific use case. Often the best possible option is not perfect (from a user perspective).

I recently wrote a tutorial on how to make this work with Phonegap and ChildBrowser for iOS.

• OAuth 2.0 Guide for Phonegap using ChildBrowser and JSO