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

后端 未结 6 1592
清酒与你
清酒与你 2021-02-18 20:48

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 J

相关标签:
6条回答
  • 2021-02-18 20:54

    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!

    0 讨论(0)
  • 2021-02-18 21:07

    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

    0 讨论(0)
  • 2021-02-18 21:11

    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".

    0 讨论(0)
  • 2021-02-18 21:13

    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>
    
    0 讨论(0)
  • 2021-02-18 21:14

    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/).

    0 讨论(0)
  • 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!

    0 讨论(0)
提交回复
热议问题