专栏：独立站之Facebook登录集成｜给你代码（facebook登陆你暂时被禁止使用此功能）_facebook知识

序言

分立站要登岸，在注册登记和登入各个环节假如须要核对许多繁杂的数据资料，会经济损失掉许多潜在性顾客。即使欧美国家人十分著重个人隐私，个人数据资料比如说电子邮箱帐号、联系电话都是很脆弱的重要信息，首度采用两个孤单中文网站便被明确要求提供更多个人隐私数据资料的确是十分不愿和感到恐惧的。一类较好的解决之道即是透过欧美国家许多非主流SNS网络平台许可来顺利完成顾客注册登记登入操作过程。

后期预备

你须要预备下列组织工作：

两个 Facebook 开发人员帐号两个已注册登记的 Facebook 应用领域，且需实用性好基本上增设提及JavaScript 版 Facebook SDK在应用领域液晶中优先选择您的应用领域，接着慢速到加进商品，在 Facebook 登入彩笺中点选增设。在右侧导航系统询问处中优先选择增设，接着在顾客端 OAuth 增设上方，在有效率的 OAuth 重定向电子邮箱栏中输出重定向电子邮箱，以同时实现获得成功许可。

检查用户登入状况

网页加载时，首先应检查用户是否已采用 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 可以是下列之一：

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

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

用户登入

假如用户打开网页后并没有登入网页，或是没有登入 Facebook，您可以采用登入对话框来提示他们登入两者。假如用户未登入 Facebook，系统首先会提示他们登入 Facebook，接着提示登入您的网页。调用 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. }});

用户退出

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

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

要考虑下列情形：

用户先登入 Facebook，接着再登入您的网页。当用户退出您的应用领域时，其 Facebook 帐号仍为登入状况。用户登入您的网页，并在应用领域登入流程中登入 Facebook。当用户退出您的应用领域时，同时也将退出 Facebook。用户登入了另一网页，并在该网页的登入流程中登入 Facebook，接着再登入您的网页。当该用户退出任一网页时，同时也退出 Facebook。{!-- PGC_COLUMN --}此外，用户退出您的网页并不会撤消其在登入期间授予网页的权限。必须单独执行撤销权限操作。构建您的网页时，应让已退出的用户在重新登入时不会看到登入对话框。

完整标识符示例

下面的标识符将在 HTML 页面中加载和初始化 JavaScript SDK。用您的应用领域ID替换 {app-id}，再用要采用的图谱 API 版本替换 {api-version}。除非有特殊原因必须采用较旧版本，否则请指定最新版本： v6.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)[xss_clean] = 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[xss_clean].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)[xss_clean] =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>