Facebook display: 'page' not working with FB.ui and popups are blocked by the browser

4.2k Views Asked by At

I know that iframes are not allowed by facebook for unauthorized applications but i can't get display: 'page' to work with FB.ui either. The only display mode that is working is popup. Both the login and FB.ui dialogs are being blocked by the popup blocker even though they are working on every other website with facebook login. The popup blocker kicks in even when the FB.login and FB.ui functions are called by a user click. This is really, really annoying. So please help me out.

<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
function xyz() 
{
FB.init({ 
appId:'113381182103752', cookie:true, 
status:true, xfbml:true, oauth:true     
});
FB.getLoginStatus(function(response) {
if(response.status=="connected")
{
document.getElementById("status").innerHTML="User is connected";
}
else if(response.status=="unknown")
{
FB.login(function(response) {
if(response.authResponse)
{
var token = response.authResponse.accessToken;
document.getElementById("tokendiv").innerHTML=token;
}
});
document.getElementById("status").innerHTML="User is logged out";
}
else if(response.status=="not_authorized")
{
FB.ui({
client_id: '113381182103752',
method: 'oauth',
redirect_uri: 'http://127.0.0.1:8888/test3.php',
response_type: 'token',
display: 'page'
});    
document.getElementById("status").innerHTML="User is connected but app is not authorized";
}
else
{
document.getElementById("status").innerHTML="Error";
}
});
}
</script> 
<div id="tokendiv"></div>
<div id="status"></div> 
<button onclick="xyz()">Click Here</button>
</body>
</html>
2

There are 2 best solutions below

1
On BEST ANSWER

There are 2 issues here:

1) display: 'popup' is mandatory for method: 'oauth' or FB.login for javascript SDK because of security (clickjacking and phishing). I'd suggest to use FB.login anyway to get permissions or to authenticate because it is more convenient.

2) your popup is blocked by browser because FB.login is deeply nested in your javascript call stack, though user initiated. It has to be user initiated plus try to redesign you code so FB.login is not nested.

1
On

Try using FB.login either instead of FB.getLoginStatus or instead of FB.ui to handle the popup.

FB.login(function(response) {
  if (response.authResponse) {
    // user is logged in and has permissions
  }
}, {scope:'email'});