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

facebook开发者平台https://developers.facebook.com/

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

通过采用 Javascript 版 Facebook SDK 的“Facebook 登录”，用户可以使用 Facebook 凭据登录您的网页。即使您因为一些原因而无法使用我们的 JavaScript SDK，也一样可以实施“Facebook 登录”。要在不使用 JavaScript SDK 的情况下实施“Facebook 登录”，请参阅手动构建登录流程。

要在不使用 JavaScript SDK 的情况下实施“Facebook 登录”，您首先需要有一个 Facebook 应用编号。该编号可以在应用面板中创建和检索。您还需要有一个托管 HTML 文件的位置。

按照以下步骤实施登录：

检查登录状态，了解用户是否已登录您的应用。执行此步骤期间，您还应该检查用户是否在之前登录过您的应用，但目前未登录。
通过“登录”按钮或“登录”对话框让用户登录，并请求一系列数据权限。
让用户退出。

另请参阅本主题末尾的完整代码示例。

1.检查登录状态

加载网页时应采取的第一步是检查用户是否已使用 Facebook 登录功能登录您的应用。调用 FB.getLoginStatus 即可开始此流程。此函数会触发 Facebook 调用，获取登录状态，并调用包含结果的回调函数。

下面是取自上述示例代码的部分代码，在页面加载期间运行以检查用户登录状态：

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

提供给回调的 response 对象包括许多字段：

{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        signedRequest:'...',
        userID:'...'
    }
}

status 表示应用用户的登录状态。状态可以是以下某个值：

connected。用户登录了 Facebook 和您的应用。
not_authorized。用户登录了 Facebook，但未登录您的应用。
unknown。用户未登录 Facebook，所以无法知道他们是否登录了您的应用。或者已经调用 FB.logout()，因此无法连接至 Facebook。
如果状态为 authResponse，则响应对象将包括 connected，分为以下部分：
accessToken。包括应用用户的访问口令。
expiresIn。表示口令到期且需要更新的 UNIX 时间。
signedRequest。经签名的参数，其中包括应用用户的信息。
userID 是应用用户的编号。

知道用户的登录状态后，应用就可以执行以下操作之一：

如果用户登录了 Facebook 和您的应用，可将他们重定向至应用的登录后体验。
如果用户未登录您的应用，或未登录 Facebook，则可以通过 FB.login()呈现“登录”对话框提示他们登录，或展示“登录”按钮。

如果使用应用的用户未登录应用，或未登录 Facebook，则可以使用“登录”对话框提示他们登录应用和 Facebook 两者。各种版本的对话框见下文。

如果用户未登录 Facebook，系统就会提示他们首先登录 Facebook，然后再登录您的应用。JavaScript SDK 会自动检测这种情况，您无需执行任何额外的操作即可启用此行为。

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

使用“登录”按钮。
使用 JavaScript SDK 中的 FB.login()。

A.让用户通过“登录”按钮登录

您可以轻松地在自己的页面中添加“登录”按钮。有关自定义“登录”按钮的信息，请参阅“登录”按钮。要获取基础按钮的代码，在以下配置器中输入所需的值，并点击获取代码。

插件配置器

最大照片行数

按钮大小

medium

显示好友面部

启用“退出”按钮

获取代码

注意，在本主题末尾的示例中，我们使用按钮的 onlogin 属性设置了一个 JavaScript 回调，用于检查登录状态，了解用户是否成功登录：

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

回调如下所示。它将调用 FB.getLoginStatus() 来获取最新的登录状态。（statusChangeCallback() 是一个函数，属于处理响应的示例的一部分。）

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

B.让用户通过从 JavaScript SDK 调用的“登录”对话框登录

对于想要使用专属按钮的应用，您只需调用 FB.login()，即可调用“登录”对话框：

FB.login(function(response){
  // Handle the response object, like in statusChangeCallback() in our demo
  // code.
});

