利用 JavaScript SDK 部署网页版“Facebook 登录”

本文档将分步介绍如何在您的网页上利用 JavaScript 版 Facebook SDK 实现“Facebook 登录。

如果您是 Facebook 用户，并且无法登录您的帐户，请访问我们的帮助中心。

前期准备

您需要准备以下各项：

如果您因故无法使用我们的 JavaScript SDK，可以手动组建登录流程以实现“Facebook 登录”。

1.在应用面板中输入跳转网址

在应用面板中选择您的应用，然后滚动到添加产品，在 Facebook 登录彩笺中点击设置。在左侧导航窗口中选择设置，然后在客户端 OAuth 设置下方，在有效的 OAuth 跳转网址 栏中输入跳转网址，以实现成功授权。

2.检查用户登录状态

网页加载时，首先应检查用户是否已使用 Facebook 登录登录您的网页。调用 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 表示网页用户的登录状态。status 可以是下列之一：

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

如果状态为 connected，响应中会包含下列 authResponse 参数：

`authResponse` 参数	值
`accessToken`	网页用户的访问口令。
`expiresIn`	口令过期时的 UNIX 时间戳。一旦口令到期，用户将需重新登录。
`reauthorize_required_in`	距离登录到期的剩余时长（以秒为单位），之后用户将需要重新登录。
`signedRequest`	经签名的参数，其中包含网页用户的信息。
`userID`	网页用户的编号。

JavaScript SDK 会自动检测登录状态，您无需执行任何操作即可启用此行为。

如果用户打开网页后并没有登录网页，或是没有登录 Facebook，您可以使用登录对话框来提示他们登录两者。如果用户未登录 Facebook，系统首先会提示他们登录 Facebook，然后提示登录您的网页。

下面是用户登录的两种方式：

Facebook“登录”按钮
JavaScript SDK 中的登录对话框

A. 通过“登录”按钮登录

如要使用 Facebook “登录”按钮，请使用我们的插件配置器以自定义“登录”按钮并获取代码。

插件配置器

Width

按钮大小

large

按钮文本

continue_with

启用“退出”按钮

用户登录 Facebook 时显示姓名和头像 [?]

获取代码

B. 通过 Javascript SDK 登录对话框登录

如要使用专属“登录”按钮，请调用 FB.login()，即可调用登录对话框。

FB.login(function(response){
  // handle the response 
});

请求更多权限

当用户点击 HTML 按钮时，系统会显示带有登录对话框的弹出窗口。您可以通过此对话框请求权限，以访问用户的数据。scope 参数可随 FB.login() 函数调用一同传递。可选参数为由逗号分隔的权限列表，只有经用户确认后，您的网页才可获得用户数据访问权限。

示例调用

此示例可以询问登录用户，您的网页是否有权限访问他们的公开资料和邮件。

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

处理登录对话框响应

响应（连接或取消）会向调用 FB.login() 时指定的回调返回 authResponse 对象。此响应可在 FB.login() 内检测和处理。

示例调用

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4.用户退出

在按钮或链接中附加 JavaScript SDK 函数 FB.logout()，让用户可以退出网页。

示例调用

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

注意：调用此函数还可能会让用户退出 Facebook。

要考虑下列情形

用户先登录 Facebook，然后再登录您的网页。当用户退出您的应用时，其 Facebook 帐户仍为登录状态。
用户登录您的网页，并在应用登录流程中登录 Facebook。当用户退出您的应用时，同时也将退出 Facebook。
用户登录了另一网页，并在该网页的登录流程中登录 Facebook，然后再登录您的网页。当该用户退出任一网页时，同时也退出 Facebook。

此外，用户退出您的网页并不会撤消其在登录期间授予网页的权限。必须单独执行撤销权限操作。构建您的网页时，应让已退出的用户在重新登录时不会看到登录对话框。

完整代码示例

下面的代码将在 HTML 页面中加载和初始化 JavaScript SDK。用您的应用编号替换 {app-id}，再用要使用的图谱 API 版本替换 {api-version}。除非有特殊原因必须使用较旧版本，否则请指定最新版本： v5.0。

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  
  (function(d, s, id) {                      // Load the SDK asynchronously
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


//  The JS SDK Login Button 

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

<div id="status">
</div>

</body>
</html>