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

15 мин

добавьте вход через facebook в ваше javascript приложение введение этот раздел направляет вас, как использовать facebook api для javascript в parse http //parseplatform org/ среде через back4app в этом учебнике вы узнаете, как связать facebook sdk с вашей панелью управления parse и как реализовать функции facebook \входа\ , \регистрации\ , \выхода\ , \связи\ и \разъединения\ функций следуя нижеуказанным шагам, вы сможете создать систему, подобную этой пример приложения для входа через facebook на back4app http //js fb login back4app io/ в любое время вы можете получить доступ к полному проекту android, созданному с помощью этого учебника, в нашем репозитории github https //github com/back4app/javascript facebook login предварительные требования чтобы завершить этот учебник, вам потребуется базовое javascript приложение, подключенное к back4app примечание вы можете использовать приложение, созданное в нашем учебнике по установке javascript parse sdk https //www back4app com/docs/javascript/parse javascript sdk , или любое приложение, подключенное к back4app домен для вашего приложения примечание необходимо иметь домен, чтобы начать использовать facebook login api чтобы узнать больше о веб хостинге, посмотрите учебник по веб хостингу back4app 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, вам нужно выполнить следующие шаги перейдите на сайт разработчиков facebook https //developers facebook com/ , создайте учетную запись и приложение настройте ваше приложение facebook активируйте вход через facebook, нажав на вход через facebook > быстрый старт, который находится в левом меню, затем следуйте за документацией по быстрому старту facebook https //developers facebook com/docs/facebook login/web для выполнения активации чтобы связать back4app с вашим приложением facebook, войдите в свою учетную запись back4app 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()\ на вызов \parse facebookutils init()\ например, если вы загружаете javascript sdk facebook асинхронно, ваша \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 sdk для facebook http //docs parseplatform org/js/guide/#facebook users , это решает проблему на стороне сервера для простого дизайна кнопки входа с facebook, используя html и css, посмотрите на эту реализацию кнопка входа с facebook https //codepen io/davidelrizzo/pen/veyvyv чтобы начать реализацию входа, назначьте событие \onclick\ которое вызывает следующую функцию login для вашей кнопки \вход с facebook\ чтобы создать эту функцию, следуйте шагам, указанным ниже используйте \parse facebookutils login\ , чтобы выполнить вход в facebook вместе с parse, эта функция принимает разрешения facebook в качестве аргументов в этом примере эти разрешения соответствуют публичному профилю и электронной почте примечание см справочник разрешений facebook login https //developers facebook com/docs/permissions для получения дополнительной информации 2\ проверьте, есть ли пользователь уже в базе данных если да, просто перенаправьте его на другую страницу 3\ сделайте вызов к \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\ , который вызывает нашу функцию \logoutwithfacebook\ когда пользователь выходит да, верно событие \onlogin\ срабатывает при выходе функция \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\ с его аккаунтом facebook, а разъединение относится к удалению этой ассоциации эта ассоциация может быть видна в вашем \parse dashboard\ , в колонке \authdata\ вот здесь вы можете использовать данные в колонке для проверки ваших \связать\ и \разъединить\ функций шаг 4 1 ссылка функция \link\ проверяет, связан ли текущий пользователь, прежде чем пытаться снова его связать это довольно просто и использует \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\ просто вызовите \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\ в вашем \parse dashboard\ чтобы подтвердить, что она пуста после вызова функции готово! на этом этапе вы узнали не только как настроить и использовать facebook \вход\ и \выход\ функции с вашим приложением, но и как использовать их с back4app и parse теперь вы освоили использование \parse facebook sdk\ и можете начать использовать его по своему усмотрению смотрите больше о parse sdk на справочнике api javascript sdk https //parseplatform org/parse sdk js/api/4 3 1/ и открытой документации parse для javascript sdk https //docs parseplatform org/js/guide/#facebook users