正如参考文档所述，此函数会生成一个展示“登录”对话框的弹窗，所以应只在用户点击 HTML 按钮后调用此函数（这样可以防止弹窗被浏览器阻止）。

还可以选择随此函数调用传递可选的 scope 参数，此参数是要向应用用户请求的一系列以逗号分隔的权限。以下是调用包含 FB.login()（与“登录”按钮中使用的相同）的 scope 的方法。在本示例中，请求的是用户的电子邮箱和也在使用应用的好友列表：

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

处理“登录”对话框响应

在登录流程的这一阶段，您的应用会展示“登录”对话框，用户可以选择是取消登录还是允许应用访问他们的数据。

无论用户的选择是什么，浏览器都会返回给应用，表明用户是连接还是取消状态的响应数据会发送到应用。当为应用使用 JavaScript SDK 时，会向调用 FB.login() 时指定的回调返回 authResponse 对象：

此响应可在 FB.login 调用内检测和处理，如下所示：

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your app and Facebook.
  } else if (response.status === 'not_authorized') {
    // The person is logged into Facebook, but not your app.
  } else {
    // The person is not logged into Facebook, so we're not sure if
    // they are logged into this app or not.
  }
});

3.让用户退出

您可以向按钮或链接添加 JavaScript SDK 函数 FB.logout，让用户可以退出应用，如下所示：

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

注意：调用此函数还可能会让用户退出 Facebook。 请考虑下列 3 种情形：

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

此外，退出与撤销登录权限（删除之前认可的验证）不同，撤销登录权限可单独执行。因此，构建应用时，不能设置为自动强制已退出的用户返回“登录”对话框。

完整代码示例

下面的代码会在 HTML 页面中加载和初始化 JavaScript SDK。在指示的地方添加您的应用编号。

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
      // Logged into your app and Facebook.
      testAPI();
    } else if (response.status === 'not_authorized') {
      // The person is logged into Facebook, but not your app.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    } else {
      // The person is not logged into Facebook, so we're not sure if
      // they are logged into this app or not.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into Facebook.';
    }
  }

  // This function is called when someone finishes with the Login
  // Button.  See the onlogin handler attached to it in the sample
  // code below.
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  window.fbAsyncInit = function() {
  FB.init({
    appId      : '{your-app-id}',
    cookie     : true,  // enable cookies to allow the server to access 
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.8' // use graph api version 2.8
  });

  // Now that we've initialized the JavaScript SDK, we call 
  // FB.getLoginStatus().  This function gets the state of the
  // person visiting this page and can return one of three states to
  // the callback you provide.  They can be:
  //
  // 1. Logged into your app ('connected')
  // 2. Logged into Facebook, but not your app ('not_authorized')
  // 3. Not logged into Facebook and can't tell if they are logged into
  //    your app or not.
  //
  // These three cases are handled in the callback function.

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

  };

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

  // Here we run a very simple test of the Graph API after login is
  // successful.  See statusChangeCallback() for when this call is made.
  function testAPI() {
    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>

<!--
  Below we include the Login Button social plugin. This button uses
  the JavaScript SDK to present a graphical Login button that triggers
  the FB.login() function when clicked.
-->

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

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

</body>
</html>

现在，您可以前往上传此 HTML 的网址测试应用。打开 JavaScript 控制台，您就会看见控制台日志中的 testAPI() 函数显示包括您姓名的消息。

恭喜，您已经实际创建了一个包含“Facebook 登录”的真实基本页面。您可以将此页面用作应用的起点，但请继续阅读下文，了解上述代码的具体作用，这将为您带来巨大帮助。

posted @ 2017-02-09 09:42 MY0101 阅读(4926) 评论(1) 编辑收藏举报

刷新页面返回顶部

MY0101

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

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

1.检查登录状态

2.让用户登录

A.让用户通过“登录”按钮登录

插件配置器

B.让用户通过从 JavaScript SDK 调用的“登录”对话框登录

处理“登录”对话框响应

3.让用户退出

完整代码示例

公告