JavaScript
在JavaScript应用中集成Facebook登录的技术指南

14min
将 Facebook 登录添加到您的 JavaScript 应用程序
介绍
本节指导您如何在 Parse 环境中通过 Back4App 使用 Facebook API for JavaScript。
在本教程中，您将学习如何将 Facebook SDK 链接到您的 Parse 控制面板，以及如何实现 Facebook 登录, 注册, 注销, 链接 和 取消链接 功能。
通过遵循以下步骤，您将能够构建一个这样的系统： Back4App JavaScript 示例 Facebook 登录应用.
随时，您都可以在我们的 GitHub 仓库 中访问使用本教程构建的完整 Android 项目。
先决条件
要完成本教程，您需要：
与 Back4App 连接的基本 JavaScript 应用程序。
注意：您可以使用我们创建的 JavaScript 安装 Parse SDK 教程 或任何与 Back4App 连接的应用程序。
您的应用程序的域名。
注意：必须拥有一个域名才能开始使用 Facebook 登录 API。要了解更多关于网络托管的信息，请查看 Back4App 网络托管教程。
版本 2.6.5 或更高版本的 Parse Server。
注意：Parse Facebook SDK 仅在版本高于 2.6.5 的 Parse Server 上工作，本教程将使用该版本。因此，如果您使用的是较低版本的 Parse，请考虑升级。
- Facebook 设置
要开始使用 JavaScript 的 Facebook SDK，您需要遵循以下步骤：
访问 Facebook 开发者网站, 创建一个账户和一个应用程序。
设置你的 Facebook 应用程序。
通过点击左侧菜单中的 Facebook 登录 > 快速入门，激活 Facebook 登录，然后按照 Facebook 快速入门文档 进行激活。
要将 Back4app 与你的 Facebook 应用程序链接，登录到你的 Back4App 账户，点击你的应用程序的 服务器设置，然后点击 ''Facebook 登录'' 块的 设置。它应该看起来像这样:
﻿
然后，添加你的 Facebook 应用程序 ID，可以在你的 仪表板 中找到。
按照 这些说明 将 Facebook JavaScript SDK 加载到你的应用程序中。
将对 FB.init() 的调用替换为对 Parse.FacebookUtils.init() 的调用。例如，
 如果你异步加载 Facebook JavaScript SDK，你的 fbAsyncInit 函数将如下所示:
init.js
 // Initialize Parse
 Parse.initialize("Your Parse App Id Here", "Your JavaScript Key Here"); // don't forget to change these keys
 Parse.serverURL = "https://parseapi.back4app.com/";
