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&redirect_uri=http://example.com/step2&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

Why not simply...

function authorizeAppInPopup() {     FB.login(function(response) {         if (response.authResponse) {             // User authorized app         } else {             // User cancelled login or did not fully authorize         }     }, {scope: 'publish_stream'}); } 

??? : ]

https://developers.facebook.com/docs/reference/javascript/FB.login/