Question

如果选中复选框，我该如何触发Facebook登录？

我正在为我的网站实现多个网络功能的共享。我需要一些帮助来实现facebook登录过程。作为代表我的用户共享的先决条件，我需要确保用户登录到Facebook并允许访问我的应用程序。通常这是使用标准的Facebook登录过程完成的。

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

我已经实现了这个并且工作正常。如果满足以下条件，我想修改流程以显示facebook登录页面：

一个。用户选中了“与Facebook共享”复选框和 B.用户未登录OR 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

如何触发facebook登录onClick

2 个答案: