How can I do OAuth request by open new window, instead of redirect user from current page?

Question

I have done OAuth authentication with Twitter and Facebook. Currently, with each of these site, my server redirect user to a specified URL (for example, http://api.twitter.com/oauth/authorize with Twitter), then receive authentication parameters by callback url.

But by that way, the users get redirected out of my page (to Facebook or Twitter), and only returns after input correct username & password. It's like the way http://techcrunch.com do it when a user try to tweet a post.

I remember that in some site, I have seen that we can connect not by redirect user out, but open a popup window for user to input credentials instead. After authentication is completde, the pop-up closed, the main page refresh with new content.

This could be a very simple task with javascript, but I still can't figure it out. I can open authentication URL in a pop-up window, but how to get the result & update the main page?

Solution

Assuming you're opening authentication url in a pop-up using window.open(), you can access parent window by using:

window.opener

and to reload parent window (from a pop-up) use:

window.opener.location.reload();

This code should be served on url that you've set up as success callback url of oauth authorization.

In general, the flow should be:

• open a pop-up with an authorization page (on twitter.com for example)
• after successfull authorization twitter redirects user to url given by you (it gets opened in the very same pop-up)
• the opener window gets reloaded (via window.opener.location.reload())
• close the pop-up itself (using javascript is you want)

Comments

[Hoàng Long]

you mean I put javascript in the popup window to do this?

[WTK]

Yep, in the pop-up, on a page that is a success callback of oauth authorization. So the flow is: you open a pop-up with an authorization page (on twitter.com for example), after successfull authorization twitter redirects user to url given by you (it gets opened in the very same pop-up), on that callback page you put a javascript from my answer, the opener window gets reloaded and you can simply close the pop-up using javascript as well.