一、前言

Facebook JavaScript SDK是一套用于在网页上集成Facebook平台功能的JavaScript API。其中包括了登录、分享、邀请好友等多个功能，并且支持多种登录方式。本文将介绍如何使用Facebook JavaScript SDK实现登录功能。

二、注册开发者账号

在使用Facebook JavaScript SDK之前，需要先注册Facebook开发者账号，并创建一个应用。具体步骤如下：

访问Facebook开发者平台，并使用Facebook账号登录。
创建新应用。进入我的应用页面，点击“创建应用”按钮，输入应用名称和联系邮箱，并选择应用类别。
获取应用ID和应用密钥。在创建成功后，进入“设置”页，获取应用ID和应用密钥。
配置“JavaScript SDK 允许使用的网域”为当前页面域名（不能配置本地域名）
并打开“Login with Javascript SDK”的配置开关

三、引入Facebook JavaScript SDK

在HTML页面中引入Facebook JavaScript SDK，可以通过以下方式：

    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
    <script>
        window.fbAsyncInit = function() {
            FB.init({
                appId: '{app-id}', 
                cookie: true,
                xfbml: true,
                version: 'v13.0'
            });
        };
    </script>

这段代码会异步加载Facebook JavaScript SDK，并初始化Facebook应用，将其加载到页面上。

四、实现登录功能

在引入Facebook JavaScript SDK之后，就可以实现登录功能。具体的实现步骤如下：

调用FB.login()方法。在交互式场景中调用此方法，使用Facebook账号登录并授权。
处理用户登录状态。一旦通过调用FB.login()方法登录成功，回调函数中的response即为登录成功后的响应数据，可将需要的参数同步到服务端完成登录。

以下是完整的实现代码：

FB.login(function(response) {   
      if (response.authResponse) {     
           console.log('登录成功！');     
           // 请求服务端接口
      } else {     
           console.log(‘用户取消登录或者登录失败’);
      } 
 });

五、其他方法

检测登录状态

调用 FB.getLoginStatus 可以触发 Facebook 调用，获取登录状态。然后 Facebook 会调用您的回调函数，返回结果。

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

JSON 响应示例

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

`Status` 类型	描述
`connected`	用户已登录 Facebook 和您的网页。
`not_authorized`	用户已登录 Facebook，但未登录您的网页。
`unknown`	用户未登录 Facebook，所以无法得知他们是否登录了您的网页。或者之前已调用 FB.logout()，因此无法连接至 Facebook。

退出登录

FB.logout(function(response) {
   // Person is now logged out
});

六、总结

Facebook JavaScript SDK是实现在网页上集成Facebook平台功能的重要技术，能够为开发者提供丰富的功能支持。在本文中，我们介绍了如何使用Facebook JavaScript SDK实现登录功能，并给出了完整的实现代码，希望能够对读者有所帮助。

Fackbook web登录指南