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

Posted MY0101

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用 JavaScript SDK 部署网页版“Facebook 登录”相关的知识,希望对你有一定的参考价值。

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

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

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

按照以下步骤实施登录:

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

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

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()呈现“登录”对话框提示他们登录,或展示“登录”按钮。
 

2.让用户登录

如果使用应用的用户未登录应用,或未登录 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 种情形:

  1. 用户先登录 Facebook,然后再登录您的应用。当用户退出您的应用时,他的 Facebook 帐户仍为登录状态。
  2. 用户登录您的应用,并在该登录流程中登录 Facebook。当该用户退出您的应用时,同时也将退出 Facebook。
  3. 用户登录了另一应用,并在该应用的登录流程中登录 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 登录”的真实基本页面。您可以将此页面用作应用的起点,但请继续阅读下文,了解上述代码的具体作用,这将为您带来巨大帮助。

以上是关于利用 JavaScript SDK 部署网页版“Facebook 登录”的主要内容,如果未能解决你的问题,请参考以下文章

八网页版消息推送SDK-WebSockets

一键安装JS SDK 网页版WebRTC 网页 SIP客户端 语音通话,可以做web坐席

Case5 一键安装JS SDK 网页版WebRTC 网页 SIP客户端 语音通话,可以做web坐席

微信接口文档sdk

js怎样调用网页版支付宝支付

利用ASP技术做网页计时器