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

Show FB Login, only if not logged in before for the current site

本文关键字:登录 站点 FB 显示      更新时间:2023-09-26

>问题类似于FB身份验证的正确方法

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

条件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>

以下代码应该始终有效(我认为是这样,仍在测试( - 如果您喜欢以下方法,请告诉我。

 <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);
       }
   });
}
if (login === 'false')
{
     FB.login();
}

这部分代码在调用fbLogin时直接运行,登录将始终为"false",因为还没有登录状态返回。

它应该放在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();
          }
      });

    };

下面的代码对我始终如一。

  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}'
      });
  });