javascript - How to authenticate with Google via OAuth 2.0 in a popup?

Question

Sorry for a big edit. I am starting over as I am not stating my question correctly.

I am trying to write a client side app in HTML5. I do not want it to be hosted on a website. I am not even sure this is possible, I am fairly new to this type of application.

Anyway, I want to access Google services, which requires authenticate such as OAuth. Being that it is javascript, it sounds like OAuth2 is what I need.

I am trying to open up the google authentication in a popup (I have this part), let the user allow access, and then pass flow back to my application which can then query Google services. Problem is either 1. it asks the user to copy/paste a token into the app whenever I use response_type=code, but if I use response_type=token it requires that I redirect back to a valid URL which, since this is not hosted on a webserver, there is none.

So how can I use OAuth, and let the user grant access seamlessly?

Answer 1

You should have some Redirect URL defined for Google to redirect to after the authentication is done. If you cant host your pages on any web site, you can very well host it in local host.

Regarding getting the access token from the popup to the main parent window, you can setup a timer in parent window which keeps on checking the document location of the popup. Once the document location matches the Redirect URL, u can parse the access token which will will be in the URL itself.

I wrote a tutorial on exactly the same problem (using local host) yesterday and here is the link: http://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html

Hope you will find it useful.