4
 // Load the Facebook API asynchronous when the window starts loading
 window.fbAsyncInit = function() {
     Parse.FacebookUtils.init({ // this line replaces FB.init({
         appId      : '{facebook-app-id}', // Facebook App ID
         cookie     : true,  // enable cookies to allow Parse to access the session
        xfbml      : true,  // initialize Facebook social plugins on the page
        version    : 'v2.3' // point to the latest Facebook Graph API version, found in FB's App dashboard.
    });
13
    // Put here code to run after the Facebook SDK is loaded.
};
16
// Include the Facebook SDK
(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'));
 // Initialize Parse
 Parse.initialize("Your Parse App Id Here", "Your JavaScript Key Here"); // don't forget to change these keys
 Parse.serverURL = "https://parseapi.back4app.com/";
4
 // Load the Facebook API asynchronous when the window starts loading
 window.fbAsyncInit = function() {
     Parse.FacebookUtils.init({ // this line replaces FB.init({
         appId      : '{facebook-app-id}', // Facebook App ID
         cookie     : true,  // enable cookies to allow Parse to access the session
        xfbml      : true,  // initialize Facebook social plugins on the page
        version    : 'v2.3' // point to the latest Facebook Graph API version, found in FB's App dashboard.
    });
13
    // Put here code to run after the Facebook SDK is loaded.
};
16
// Include the Facebook SDK
(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'));
﻿
- 登录
首先创建一个 使用 Facebook 登录 的函数，将用户保存到 Parse
数据库中。
不幸的是，无法使用 Facebook 提供的登录按钮，因为使用它登录
不会将新用户保存到 Parse 仪表板. 然而，当你使用 Parse SDK for Facebook, 它解决了服务器端的问题。
要轻松设计 Facebook 登录按钮，使用 HTML 和 CSS，请查看此实现： Facebook 登录按钮.
要开始登录实现，为你的 Facebook 登录 按钮分配一个 onClick 事件，调用以下 logIn 函数。要构建此函数，请按照以下步骤操作：
使用 Parse.FacebookUtils.logIn 来执行 Facebook 登录与 Parse 一起，此函数接收 Facebook 的权限作为参数。在此示例中，这些权限对应于公共资料和电子邮件。
注意：请参阅 Facebook 登录权限参考 以获取更多详细信息。
检查用户是否已经在数据库中。如果是，则将他重定向到另一个页面。
调用 FB.api 获取新用户的信息。在这个例子中，可以访问用户的 ID、姓名、电子邮件和权限。
注意: 要了解更多关于此功能的信息，请点击 这里.
设置用户的属性、用户名和电子邮件，并将其保存到数据库中。
重定向页面。
该 logIn()  代码如下：
login.js
 function logIn() {
     Parse.FacebookUtils.logIn("public_profile,email", {
         success: function(user) {
             if (!user.existed()) {
                 FB.api('/me?fields=id,name,email,permissions', function (response) {
                     user.set('username', response.name);
                     user.set('email', response.email);
8
                     user.save(null, {
                        success: function(user) {
                            alert('User logged in and sign up through Facebook, with username: ' + user.get('username') + ' and email: ' + user.get('email'));

                            // You should redirect the user to another page after a successful login.
                            window.location.replace('http://js-fb-login.back4app.io/logout.html');
                        },
                        error: function(user, error) {
                            alert('Failed to save user to database with error: ' + error.message);
                        }
                    });
                });
            } else {
                alert("User logged in through Facebook!");
                // You should redirect the user to another page after a successful login.
                window.location.replace('http://js-fb-login.back4app.io/logout.html');
            }
        },
        error: function(user, error) {
            console.log("User cancelled the Facebook login or did not fully authorize.");
        }
    });
}
 function logIn() {
     Parse.FacebookUtils.logIn("public_profile,email", {
         success: function(user) {
             if (!user.existed()) {
                 FB.api('/me?fields=id,name,email,permissions', function (response) {
                     user.set('username', response.name);
                     user.set('email', response.email);
8
                     user.save(null, {
                        success: function(user) {
                            alert('User logged in and sign up through Facebook, with username: ' + user.get('username') + ' and email: ' + user.get('email'));

                            // You should redirect the user to another page after a successful login.
                            window.location.replace('http://js-fb-login.back4app.io/logout.html');
                        },
                        error: function(user, error) {
                            alert('Failed to save user to database with error: ' + error.message);
                        }
                    });
                });
            } else {
                alert("User logged in through Facebook!");
                // You should redirect the user to another page after a successful login.
                window.location.replace('http://js-fb-login.back4app.io/logout.html');
            }
        },
        error: function(user, error) {
            console.log("User cancelled the Facebook login or did not fully authorize.");
        }
    });
}
﻿
- 登出
登出功能比登录功能简单得多。这次，您将能够使用 Facebook 提供的按钮。然而，它仅用于登出目的，因为必须使用 Parse 的功能进行登录。因此，您应该仅在用户已经登录 Facebook 并希望登出时使用此按钮。
要查看 Facebook 按钮的官方参考，请点击 这里.
以下是您如何使用 Facebook SDK 实现此按钮:
logout.html
 <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with"
      data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"
      onlogin="logOutWithFacebook()"></div>
 <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with"
      data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"
      onlogin="logOutWithFacebook()"></div>
﻿
注意: 此元素具有一个回调 onlogin, 当用户登出时调用我们的函数 logOutWithFacebook。是的，没错：在登出时触发 onlogin 事件。
该 logOutWithFacebook 函数将简单地将用户从其当前的 Parse 会话中登出，并将其重定向到另一个页面，如下所示:
logout.js
 function logOutWithFacebook() { // The callback function
     Parse.User.logOut(); // Delete the current session for the user
     alert('User logged out of Facebook!');
     window.location.replace('http://js-fb-login.back4app.io'); // Redirects the user to another webpage
 }
 function logOutWithFacebook() { // The callback function
     Parse.User.logOut(); // Delete the current session for the user
     alert('User logged out of Facebook!');
     window.location.replace('http://js-fb-login.back4app.io'); // Redirects the user to another webpage
 }
﻿
- 关联和解除关联
Parse Facebook 可用的最后功能是 关联 和 解除关联 功能。
当 关联 是将现有的 Parse.User 与他的 Facebook 账户关联时，解除关联 是指移除这种关联。此关联可以在您的 Parse Dashboard 中看到，在 authData 列中，就在这里:
﻿
您可以使用列中的数据来验证您的 关联 和 解除关联 功能。
步骤 4.1 - 链接
该 链接 函数在尝试再次链接用户之前检查当前用户是否已链接。它相当
 简单，并使用 Parse.FacebookUtils SDK，如下所示：
link.js
 function link() {
     var user = Parse.User.current();
     if (!Parse.FacebookUtils.isLinked(user)) {
         Parse.FacebookUtils.link(user, null, {
             success: function(user) {
                 alert("Woohoo, user logged in with Facebook!");
             },
             error: function(user, error) {
                 alert("User cancelled the Facebook login or did not fully authorize.");
            }
        });
    }
    else {
        alert("Can't link user to facebook because he is already linked");
    }
}
 function link() {
     var user = Parse.User.current();
     if (!Parse.FacebookUtils.isLinked(user)) {
         Parse.FacebookUtils.link(user, null, {
             success: function(user) {
                 alert("Woohoo, user logged in with Facebook!");
             },
             error: function(user, error) {
                 alert("User cancelled the Facebook login or did not fully authorize.");
            }
        });
    }
    else {
        alert("Can't link user to facebook because he is already linked");
    }
}
﻿
步骤 4.2 - 解除链接
对于 解除链接 函数，只需在当前 Parse 用户上调用 Parse.FacebookUtils.unlink，如您所见：
unlink.js
 function unlink() {
     var user = Parse.User.current();
     Parse.FacebookUtils.unlink(user, {
         success: function(user) {
             alert("The user is no longer associated with their Facebook account.");
         }
     });
 }
 function unlink() {
     var user = Parse.User.current();
     Parse.FacebookUtils.unlink(user, {
         success: function(user) {
             alert("The user is no longer associated with their Facebook account.");
         }
     });
 }
﻿
前往你的 authData 列以确认在函数调用后它是空的。
完成了！
到此为止，你不仅学会了如何配置和使用 Facebook 登录 和 登出 功能与您的应用程序，还学会了如何与 Back4App 和 Parse 一起使用它们。
你现在掌握了 Parse Facebook SDK 的使用，可以随意开始使用它。
在 JavaScript SDK API 参考 和 Parse 开源文档用于 Javascript SDK 查看更多关于 Parse SDK 的信息。