如何觸發Facebook登錄onClick

Question

當勾選複選框時，如何觸發Facebook登錄？

我正在爲我的網站實施共享多個網絡功能。我需要一些實現Facebook登錄過程的幫助。作爲代表我的用戶進行分享的先決條件，我需要確保用戶已登錄Facebook並允許訪問我的應用。通常這是使用標準的Facebook登錄過程完成的。

https://developers.facebook.com/docs/javascript/gettingstarted/

我已經實現這一點，是工作的罰款。我想修改的過程中顯示的Facebook登錄頁面，如果滿足以下條件：

A.用戶檢查了我的「分享與Facebook」複選框，並 B.該用戶沒有或 記錄C.該用戶沒有授權我的應用程序發佈代表自己

這裏是我的表是這樣的：

<form action="post.php" method="post"> 
    <input type="checkbox" name="facebook" value="1" onClick="FB.Login();"/>Facebook 
    <label for="Message">Message</label> 
    <input name="message" type="text"/> 
    <input type="submit" value="post"/> 
</form> 

這裏是我的腳本看起來像（直接從Facebook的tutorial）：

<script> 
    window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : 'MY APP ID', 
      channelUrl : 'my channel url', 
      status  : true, 
      cookie  : true, 
      xfbml  : true 
     }); 

     FB.Event.subscribe('auth.authResponseChange', function(response) { 
      if (response.status === 'connected') { 
       testAPI(); 
      } else if (response.status === 'not_authorized') { 
       FB.login(); 
      } else { 
       FB.login(); 
      } 
     }); 

    }; 

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

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

如何修改此javascript以在複選框被選中且用戶尚未登錄時彈出Facebook登錄名？

我已經試過this建議，但它似乎沒有工作。

編輯

貌似我做了這個複雜得多，它必須是。以下解決方案似乎運作良好。希望它可以幫助別人。

<script type="text/javascript"> 

// Initialize the Facebook JavaScript SDK 
FB.init({ 
    appId: 'APP ID', 
    channelUrl : 'channel url', 
    xfbml: true, 
    status: true, 
    cookie: true, 
}); 

</script> 

<input type="checkbox" name="facebook" value="1" onclick="FB.login();"> 

Answer 1

這似乎是正確的解決方案：

<div id="fb-root"></div> 
<script src="//connect.facebook.net/en_US/all.js"></script> 
<script type="text/javascript"> 

// Initialize the Facebook JavaScript SDK 
FB.init({ 
    appId: 'APP ID', // Your app id 
    channelUrl : 'channel url', // Your channel url 
    xfbml: true, 
    status: true, 
    cookie: true, 
}); 

function fbAuthUser() { 
    FB.login(checkLoginStatus); 
} 

function checkLoginStatus(response) { 
    if(response && response.status == 'connected') { 
     document.getElementById("fb").checked = true 
    } else { 
     document.getElementById("fb").checked = false 
    } 
} 
</script> 

<input type="checkbox" name="facebook" value="1" onclick="fbAuthUser();" id="fb"> 

希望這可以幫助別人。

Answer 2

您是否意識到自己有錯誤？

TypeError: FB.Login is not a function 

您可以使用jQuery：

$('#checkbox').change(function() { 

    if ($(this).is(':checked')) { // only if the checked an not when unchecked! 

     FB.login(function (response) { 

      if (response.authResponse) { 

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

      } else { 

       alert('User canceled login or did not fully authorize the app.'); 

      } 

     }, { 
      scope: '' // we don't need any scopes in demo... 
     }); 

    } 
}); 

Fiddle