JS SDK FB.login() works but pop-up dialog is staying open after logged in

I am using the JS SDK for Facebook based on the NEW GraphAPI for Auth/Login.

Has anyone had this issue when logging in after FB.login() was called via the JS SDK?

The problem: after I initialize by calling FB.Init() asynchronously (because this all wrapped in a window.fbAsyncInit function) the login pops up; I log in but then that pop-up refreshes to show a white page and the pop-up stays open and does not close...why? I am waiting to check response.session in the FB.login() callback but it seems as though I never get it back because this pop-up seems to just stick there and the process appears to just halt after you're logged in and I just figured this pop-up would just close and return me the response.session in the callback automatically. Why would that pop-up not go away?

I copied the url from the pop-up after I'm logged in and showing white the following url so it looks like the response is there but then why isn't that pop-up window closing so my callback can handle the response??

http://static.ak.fbcdn.net/connect/xd_proxy.php#?=&cb=f18fe0b7c66da54&origin=http%3A%2F%2Flocalhost%2Ff3745f32ed63a7a&relation=opener&transport=postmessage&frame=f18adb488566372&result=user_photos&session={%22session_key%22%3A%222.vH4SVCisnh8HJWjEI1Vy_Q__.3600.1280106000-100001379631246%22%2C%22uid%22%3A%22100001379631246%22%2C%22expires%22%3A1280106000%2C%22secret%22%3A%22TH45WFg8I_5r_cOoVIujjg__%22%2C%22access_token%22%3A%22132444323462464|2.vH4SVCisnh8HJWjEI1Vy_Q__.3600.1280106000-100001379631246|q123iPQcKY45xWXtOZ2ebOOZTQQ.%22%2C%22sig%22%3A%22a75e85af2354292bfdcf90b9d319ebf7%22}

I did notice that when FB.login() is called and the login pop-up comes up, I see this error in FireBug talking about how it doesn't like the fact that I'm testing over localhost or something I guess:

uncaught exception: [Exception... "Component returned failure 开发者_如何学运维code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMLocation.host]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: chrome://smarterwiki/content/smarterwiki.js :: anonymous :: line 1225" data: no]

that error bothers me...I need to figure out why it's coming up and I bet you I'm not the only one who has seen this when testing locally. I see no info though on troubleshooting this on the net anywhere either on the Facebook forums or elsewhere. I see others have had this issue but no resolution.

So when you implemented yours, did your facebook pop-up just close after the user is logged in or did you need to do something special to finish this process?

Also, I notice if I manually close that pop-up then go to check if that cookie was generated to contain my session, it's not (the fbs_[yourappid] cookie). So it looks like something ends prematurely here. I've got in my init cookie: true so I wonder if this problem were the pop-up dialog is not closing is related to the cookie also not being created client-side on my test PC.

This problem appeared out of nowhere for my site, when facebook made a recent change to its "all.js".

In an earlier version of their javascript I had a problem specific to IE, and I copied this little snippet of code from someone's post on the internet. It seemed cryptic, but solved the problem at the time:

  // http://developers.facebook.com/bugs/204792232920393

  // Hack to fix http://bugs.developers.facebook.net/show_bug.cgi?id=20168 for IE7/8/9.
  FB.UIServer.setLoadedNode = function (a, b) { FB.UIServer._loadedNodes[a.id] = b; };
  FB.UIServer.setActiveNode = function(a, b) { FB.UIServer._active[a.id]=b; };

It turns out those lines were causing this problem for me. I removed them, and the problem went away. The original bug specific to IE has also been fixed, I believe, in the most recent "all.js".

I don't know what your code is, but my problem was I forget to add <div id="fb-root"></div>. My code :

<div id="fb-root"></div>
<script src="http://static.ak.fbcdn.net/connect/en_US/core.js"></script>
<script>
    FB.init({ apiKey: 'app key'});
