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

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

现在我想bind 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>

假设您使用 Graph API 2.4 版本，您可以订阅一个名为auth.login https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.4每当登录状态发生变化时就会触发该事件。

因此，如果您想在用户登录时做出反应，您可以执行此操作并将您的函数命名为afterLogin一旦用户登录到您的应用程序就会被调用：

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

请注意，Facebook 推荐每个人都收听auth.statusChange相反，否则您的应用程序将不知道用户是否已注销或取消对应用程序的授权，这将使令牌无效。

这是一个使用的示例auth.statusChange, the response传递给函数的参数包含响应对象详细信息请参见此处 https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus#response_and_session_objects:

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'
});