仅在未在当前站点之前登录时显示FB登录

Question

问题类似于 A proper approach to FB auth

但是我只想要客户端代码。

条件 1.用户可能无法登录FB。在这种情况下，用户“必须”登录FB并有效地登录我的应用程序。    显示FB登录按钮。 2.用户已登录FB。没有登录我的应用程序。    显示FB登录按钮。 3.用户登录Fb和我的应用程序。    显示应用程序没有FB登录按钮

问题：如果用户已登录FB，则FB.login会导致错误。

我需要社区帮助。我知道这是一个简单的逻辑问题，但我现在围绕解决方案盘旋几个小时。

我的代码

    <div id="auth-loggedout" onclick="fbLogin()">
    <span class="buttonText">Login with Facebook</span>
    </div>


<script>

window.fbAsyncInit = function() {
// init the FB JS SDK
    FB.init({
        appId : 'APP ID',   // App ID from the app dashboar
        channelUrl  : '/channel.html',  // Channel file for x-domain comms
            status : true,    // Check Facebook Login status
         xfbml : true    // Look for social plugins on the page
    });

    // this check FB login status on initialization
           fbLogin();
};
        // listen for and handle auth.statusChange events
  var login="false";
  function fbLogin(){
      FB.getLoginStatus(function(response) {
          if (response.status === 'connected') {
              document.getElementById('auth-loggedout').style.display = 'none';
              document.getElementById('appcontainer').style.display = 'block';
              login=true;
              getDataFromFBAndgetSessionToken();<= This also needs FB object
          } else if (response.status === 'not_authorized') {
              // the user is logged in to Facebook,
              // but has not authenticated your app
              document.getElementById('auth-loggedout').style.display = 'block';
              document.getElementById('appcontainer').style.display = 'none';
          } else {
              // the user isn't logged in to Facebook.
              document.getElementById('auth-loggedout').style.display = 'block';
              document.getElementById('appcontainer').style.display = 'none';
          }
      });

      if (login === 'false')
      {
          FB.login();
      }
    };

   function getDataFromFBAndgetSessionToken() {
     FB.api('/me?fields=id,name,first_name,last_name,username', function (response) {

        varAccessToken = FB.getAuthResponse()['accessToken'];

       userFirstName = response.first_name;

       var User = new classUser();
       User.set_access_token(varAccessToken);
       User.set_fb_user_id(response.id);
       User.set_first_name(userFirstName);
       User.set_last_name(response.last_name);
      User.set_user_name(response.username);

    });
 }

 // Load the SDK asynchronously
 (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/all.js";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

  </script>

<script>

Answer 1

if (login === 'false')
{
     FB.login();
}

这部分代码在调用fbLogin时直接运行，login将始终为“false”，因为还没有loginstatus回来。

它应该放在FB.getLoginStatus的回调函数中，当你可以响应登录状态时它会被调用

如果发现用户未授权或登录

，则以下代码将运行FB.login

var login="false";
  function fbLogin(){
      FB.getLoginStatus(function(response) {
          if (response.status === 'connected') {
              document.getElementById('auth-loggedout').style.display = 'none';
              document.getElementById('appcontainer').style.display = 'block';
              login=true;
              getDataFromFBAndgetSessionToken();<= This also needs FB object
          } else if (response.status === 'not_authorized') {
              // the user is logged in to Facebook,
              // but has not authenticated your app
              document.getElementById('auth-loggedout').style.display = 'block';
              document.getElementById('appcontainer').style.display = 'none';
          } else {
              // the user isn't logged in to Facebook.
              document.getElementById('auth-loggedout').style.display = 'block';
              document.getElementById('appcontainer').style.display = 'none';
          }
          if (login === 'false')
          {
              FB.login();
          }
      });


    };

Answer 2

以下代码应始终有效（我认为如此，仍在测试中） - 如果您喜欢以下方法，请告诉我们。

 <script>

window.fbAsyncInit = function() {
     // init the FB JS SDK
      FB.init({
        appId   : 'appid',    // App ID from the app dashboard
        channelUrl  : '/channel.html',    // Channel file for x-domain comms
        status  : true,    // Check Facebook Login status
        xfbml   : true    // Look for social plugins on the page
      });

    fbApiInit = true;
   };
        // listen for and handle auth.statusChange events
   function fbLogin(){
      FB.login(function(response) {
          if (response.status === 'connected' ) {
              document.getElementById('auth-loggedout').style.display = 'none';
              document.getElementById('appcontainer').style.display = 'block';
              localStorage.setItem("setapplogin","true");
              getDataFromFBAndgetSessionToken();
          } else if (response.status === 'not_authorized') {
              // the user is logged in to Facebook,
              // but has not authenticated your app
              document.getElementById('auth-loggedout').style.display = 'block';
              document.getElementById('appcontainer').style.display = 'none';
          } else {
              // the user isn't logged in to Facebook.
              document.getElementById('auth-loggedout').style.display = 'block';
              document.getElementById('appcontainer').style.display = 'none';
          }
      });

};



// Load the SDK asynchronously
(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/all.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

  </script>

<script>

function checkFBLogin(callback){
   if(!window.fbApiInit) {
       setTimeout(function() {checkFBLogin(callback);}, 50);
    } else {
      var applogin = localStorage.getItem("login");
      if (applogin === "true")
      {
        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
                document.getElementById('auth-loggedout').style.display = 'none';
                document.getElementById('appcontainer').style.display = 'block';
                getDataFromFBAndgetSessionToken();
            } else if (response.status === 'not_authorized') {
                document.getElementById('auth-loggedout').style.display = 'block';
                document.getElementById('appcontainer').style.display = 'none';
                localStorage.setItem("login", "false");
            } else {
                // the user isn't logged in to Facebook.
                document.getElementById('auth-loggedout').style.display = 'block';
                document.getElementById('appcontainer').style.display = 'none';
            }
        });
      } else {
         document.getElementById('auth-loggedout').style.display = 'block';
         document.getElementById('appcontainer').style.display = 'none';
    }
}

};

function getDataFromFBAndgetSessionToken() {
    FB.api('/me?fields=id,name,first_name,last_name,username', function (response) {

        if (!response || response.error) {
           document.getElementById('auth-loggedout').style.display = 'block';
           document.getElementById('appcontainer').style.display = 'none';
        } else {
            varAccessToken = FB.getAuthResponse()['accessToken'];

            userFirstName = response.first_name;

            var User = new classUser();
        User.set_access_token(varAccessToken);
        User.set_fb_user_id(response.id);
        User.set_first_name(userFirstName);
        User.set_last_name(response.last_name);
        User.set_user_name(response.username);

       }
   });
}

Answer 3

以下代码对我来说始终如一。

  FB.getLoginStatus(function (response) {
      if (response.status == "connected") {
        //user conected
      } else if (response.status == "not_authorized") {
        //user has not autorized app
      } else if (response.status == "unknown") {
        //user is not logged in to facebook
      }
  });

  $("#fb-login-button").click(function () {
      FB.login($.proxy(function (response) {
          if (response.authResponse) {
             //User Authorized app
          } else {
             //User did not authorize app
          }
      }, this), {
          scope: '{permissions_list}'
      });
  });