Facebook Login

add facebook login to your javascript app introduction this section guides you on how to use the facebook api for javascript in a parse environment through back4app in this tutorial, you will learn how to link the facebook sdk to your parse dashboard and how to implement facebook login login , signup signup , logout logout , link link and unlink unlink functions by following the below mentioned steps, you will be capable of building a system like this back4app javascript example facebook login app at any time, you can access the complete android project built with this tutorial at our github repository prerequisites to complete this tutorial, you will need basic javascript app connected with back4app note you can use the app created in our javascript install parse sdk tutorial or any app connected to back4app a domain for your app note it’s necessary to have a domain to start using the facebook login api to know more about web hosting take a look at back4app webhosting tutorial a parse server at version 2 6 5 or higher note the parse facebook sdk only works on parse server version higher than 2 6 5, which this tutorial will be using so, if you’re using a lower version of parse, consider upgrading it 1 facebook set up to start using the facebook sdk for javascript, you need to follow these steps go to the facebook developer website , create an account and an app set up your facebook app activate the facebook login by clicking on facebook login > quickstart, which is present on the left menu, then follow the facebook quickstart documentation carry out the activation to link back4app with your facebook app, log in to your back4app account, click on server settings server settings of your app and click on settings settings of the ''facebook login'' block it should look like this 5\ then, add your facebook app id, which can be found on the dashboard of your facebook app 6\ follow these instructions for loading the facebook javascript sdk into your application 7\ replace your call to fb init() fb init() with a call to parse facebookutils init() parse facebookutils init() for example, if you load the facebook javascript sdk asynchronously, your fbasyncinit fbasyncinit function will look like this 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 log in start by making a log in with facebook function that saves the user to the parse database unfortunately, it’s not possible to use the login button provided by facebook, as logging in with it would not save the new user to the parse dashboard parse dashboard however, when you use the parse sdk for facebook , it solves the problem on the server side for an easy design of the facebook login button, using html and css, look at this implementation facebook login button to start the login implementation, assign an onclick onclick event that calls the following login function to your facebook login login button to build this function, follow the steps mentioned below use the parse facebookutils login parse facebookutils login to perform the facebook log in together with parse, this function receives facebook’s permissions as arguments in this example, these permissions correspond to the public profile and email note see facebook login permission reference for more details 2\ check if the user is already in the database if he is, just redirect him to another page 3\ make a call to fb api fb api to get information about the new user in this example, it’s possible to access the id, name, email and permissions of users note to know more about this function click here 4\ set the properties, username and email of the user and save it to the database 5\ redirect the page the login() code is the following 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 log out the log out function is way simpler than the log in one this time, you will be able to use the button provided by facebook however, it will be used just for log out purposes, because it’s necessary to use the parse’s function to log in thus, you should only use this button when the user is already logged in to facebook and want to log out to see the official facebook reference to the facebook button click here here’s how you can implement this button using the facebook sdk logout html 1 note this element has a callback onlogin onlogin , which calls our function logoutwithfacebook logoutwithfacebook when the user logs out yeah, that’s right the onlogin onlogin event is fired on log out the logoutwithfacebook logoutwithfacebook function will simply log out the user from his current parse session and redirect him to another page, as shown below 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 link and unlink the last features available for parse facebook are link link and unlink unlink functions while linking is the act of associating an existing parse user parse user to his facebook account and unlinking refers to removing this association this association can be seen in your parse dashboard parse dashboard , in the authdata authdata column, right here you can use the data in the column to validate your link link and unlink unlink functions step 4 1 link the link link function checks if the current user is linked before trying to link him again it is quite simple and uses the parse facebookutils parse facebookutils sdk, as shown below 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 } step 4 2 unlink for the unlink unlink function, simply call parse facebookutils unlink parse facebookutils unlink on the current parse user, as you can see 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 } go to the authdata authdata column in your parse dashboard parse dashboard to confirm that it is empty after the function call it’s done! at this point, you have learned not only how to configure and use the facebook login login and logout logout functions with your app, but also how to use them with back4app and parse you now master the use of the parse facebook sdk parse facebook sdk and can start using it at will see more about parse sdk at j avascript sdk api reference and parse open source documentation for javascript sdk