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

将 facebook 登录添加到您的 javascript 应用程序 介绍 本节指导您如何在 http //parseplatform org/ 环境中通过 back4app 使用 facebook api for javascript。 在本教程中，您将学习如何将 facebook sdk 链接到您的 parse 控制面板，以及如何实现 facebook 登录 登录 , 注册 注册 , 注销 注销 , 链接 链接 和 取消链接 取消链接 功能。 通过遵循以下步骤，您将能够构建一个这样的系统： http //js fb login back4app io/ 随时，您都可以在我们的 https //github com/back4app/javascript facebook login 中访问使用本教程构建的完整 android 项目。 先决条件 要完成本教程，您需要： 与 back4app 连接的基本 javascript 应用程序。 注意： 您可以使用我们创建的 https //www back4app com/docs/javascript/parse javascript sdk 或任何与 back4app 连接的应用程序。 您的应用程序的域名。 注意： 必须拥有一个域名才能开始使用 facebook 登录 api。要了解更多关于网络托管的信息，请查看 https //help back4app com/hc/en us/articles/360002120991 how can i use back4app webhosting 。 版本 2 6 5 或更高版本的 parse server。 注意： parse facebook sdk 仅在版本高于 2 6 5 的 parse server 上工作，本教程将使用该版本。因此，如果您使用的是较低版本的 parse，请考虑升级。 1 facebook 设置 要开始使用 javascript 的 facebook sdk，您需要遵循以下步骤： 访问 https //developers facebook com/ , 创建一个账户和一个应用程序。 设置你的 facebook 应用程序。 通过点击左侧菜单中的 facebook 登录 > 快速入门，激活 facebook 登录，然后按照 https //developers facebook com/docs/facebook login/web 进行激活。 要将 back4app 与你的 facebook 应用程序链接，登录到你的 https //www back4app com/ 账户，点击你的应用程序的 服务器设置 服务器设置 ，然后点击 ''facebook 登录'' 块的 设置 设置 。它应该看起来像这样 5\ 然后，添加你的 facebook 应用程序 id，可以在你的 https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps 中找到。 6\ 按照 https //developers facebook com/docs/javascript/quickstart/ 将 facebook javascript sdk 加载到你的应用程序中。 7\ 将对 fb init() fb init() 的调用替换为对 parse facebookutils init() parse facebookutils init() 的调用。例如， 如果你异步加载 facebook javascript sdk，你的 fbasyncinit fbasyncinit 函数将如下所示 init js 1 // initialize parse 2 parse initialize("your parse app id here", "your javascript key here"); // don't forget to change these keys 3 parse serverurl = "https //parseapi back4app com/"; 4 5 // load the facebook api asynchronous when the window starts loading 6 window\ fbasyncinit = function() { 7 parse facebookutils init({ // this line replaces fb init({ 8 appid '{facebook app id}', // facebook app id 9 cookie true, // enable cookies to allow parse to access the session 10 xfbml true, // initialize facebook social plugins on the page 11 version 'v2 3' // point to the latest facebook graph api version, found in fb's app dashboard 12 }); 13 14 // put here code to run after the facebook sdk is loaded 15 }; 16 17 // include the facebook sdk 18 (function(d, s, id){ 19 var js, fjs = d getelementsbytagname(s)\[0]; 20 if (d getelementbyid(id)) {return;} 21 js = d createelement(s); js id = id; 22 js src = "//connect facebook net/en us/sdk js"; 23 fjs parentnode insertbefore(js, fjs); 24 }(document, 'script', 'facebook jssdk')); 2 登录 首先创建一个 使用 facebook 登录 的函数，将用户保存到 parse 数据库中。 不幸的是，无法使用 facebook 提供的登录按钮，因为使用它登录 不会将新用户保存到 parse 仪表板 parse 仪表板 然而，当你使用 http //docs parseplatform org/js/guide/#facebook users , 它解决了服务器端的问题。 要轻松设计 facebook 登录按钮，使用 html 和 css，请查看此实现： https //codepen io/davidelrizzo/pen/veyvyv 要开始登录实现，为你的 facebook 登录 登录 按钮分配一个 onclick onclick 事件，调用以下 login 函数。要构建此函数，请按照以下步骤操作： 使用 parse facebookutils login parse facebookutils login 来执行 facebook 登录与 parse 一起，此函数接收 facebook 的权限作为参数。在此示例中，这些权限对应于公共资料和电子邮件。 注意：请参阅 https //developers facebook com/docs/permissions 以获取更多详细信息。 2\ 检查用户是否已经在数据库中。如果是，则将他重定向到另一个页面。 3\ 调用 fb api fb api 获取新用户的信息。在这个例子中，可以访问用户的 id、姓名、电子邮件和权限。 注意 要了解更多关于此功能的信息，请点击 https //developers facebook com/docs/javascript/reference/fb api 4\ 设置用户的属性、用户名和电子邮件，并将其保存到数据库中。 5\ 重定向页面。 该 login() 代码如下： login js 1 function login() { 2 parse facebookutils login("public profile,email", { 3 success function(user) { 4 if (!user existed()) { 5 fb api('/me?fields=id,name,email,permissions', function (response) { 6 user set('username', response name); 7 user set('email', response email); 8 9 user save(null, { 10 success function(user) { 11 alert('user logged in and sign up through facebook, with username ' + user get('username') + ' and email ' + user get('email')); 12 13 // you should redirect the user to another page after a successful login 14 window\ location replace('http //js fb login back4app io/logout html'); 15 }, 16 error function(user, error) { 17 alert('failed to save user to database with error ' + error message); 18 } 19 }); 20 }); 21 } else { 22 alert("user logged in through facebook!"); 23 // you should redirect the user to another page after a successful login 24 window\ location replace('http //js fb login back4app io/logout html'); 25 } 26 }, 27 error function(user, error) { 28 console log("user cancelled the facebook login or did not fully authorize "); 29 } 30 }); 31 } 3 登出 登出功能比登录功能简单得多。这次，您将能够使用 facebook 提供的按钮。然而，它仅用于登出目的，因为必须使用 parse 的功能进行登录。因此，您应该仅在用户已经登录 facebook 并希望登出时使用此按钮。 要查看 facebook 按钮的官方参考，请点击 https //developers facebook com/docs/facebook login/web/login button 以下是您如何使用 facebook sdk 实现此按钮 logout html 1 注意 此元素具有一个回调 onlogin onlogin , 当用户登出时调用我们的函数 logoutwithfacebook logoutwithfacebook 。是的，没错：在登出时触发 onlogin onlogin 事件。 该 logoutwithfacebook logoutwithfacebook 函数将简单地将用户从其当前的 parse 会话中登出，并将其重定向到另一个页面，如下所示 logout js 1 function logoutwithfacebook() { // the callback function 2 parse user logout(); // delete the current session for the user 3 alert('user logged out of facebook!'); 4 window\ location replace('http //js fb login back4app io'); // redirects the user to another webpage 5 } 4 关联和解除关联 parse facebook 可用的最后功能是 关联 关联 和 解除关联 解除关联 功能。 当 关联 是将现有的 parse user parse user 与他的 facebook 账户关联时， 解除关联 是指移除这种关联。此关联可以在您的 parse dashboard parse dashboard 中看到，在 authdata authdata 列中，就在这里 您可以使用列中的数据来验证您的 关联 关联 和 解除关联 解除关联 功能。 步骤 4 1 链接 该 链接 链接 函数在尝试再次链接用户之前检查当前用户是否已链接。它相当 简单，并使用 parse facebookutils parse facebookutils sdk，如下所示： link js 1 function link() { 2 var user = parse user current(); 3 if (!parse facebookutils islinked(user)) { 4 parse facebookutils link(user, null, { 5 success function(user) { 6 alert("woohoo, user logged in with facebook!"); 7 }, 8 error function(user, error) { 9 alert("user cancelled the facebook login or did not fully authorize "); 10 } 11 }); 12 } 13 else { 14 alert("can't link user to facebook because he is already linked"); 15 } 16 } 步骤 4 2 解除链接 对于 解除链接 解除链接 函数，只需在当前 parse 用户上调用 parse facebookutils unlink parse facebookutils unlink ，如您所见： unlink js 1 function unlink() { 2 var user = parse user current(); 3 parse facebookutils unlink(user, { 4 success function(user) { 5 alert("the user is no longer associated with their facebook account "); 6 } 7 }); 8 } 前往你的 authdata authdata 列以确认在函数调用后它是空的。 完成了！ 到此为止，你不仅学会了如何配置和使用 facebook 登录 登录 和 登出 登出 功能与您的应用程序，还学会了如何与 back4app 和 parse 一起使用它们。 你现在掌握了 parse facebook sdk parse facebook sdk 的使用，可以随意开始使用它。 在 j https //parseplatform org/parse sdk js/api/4 3 1/ 和 https //docs parseplatform org/js/guide/#facebook users 查看更多关于 parse sdk 的信息。