Javascript – How to do OAuth request by open new window, instead of redirect user from current page

facebookjavascriptpopuptwitter

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?

Best Answer

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)

Related Solutions

Javascript – How to manage a redirect request after a jQuery Ajax call

I read this question and implemented the approach that has been stated regarding setting the response HTTP status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to AJAX requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The JavaScript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an AJAX request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jQuery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        } else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

Javascript – Avoid browser popup blockers

The general rule is that popup blockers will engage if window.open or similar is invoked from javascript that is not invoked by direct user action. That is, you can call window.open in response to a button click without getting hit by the popup blocker, but if you put the same code in a timer event it will be blocked. Depth of call chain is also a factor - some older browsers only look at the immediate caller, newer browsers can backtrack a little to see if the caller's caller was a mouse click etc. Keep it as shallow as you can to avoid the popup blockers.

Best Answer

Related Solutions

Javascript – How to manage a redirect request after a jQuery Ajax call

Javascript – Avoid browser popup blockers

Related Topic