Интеграция Facebook логина в JavaScript с Parse

добавьте вход через facebook в ваше javascript приложение введение этот раздел направляет вас, как использовать facebook api для javascript в http //parseplatform org/ среде через back4app в этом учебнике вы узнаете, как связать facebook sdk с вашей панелью управления parse и как реализовать функции facebook входа входа , регистрации регистрации , выхода выхода , связи связи и разъединения разъединения функций следуя нижеуказанным шагам, вы сможете создать систему, подобную этой http //js fb login back4app io/ в любое время вы можете получить доступ к полному проекту android, созданному с помощью этого учебника, в нашем https //github com/back4app/javascript facebook login предварительные требования чтобы завершить этот учебник, вам потребуется базовое javascript приложение, подключенное к back4app примечание вы можете использовать приложение, созданное в нашем https //www back4app com/docs/javascript/parse javascript sdk , или любое приложение, подключенное к back4app домен для вашего приложения примечание необходимо иметь домен, чтобы начать использовать facebook login api чтобы узнать больше о веб хостинге, посмотрите https //help back4app com/hc/en us/articles/360002120991 how can i use back4app webhosting сервер parse версии 2 6 5 или выше примечание sdk facebook для parse работает только на версиях сервера parse выше 2 6 5, которые будут использоваться в этом учебнике поэтому, если вы используете более низкую версию parse, подумайте о ее обновлении 1 настройка facebook чтобы начать использовать sdk facebook для javascript, вам нужно выполнить следующие шаги перейдите на https //developers facebook com/ , создайте учетную запись и приложение настройте ваше приложение facebook активируйте вход через facebook, нажав на вход через facebook > быстрый старт, который находится в левом меню, затем следуйте за https //developers facebook com/docs/facebook login/web для выполнения активации чтобы связать back4app с вашим приложением facebook, войдите в свою https //www back4app com/ и нажмите на настройки сервера настройки сервера вашего приложения и нажмите на настройки настройки блока ''вход через facebook'' это должно выглядеть так 5\ затем добавьте ваш идентификатор приложения facebook, который можно найти на https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps , вашего приложения facebook 6\ следуйте https //developers facebook com/docs/javascript/quickstart/ для загрузки javascript sdk facebook в ваше приложение 7\ замените ваш вызов fb init() fb init() на вызов parse facebookutils init() parse facebookutils init() например, если вы загружаете javascript sdk facebook асинхронно, ваша 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 dashboard parse dashboard однако, когда вы используете http //docs parseplatform org/js/guide/#facebook users , это решает проблему на стороне сервера для простого дизайна кнопки входа с facebook, используя html и css, посмотрите на эту реализацию https //codepen io/davidelrizzo/pen/veyvyv чтобы начать реализацию входа, назначьте событие onclick onclick которое вызывает следующую функцию login для вашей кнопки вход с facebook вход с facebook чтобы создать эту функцию, следуйте шагам, указанным ниже используйте 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 на кнопку 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 ссылка функция link link проверяет, связан ли текущий пользователь, прежде чем пытаться снова его связать это довольно просто и использует 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 отключение для функции unlink unlink просто вызовите parse facebookutils unlink parse facebookutils unlink для текущего пользователя parse, как вы можете видеть 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 в вашем parse dashboard parse dashboard чтобы подтвердить, что она пуста после вызова функции готово! на этом этапе вы узнали не только как настроить и использовать facebook вход вход и выход выход функции с вашим приложением, но и как использовать их с back4app и parse теперь вы освоили использование parse facebook sdk parse facebook sdk и можете начать использовать его по своему усмотрению смотрите больше о parse sdk на https //parseplatform org/parse sdk js/api/4 3 1/ и https //docs parseplatform org/js/guide/#facebook users