使用Javascript登录Facebook

Question

我快疯了！

我一直在尝试使用Facebook Javascript API弹出“ Facebook登录名”以显示在我的网站上。

我已经多次阅读了本教程，但是登录名不会出现在弹出窗口中，如果我按照登录过程进行操作，则会导致登录我并没有将我重定向到我的网站。 回到网站后，我便登录了，并且工作正常。

我尝试了以下代码的多种变体（将其全部写成太多）：

    <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '123456789012345',
      status     : true,
      xfbml      : true,
      version    : 'v2.4'
    });

    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            console.log('Logged in.');
            showLogoutOption(); // This shows the logout option
        }
        else {
            showLoginOption(); // This shows the login option
            console.log('Not logged in');
        }
    });


    $('#loginOption').click(function() {
        FB.login(); // When the login option is clicked -> login        
    });

  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

我也在这里的 quickstart下使用了代码。

这样我就可以登录，可以访问FB graph API并提取数据，也可以注销。 我不能做的是拥有能够提供良好客户体验的登录信息。

注意：我使用的是Firefox（已经在Chrome上尝试过，它会快速弹出一个对话框，然后再次消失，使用户登录但不刷新页面）。

如果您需要更多信息，请告诉我。

Answer 1

试试这个例子：

(function(win, doc) {
  var declined_perms = [];
  var PERMISSIONS = ['email', 'user_friends', 'user_photos', 'publish_actions'];
  var APP_ID = 'Your API Key';
  win.fbAsyncInit = function() {
    FB.init({
      appId: APP_ID,
      xfbml: true,
      cookie: true,
      status: true,
      version: 'v2.0'
    });
    afterFBASYNLoaded();
  };
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(doc, 'script', 'facebook-jssdk'));
  var afterLoginBtnClick = function() {
    FB.login(function(response) {
      afterLoginStatus(response);
    }, {
      scope: PERMISSIONS.join()
    });
  };
  var afterLoginBtnReAuthClick = function() {
    FB.login(function(response) {
      afterLoginStatus(response);
    }, {
      scope: declined_perms.join(),
      auth_type: 'rerequest'
    });
  };
  var hideAll = function() {
    $("#loginSection").fadeOut("fast");
    $("#loginSectionReAuth").fadeOut("fast");
  };
  var afterFBASYNLoaded = function() {
    FB.getLoginStatus(function(response) {
      afterLoginStatus(response);
    });
    $("#login_btn").on("click", function() {
      afterLoginBtnClick();
    });
    $("#login_btnReAuth").on("click", function() {
      afterLoginBtnReAuthClick();
    });
  };
  var afterLoginStatus = function(response) {
    var res = response.status;
    if (res == 'connected') {
      $("#loader").fadeIn("fast", function() {
        declined_perms.length = 0;
        FB.api('/me/permissions', function(response) {
          for (var i = 0; i < response.data.length; i++) {
            if (response.data[i].status == 'declined') {
              declined_perms.push(response.data[i].permission);
            }
          }
          if (declined_perms.length) {
            hideAll();
            $("#loader").fadeOut("fast", function() {
              $("#loginSectionReAuth").fadeIn("fast");
            });
          } else {
            var query = "SELECT uid,name,first_name,contact_email,name,last_name,email FROM user WHERE uid=me()";
            FB.api({
                method: 'fql.query',
                query: query
              },
              function(res) {
                var res2 = res[0];
                var full_name = res2['name'];
                var first_name = res2['first_name'];
                var last_name = res2['last_name'];
                var email = res2['contact_email'];
                var fb_id = res2['uid'];
                var data = {
                  name: full_name,
                  first_name: first_name,
                  last_name: last_name,
                  email: email,
                  fb_id: fb_id
                };
                $.ajax({
                    url: "services/insertuserdata.php",
                    dataType: "json",
                    type: "POST",
                    data: data
                  })
                  .done(function(data) {
                    var response = makeObject(data);
                    if (response['response'] == "success") {
                      //Data inserted successfully
                    } else {
                      //error from API
                    }
                  })
                  .error(function(jqXHR, exception) {
                    //error
                  });
              });
          }
        });
      });
    } else {
      hideAll();
      $("#loginSection").fadeIn("fast");
    }
  };
})(window, document);

$("#loginSection")是登录按钮容器

$("#loginSectionReAuth")是登录Re-auth容器，假设用户已登录，但没有授权的应用程序权限

$("#login_btn")是一个登录按钮

$("#login_btnReAuth")是重新授权登录按钮

$("#loader")是一个加载器元素

我希望这有帮助 ！！！

在这里暴跌