Simple example of popup authentication with Facebook Graph API

Question

Trying to get Facebook to authenticate my users via a javascript popup. Right now, I have:

<input type="button" value="Connect with Facebook" onclick="window.open('https://graph.facebook.com/oauth/authorize?client_id=XXXXXXXXXXX&amp;redirect_uri=http://example.com/step2&amp;display=popup')"  />

But when the user logs in via Facebook, the popup just displays the Facebook.com homepage. I'd like for the popup to authenticate the user and go away so that I can start retrieving user data from the graph api.

Is there a better / easier way to do this? Simple examples are appreciated.

Thank you.

Answer 1

oauth2 in facebook involves two steps, call authorize to get code, then call access_token to get token. One way to deal with the pop login:

open login url in new window just like you did,when the facebook redirects back to your url in the popup, you set the cookie either through server side code or using javascript to capture url query parameter, when page is loaded in the popup, close the window immediately window.close.

On your main page, after your window.open code, add JavaScript code to detect if popup is closed and capture the cookie:

var signinWin;

$('#FacebookBtn').click(function () {
        var pos = screenCenterPos(800, 500);
        signinWin = window.open("[URL]", "SignIn", "width=780,height=410,toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0,left=" + pos.x + ",top=" + pos.y);
        setTimeout(CheckLoginStatus, 2000);
        signinWin.focus();
        return false;
    });

function CheckLoginStatus() {
    if (signinWin.closed) {
        $('#UserInfo').text($.cookie("some_cookie");
    }
    else setTimeout(CheckLoginStatus, 1000);
}

Answer 2

Checkout this article http://bit.ly/bsBL2h for customize popup authentication.

Answer 3

It might be a good idea to do both a callback function from the Child window as Avner says as well as a timer that watches for the window to be closed. That way if the Child window is closed without a specific action you can take appropriate action on the Parent window.

**On Child**
// Set oAuthToken from server side when it comes back from authenticating 
// and you have the token on the server side.
var oAuthToken = "";
oAuthToken = "--STRING INSERTED BY SERVER SIDE CODE--";
window.opener.pbFromPopup(oAuthToken);

**On Parent :** 
       function CheckLoginStatus() {
            if (authWindow.closed) {
                // Handle error if authentication window is closed 
                // without any action on Allow or Deny
                alert("window closed");                
                //location.href = "errorPage.aspx?error=authwinclosed;
            }
            else setTimeout(CheckLoginStatus, 1000);
        }
        function pbFromPopup(token) {
            // Function called from child window, 
            // token is passed back from child
            authWindow.close();
            // Put token in a hidden form field and submit the form to pass 
            // it back to the server
            $("#authToken").val(token);
            $("#form1").submit();
        }