0

私は自分の Web ページに Facebook Connect ログインを実装しようとしています。

  • ログアウトしている場合は、想定どおりにログイン ボタンが表示されます。
  • ログイン ボタンをクリックすると、想定どおり、Facebook ログイン ポップアップ ウィンドウが表示されます。

  • ポップアップ ウィンドウのログインが消えると、ユーザーはログインし、ボタンはログアウト ボタンに変わります。

  • ログアウト ボタンをクリックすると、ユーザーはログアウトされますが、!:

    1. ボタンはログイン ボタンに変更されません。
    2. 場合によっては、最大 3 つのポップアップ ウィンドウ (ログイン) が開きます。
    3. 関数 testAPI() が実行されます。
    4. コンソールに次のエラー メッセージが表示されることがあります。

JS:

  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxxxxxxx', // App ID
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        showLogoutButton();
      } else if (response.status === 'not_authorized') {
        showLoginButton();
      } else {
        showLoginButton();
      }
     });
  };

  function showLoginButton() {
    $('#FBButtonDiv').show();

    $('#FBButton').html('Log in Facebook');
    $('#FBButton').on('click', function(){
      login();
    });
  }

  function showLogoutButton() {
    $('#FBButtonDiv').show();

    $('#FBButton').html('Log out Facebook');
    $('#FBButton').on('click', function(){
      logout();
    });
  }

  function login() {
      FB.login(function(response) {
          if (response.authResponse) {
              // connected
              testAPI();
              showLogoutButton();
          } else {
              // cancelled
          }
      });
  }

  function logout() {
    FB.logout(function(response) {
      showLogoutButton();
    });
  }

  function testAPI() {
      console.log('Welcome!  Fetching your information.... ');
      FB.api('/me', function(response) {
          console.log('Good to see you, ' + response.name + '.');
      });
  }

  (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));

HTML:

...
<div id="FBButtonDiv"><button id="FBButton">Facebook login!</button></div>
...

CSS:

#FBButtonDiv {
  display: none;
}

では、私のコードで何が間違っている可能性がありますか?

注: コードに多くの DRY が含まれていることはわかっていますが、機能するようになったら、多くのリファクタリングを行います。

4

1 に答える 1

1

特に私の専門である JS/FB-API ではありませんが、次のように推測します。

function logout() {
  FB.logout(function(response) {
    showLogoutButton();
  });
}

次のようにする必要があります。

function logout() {
   FB.logout(function(response) {
     showLoginButton();
   });
}

応答が受信された後、コールバックは、現在ログアウトしているユーザーにログイン ボタンを表示する必要があるためです。もちろん、ログアウトが成功したことを確認するために、ログインと同様に応答を確認する必要があります。

于 2013-01-21T21:16:04.700 に答える