JavaScript
Интеграция Facebook логина в JavaScript с Parse
15 мин
добавьте вход через facebook в ваше javascript приложение введение этот раздел направляет вас, как использовать facebook api для javascript в parse среде через back4app в этом учебнике вы узнаете, как связать facebook sdk с вашей панелью управления parse и как реализовать функции facebook входа входа , регистрации регистрации , выхода выхода , связи связи и разъединения разъединения функций следуя нижеуказанным шагам, вы сможете создать систему, подобную этой пример приложения для входа через facebook на back4app в любое время вы можете получить доступ к полному проекту android, созданному с помощью этого учебника, в нашем репозитории github предварительные требования чтобы завершить этот учебник, вам потребуется базовое javascript приложение, подключенное к back4app примечание вы можете использовать приложение, созданное в нашем учебнике по установке javascript parse sdk , или любое приложение, подключенное к back4app домен для вашего приложения примечание необходимо иметь домен, чтобы начать использовать facebook login api чтобы узнать больше о веб хостинге, посмотрите учебник по веб хостингу back4app сервер parse версии 2 6 5 или выше примечание sdk facebook для parse работает только на версиях сервера parse выше 2 6 5, которые будут использоваться в этом учебнике поэтому, если вы используете более низкую версию parse, подумайте о ее обновлении 1 настройка facebook чтобы начать использовать sdk facebook для javascript, вам нужно выполнить следующие шаги перейдите на сайт разработчиков facebook , создайте учетную запись и приложение настройте ваше приложение facebook активируйте вход через facebook, нажав на вход через facebook > быстрый старт, который находится в левом меню, затем следуйте за документацией по быстрому старту facebook для выполнения активации чтобы связать back4app с вашим приложением facebook, войдите в свою учетную запись back4app и нажмите на настройки сервера настройки сервера вашего приложения и нажмите на настройки настройки блока ''вход через facebook'' это должно выглядеть так 5\ затем добавьте ваш идентификатор приложения facebook, который можно найти на панели управления , вашего приложения facebook 6\ следуйте этим инструкциям для загрузки 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 однако, когда вы используете parse sdk для facebook , это решает проблему на стороне сервера для простого дизайна кнопки входа с facebook, используя html и css, посмотрите на эту реализацию кнопка входа с facebook чтобы начать реализацию входа, назначьте событие onclick onclick которое вызывает следующую функцию login для вашей кнопки вход с facebook вход с facebook чтобы создать эту функцию, следуйте шагам, указанным ниже используйте parse facebookutils login parse facebookutils login , чтобы выполнить вход в facebook вместе с parse, эта функция принимает разрешения facebook в качестве аргументов в этом примере эти разрешения соответствуют публичному профилю и электронной почте примечание см справочник разрешений facebook login для получения дополнительной информации 2\ проверьте, есть ли пользователь уже в базе данных если да, просто перенаправьте его на другую страницу 3\ сделайте вызов к fb api fb api для получения информации о новом пользователе в этом примере можно получить доступ к id, имени, электронной почте и разрешениям пользователей примечание чтобы узнать больше об этой функции, нажмите здесь 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, нажмите здесь вот как вы можете реализовать эту кнопку с помощью 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 на справочнике api javascript sdk и открытой документации parse для javascript sdk