2017-03-29 18 views
0

「JavaScript SDKを使用してWebでのFacebookログイン」を使用すると、ログインボタンが正常に機能します。つまり、ユーザーはOKでログインしています(https://developers.facebook.com/docs/facebook-login/web#loginbutton)。Facebookのログインボタンが自動的にログアウトするように更新されない

ただし、ページを更新するまで、ボタンは[ログアウト]ボタンに変わりません。リフレッシュ後、ログアウトボタンが表示され、クリックするとログインボタンに戻ります。以下は、IIS内で実行できる完全なコードです。私はデフォルトのウェブサイトに入れて、http://localhost/aspnet_client/system_web/4_0_30319/test.htmlと呼んだ。

注:App IDをここに追加してください。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
</head> 

<body> 
    <div class="row margin-bottom-small"> 
     <div id="login-button" class="fb-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="false" data-auto-logout-link="true" onlogin="checkLoginState();"></div> 
     <div id="status"></div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <script> 
     function statusChangeCallback(response) { 
      console.log('statusChangeCallback'); 
      console.log(response); 
      if (response.status === 'connected') { 
       testAPI(); 
      } 
     } 
     function checkLoginState() { 
      FB.getLoginStatus(function(response) { 
       statusChangeCallback(response); 
      }); 
     } 
     window.fbAsyncInit = function() { 
           FB.init({ 
           appId  : 'ADD YOUR APP ID HERE', 
           cookie  : true, // enable cookies to allow the server to access the session 
           xfbml  : true, // parse social plugins on this page 
           version : 'v2.8' // use graph api version 2.8 
          }); 
      FB.getLoginStatus(function(response) { 
       statusChangeCallback(response); 
      }); 
     }; 
     // 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/sdk.js"; 
      fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk')); 

     // Here we run a very simple test of the Graph API after login is 
     // successful. See statusChangeCallback() for when this call is made. 
     function testAPI() { 
      console.log('Welcome! Fetching your information.... '); 
      FB.api('/me', function(response) { 
       console.log('Successful login for: ' + response.name); 
       document.getElementById('status').innerHTML = 
       'Thanks for logging in, ' + response.name + '!'; 
      }); 
     } 
    </script> 
</body> 
</html> 

FBコード私はプログラム的にページを更新したくないhttps://developers.facebook.com/docs/facebook-login/web#example

からです。それは単一のページのアプリケーションであり、ページをリフレッシュすることは私を最初に連れて行きます。

ありがとうございました。

答えて

0

なぜ、それが自動的にリフレッシュされないのかわかりませんでした。おそらく設計通りです。ここで私の回避策です - 基本的にログアウトボタンを追加し、FB.logoutを自分で呼び出します。 Facebookのデベロッパーチームの誰かがより洗練されたソリューションを提供できるなら、私は知りたいと思っています。ありがとう。

注:App IDをここに追加してください。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
</head> 

<body> 
    <div class="row margin-bottom-small"> 
     <div id="login-button" class="fb-login-button" data-max-rows="1" data-size="small" data-show-faces="false" data-auto-logout-link="false" onlogin="checkLoginState();"></div> 
     <div hidden id="logout-button" class="fb-login-button" data-max-rows="1" data-size="small" data-show-faces="false" data-auto-logout-link="false" onlogin="logout();">Log Out</div> 
     <div id="status"></div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <script> 
     function statusChangeCallback(response) { 
      console.log('statusChangeCallback'); 
      console.log(response); 
      if (response.status === 'connected') { 
       testAPI(); 
      } else { 
       // The person is not logged into your app or we are unable to tell. 
       //document.getElementById('status').innerHTML = 'Please log into this app.'; 
       document.getElementById('login-button').style.display = 'block'; 
       document.getElementById('logout-button').style.display = 'none'; 
      } 
     } 
     function checkLoginState() { 
      FB.getLoginStatus(function(response) { 
       statusChangeCallback(response); 
      }); 
     } 
     function logout() { 
      FB.logout(function (response) { 
       document.getElementById('logout-button').style.display = 'none'; 
       document.getElementById('login-button').style.display = ''; 
       document.getElementById('status').innerHTML = 'You have been logged out!'; 
      }); 
     } 
     window.fbAsyncInit = function() { 
           FB.init({ 
           appId  : 'ADD YOUR APP ID HERE', 
           cookie  : true, // enable cookies to allow the server to access the session 
           xfbml  : true, // parse social plugins on this page 
           version : 'v2.8' // use graph api version 2.8 
          }); 
      FB.getLoginStatus(function(response) { 
       statusChangeCallback(response); 
      }); 
     }; 
     // 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/sdk.js"; 
      fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk')); 

     // Here we run a very simple test of the Graph API after login is 
     // successful. See statusChangeCallback() for when this call is made. 
     function testAPI() { 
      console.log('Welcome! Fetching your information.... '); 
      FB.api('/me', function(response) { 
       console.log('Successful login for: ' + response.name); 
       document.getElementById('login-button').style.display = 'none'; 
       document.getElementById('logout-button').style.display = 'block'; 
       document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!'; 
      }); 
     } 
    </script> 
</body> 
</html> 
関連する問題