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()呈现“登录”对话框提示他们登录，或展示“登录”按钮。
2.让用户登录
如果使用应用的用户未登录应用，或未登录 Facebook，则可以使用“登录”对话框提示他们登录应用和 Facebook 两者。各种版本的对话框见下文。
如果用户未登录 Facebook，系统就会提示他们首先登录 Facebook，然后再登录您的应用。JavaScript SDK 会自动检测这种情况，您无需执行任何额外的操作即可启用此行为。
下面是提示用户登录的两种方式：
-
使用“登录”按钮。
-
使用 JavaScript SDK 中的
FB.login()。
 |
 |
A.让用户通过“登录”按钮登录
您可以轻松地在自己的页面中添加“登录”按钮。 有关自定义“登录”按钮的信息，请参阅“登录”按钮。要获取基础按钮的代码，在以下配置器中输入所需的值，并点击获取代码。
插件配置器
注意，在本主题末尾的示例中，我们使用按钮的 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 登录”的真实基本页面。您可以将此页面用作应用的起点，但请继续阅读下文，了解上述代码的具体作用，这将为您带来巨大帮助。