如何将Facebook onlogin事件绑定到自定义按钮？

Question

我知道如何使用自定义按钮作为Facebook登录.

现在我想将onlogin事件绑定到自定义按钮,但我不知道该怎么做.

原始代码

<fb:login-button scope="public_profile,email" onlogin="afterLogin();">
</fb:login-button>

<script>
    /* Assume that Facebook SDK loaded asyncronously and initilized */

    function afterLogin() {
        // Do stuff
    }
</script>

我的代码

<button id="cusomized-button" onclick="fbLogin();" onlogin="afterLogin();">
    Customized button
</button>

<script>
    /* Assume that Facebook SDK loaded asynchronously and initialized */

    // Show facebook login modal
    function fbLogin() {
        FB.login(function() {}, {
            scope: 'email,public_profile'
        });
    };

    function afterLogin() {
        // Do stuff
    }
</script>

Answer 1

假设您使用Graph API的2.4版本,您可以订阅一个名为的事件auth.login,只要登录状态发生变化就会触发该事件.

因此,如果您想对用户登录时做出反应,您可以执行此操作,并afterLogin在用户登录您的应用程序后调用您的名为函数:

FB.Event.subscribe('auth.login', afterLogin);

请注意,Facebook建议所有人都要收听auth.statusChange,否则您的应用程序将不知道用户是否已注销或取消该应用程序,这将使令牌无效.

这是一个使用示例auth.statusChange,response传递给函数的参数包含一个响应对象,详情如下:

FB.Event.subscribe('auth.statusChange', function(response) {
    if(response.status === 'connected') {
    // `connected` means that the user is logged in and that your app is authorized to do requests on the behalf of the user
    afterLogin();
    } else if(response.status === 'not_authorized') {
    // The user is logged in on Facebook, but has not authorized your app
    } else {
    // The user is not logged in on Facebook
    }

});

作为替代方案,第一个参数FB.login是在用户从Facebook返回后调用的函数,因此您可以执行以下操作:

FB.login(function(response) {
    if (response.authResponse) {
        afterLogin();
    } else {
        // The user cancelled the login or did not authorize your app
    }
}, {
    scope: 'email,public_profile'
});