</script>
<div class="fbloginbutton" id="fb-login" onclick="Login();">
<span id="fb_login_text" >Login with Facebook</span>
</div>
<asp:Label ID="errMsg" runat="server"></asp:Label>
<script type="text/javascript">
    function Login() {
        FB.login(function(response) {
            document.getElementById('fb_login_text').innerHTML = 'Logout';
            if (response.session) {
                FB.api('/me', function(response) {
                    var str;
                    str = response['id'] + ";" +
                            response['name'] + ";" +
                            response['first_name'] + ";" +
                            response['last_name'] + ";" +
                            response['link'] + ";" +
                            response['birthday'] + ";" +
                            response['gender'] + ";" +
                            response['email'];
                    alert(str);
                });
            }
            else {
                document.getElementById('fb_login_text').innerHTML = 'Login with Facebook';
            }
        }, { perms: 'user_birthday,email' });
    };
</script> 

As you see I don't use div fb-root anywhere but It is requered to facebook login work!

I struggled with this issue recently. The problem appeared from no where, presumably from some change in the Facebook JS SDK. For what its worth I plan to never use the JS SDK again, these random issues eat up my time.

Anyway here is the hack that I used to get around the issue.

var accessToken, fb_response;

if (window.location.hash.length < 30) {
  window.location = "http://www.facebook.com/dialog/oauth?client_id=YOUR_ID&redirect_uri=YOUR_URL&scope=YOUR_PERMISSIONS&response_type=token";
} else {
  fb_response = window.location.hash;
  accessToken = fb_response.substr(14, fb_response.indexOf("&expires") - 14);
  FB._authResponse = {
    accessToken: accessToken
  };
  window.location.hash = "";
  FB.api("/me", function(profile) {
    if (profile.id) {
       app_init();
    } else {
       alert("Problem connecting to Facebook");
    }
  }); 
}

Basically I send the user to the Facebook oauth dialog and when they return I grab the access token from the hash. I then set the internal access token parameter on the Facebook Object. Once this is done you can make all the normal Facebook Api calls.

Hopefully this helps someone! For future projects I will definitely stick to a server side auth flow, you have a lot more control!

It seems that you are trying the localhost, can you try it with the public url.

I already faced this problem. But I solved it by configuring the canvas url in application as the public url (example. www.something.com/test/).

This is a working sample for me:

<!DOCTYPE html>
<html>
  <head>
    <title>Facebook Client-side Authentication Example</title>
  </head>
  <body>
    <div id="fb-root"></div>
    <script>
      // Load the SDK Asynchronously
      (function(d){
         var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement('script'); js.id = id; js.async = true;
         js.src = "//connect.facebook.net/en_US/all.js";
         ref.parentNode.insertBefore(js, ref);
       }(document));

      // Init the SDK upon load
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '00000000000000', // Your App ID
          channelUrl : '//'+window.location.hostname+'/channel', // Path to your Channel File
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });

        // listen for and handle auth.statusChange events
        FB.Event.subscribe('auth.statusChange', function(response) {
          if (response.authResponse) {
            // user has auth'd your app and is logged into Facebook
            FB.api('/me', function(me){
              if (me.name) {
                document.getElementById('auth-displayname').innerHTML = me.name;
              }
            })
            document.getElementById('auth-loggedout').style.display = 'none';
            document.getElementById('auth-loggedin').style.display = 'block';
          } else {
            // user has not auth'd your app, or is not logged into Facebook
            document.getElementById('auth-loggedout').style.display = 'block';
            document.getElementById('auth-loggedin').style.display = 'none';
          }
        });

        // respond to clicks on the login and logout links
        document.getElementById('auth-loginlink').addEventListener('click', function(){
          FB.login();
        });
        document.getElementById('auth-logoutlink').addEventListener('click', function(){
          FB.logout();
        }); 
      } 
    </script>

    <h1>Facebook Client-side Authentication Example</h1>
      <div id="auth-status">
        <div id="auth-loggedout">
          <a href="#" id="auth-loginlink">Login</a>
        </div>
        <div id="auth-loggedin" style="display:none">
          Hi, <span id="auth-displayname"></span>  
        (<a href="#" id="auth-logoutlink">logout</a>)
      </div>
    </div>

  </body>
</html>

The website clearly says that all.js is expired. However, I get the same error you got only with sdk.js. Problem was fixed when went back to the depreciated all.js

// Old SDK (deprecated)
js.src = "//connect.facebook.net/en_US/all.js";

// New SDK (v2.x)
js.src = "//connect.facebook.net/en_US/sdk.js";

facebook sdk