Facebook Login & Graph API | JavaScript SDK

hey what's going on guys I recently got a request to do a video on the facebook login and graph API now I've used this before but I'm definitely not an expert I don't know the ins and outs of it but I just want to kind of do some basic stuff I want to show you how to implement the JavaScript SDK how to actually set up a page so that we can log in so that we can add some access control and do a few other things all right so let's go ahead and get into it this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full time job in the industry to learn more visit dev mountain comm or click the link in the description below alright guys so I just want to stress before I start off here that I didn't really plan anything out I don't have all the code in front of me like I do for many of my tutorials so if I do make a mistake or I do something that's not the you know the best way to do it feel free to point it out but just don't be a dick about it you know I hate to know-it-alls that like to pick apart everything I do and try to find some Fault in it or you know be a wiseass about it it's but it's perfectly fine I actually want you guys to correct me if I do something that's you know not the best way but just do it respectfully all right so I have a couple tabs open here this is the documentation for the JavaScript SDK all right so there's there's a few different SDKs that you can use for the web there's the JavaScript it's a PHP you also have def decays for mobile apps right here Swift and iOS Android all that stuff even react native which is kind of cool but we're going to stick to the web and the JavaScript SDK all right so let's go ahead and click on this QuickStart link and we'll go down here to basic setup and we need to include this script tag in our HTML this is going to load the SDK and it's going to do everything asynchronously so right here it says the async load means that it doesn't block loading other elements on your page so once we run this function here we'll have access to this FB object and then we're going to initialize our app you see we need to put our app ID in here which I'll show you how to get in a second and then we can use that FB object to access the graph API and we can do all kinds of stuff all right now if you don't know what the graph API is try and think of everything on Facebook as a node so you have users you have their posts their photos their friends everything and picture them as nodes on a graph okay so that's kind of how you need to visualize the graph API and you can make queries and request certain info from a user from an authenticated user now if we look over here this is the graph API Explorer it's just a tool that's used to query the API now we'll be doing this in the code but this is a nice little tool to kind of see what you can do and you'll see that right here it's a slash me that represents the the current logged in user okay you can see I'm logged in with excuse me with my personal account and we're saying slash me and then adding a fields parameter and saying we want to collect the ID and the name of this of whoever's logged in so if we click Submit we're going to get a message here that says there's an active access token must be used to query information so with this environment here we need to generate a token and you can see this get token right here if we say get user access token and then it's going to show a bunch of different permissions that we can allow all right and we need to do this in our application - you need to request certain permissions if you've ever used a Facebook app then you've probably seen the little pop-up that says this app wants to access for instance your email or it wants to publish on your on your feet or something like that so we're going to check off if you look down here it says public profile included by default so that's going to allow us to get I believe it's just the ID in the name so let's actually get the token and not check any of these first so if we say get access token you'll get this little pop-up you've probably seen this before I'm going to just click continue as Brad and now if we click Submit it'll get us the ID in the name okay because we have permission to to get the public profile data now if I were to go on here and say let's add email and birthday and submit oops I don't think I can put a space there and it's not it's not going to give it to us if we click show it says here the field email is only accessible on the user object that grants the email permission and this one's for the user birthday permission so let's go back to the user token here and check off email and user birthday and then get access token so we'll have to do this once again and now if we submit we can get the email on the birthday all right so this is essentially what we'll be doing in our application this is just a tool to kind of test and see what you can do what you can get what you can request alright now as I said we need to get an app ID so to do that you need to go to developers base book.com slash apps and I can't remember but you may have to fill out a form to kind of register as a developer I don't know I've had this for a while so I'm not sure if you have to do that but if you do just go ahead and fill the form out and then we're going to say create new app and the display name now you can't use anything but that has the word face or book you can't use FB you can see I try to use FB off before but that didn't work that you basically can't have any Facebook branding whatsoever so we're going to call this social let's see let's just call it social off yeah social off that's fine and then your contact email and then a category let's say communication I guess yeah it should be fine and then create app ID okay let's do this stupid thing what is that is that an ln8 I hate these see NCT is that right okay and now what we want to do is choose that what type of app this is going to be or just add a product to it a facebook login is what we want but you can also do analytics messenger webhooks marketing API there's a whole bunch of crap here really you can do a lot of stuff but we're just we just want a simple login so that we can validate our entik eight and then use the graph API so let's say get started and it gives you an option if you want to use a mobile platform we want web and then the URL of our site so I'm actually going to be using my localhost so I'm going to say HTTP localhost looks like I had a social login before so this is social off we'll call it and then let's click Save and then continue alright so this is our custom call to FB and knit and you can see it actually includes our app ID so this is what we saw right here but it's customized for this application yours will obviously have a different ID so what I'm going to do is just copy this here click copy code and I'm using xampp on windows which gives me an Apache server so I can run this on my local host you can use any kind of server that you want or you know just use your file system but all I'm going to do here is create a new directory in my htdocs I'm going to call this social off and then we're going to CD into that and you don't have to use the command line you can obviously just use your your Explorer or whatever it's called and then I'm going to just create a file here called index.html alright and then I'm just going to say Adam dot and that's going to open up my text editor in that directory okay I'm using Adam for my text editor so what we want to do is just take that code we just copied let's open up index.html and I'm just going to put some basic HTML structure in here and we want to put this right under the opening body tag all right so I'm just going to paste that in here and let's just move this over all right and for title it's just say social off and then you can see it has my app ID yours will be different and then down here is the load Z SDK so let's go back over here and see what we get if we click Next alright so the first step when loading your webpage is figuring out figuring out if a person is already logged in or not so right here we're going to use this FB get login status and that's going to give us a response telling us if the current user is is logged in so let's grab that and you want to make sure you put that in here okay inside of this function so we're actually going to get rid of this we don't need this right here all right and paste that in if you try to put this somewhere else it's going to say that FB is not found it's not going to know what that is you have to do it inside this function so once we call get login status we're actually going to create a function called status change call back and pass in that response so let's go ahead and do that we're actually going to go down here now to the bottom here and we're going to say function status change callback and pass in the response and then we want to check to see if the response status is connected because we look over here we should get something like this all right so let's do an if statement here and let's say if response dot status is equal to a string called connected then that means we're logged in alright so we'll just do a console dot log and we'll say logged in and authenticated okay and then let's do an else and we'll do another console.log I'll just say not authenticated okay so let's go ahead and save this and then I'm going to go to localhost / what is this social off all right so let's open up the console with f12 and you see we're not authenticated so we need a way to authenticate and we don't have that there's nothing here so we can create a button if we go back to the hell where are we right here and click Next we can use this this FB login button and then provide some attributes now scope is going to be the basically the permissions that we want and these are identical to see these right here so you can see we can request email and user birthday and all that okay so we put that in there and then we have an on login attribute that's going to call a function called check login state okay once we do that and we're going to create that function and then you use that FB object and call get login status all right so let's go let's see let's go into the body and I'm actually going to just copy this and let's throw that in there okay and for now we'll just keep public profile and email and we want to create this check login state so we can get that from here we're going to go ahead and put that in our script tags okay and then that's going to call FB get logging status and then it's going to call status change callback again which is this here all right so let's save this and see what we get okay so we have a little login button if we click it it's going to say social off will receive your public profile and email address now if we wanted to add to this and say user birthday okay we'll go back and reload and click it again now this right here submit for login review it says some of the permissions below have not been approved for use by Facebook so what we would have to do is go to this link here and do some stuff so make social log public no we want to do that we want to submit items for approval so automatically public profile email and user friends are approved automatically anything else you actually have to go through and fill this form out so for instance we want where is it the hell is it user birthday and I think was that it and the email what is email probably passed it I really don't need email I don't know let's just do that add one item all right and then before you can submit review complete the following so use a birthday kind of a pain in the ass I I believe this is new because I don't remember doing this a while ago uh so this says complete the notes for this item before submitting how is your app using user birthday so we could say for instance sends a birthday gift or greeting adds people's information to an account profile that's more like it and then what platforms we're using web all right and then so you must show how a person logs into Facebook this is a pain in the ass drag your streamcast file so I have to make a video and then upload it showing them that's stupid now I'm not going to do this because this isn't something that I'm going to want to publish I mean you're gonna you're going to have to do it if you want to actually publish this and put it in their you know their app store or whatever but we can still use it we're just going to get that message okay this red message right here so that's fine for now so we'll just say continue and now if you look down here it says login logged in and authenticated so what's happening is it's calling the change call back here and it's seeing that we're connected and it's just console logging this okay so we can now log in and if I were to click this again it's just going to kind of flash now you're going to want to hide this if they're logged in and I'll show you how we can do that in a minute but I do want to add a little bit of style to this application so we're going to use bootstrap I'm just going to go to boot swatch which will give us kind of a customized version and let's let's grab this right here how's the Facebook blue so just say download and then grab this link here and let's go to our index file and I'm just going to paste that in here all right and then I want to get a navbar so I'm going to go to get bootstrap calm you guys if you guys watch a lot of my videos you know the drill getting started examples starter template control you and going to grab this nav here alright we're going to go put this down here paste that in get rid of the fix top and see project name say social off and let's see I'm just going to have a home link that will go to index.html and to get rid of the active class and what I want to do is put another UL here actually will just copy this one paste that in and then let's add a class navbar get rid of this and I'm going to put the button up there okay so I'm going to cut that out and let's put that here and we can give this an ID so I'm going to give it an ID of FB - BTN and let's save it let's go back to our plication and reload let's say I don't want the green I want the blue version of the navbar so I'm going to change this to navbar default there we go and the button I want to move down so remember I gave it an ID so we can grab on to that in the style I'm not going to create a whole separate style sheet I'm just going to use style tags here so it's say ID FB - BTN and let's give it a margin top of 10 pixels maybe 20 there we go so now we have a little login button now under the navbar which ends right here let's put a div and give it a class of container and I'm going to put in an h3 here I'm going to give it an ID of heading and let's say login to view your profile alright and then I want to put some basically some placeholders here so this will be a div and let's give this a lot of class but an ID of profile alright we're not going to put anything in here we're going to manipulate it through the JavaScript now I want this profile to be hidden by default when we enter the page now even if we aren't logged in it's not going to display anything because it's not going to be able to get the information but I still want the div hidden so I'm going to go up to the head and go into the style and say profile and we're going to set that to display:none by default all right so now what I want to do is create a function to show and hide things depending on our login state okay so let's go down at the bottom here and let's say function set elements and let's put in here it's going to take in a parameter if we're logged in or not so true or false so let's call this is logged in and then we're just going to check for it so say if is logged in and it's also going to have an else now if we're logged in we want to show the profile right now it's set to display:none so let's say document dot get element by ID and we want profile and then we're going to set the just the style dot display equal to block if we're logged in now we also don't want to show this button if we're logged in so I'm going to just copy this and let's change this to FB - BTN remember we gave it that ID and we're going to set that this to none all right and then if we are not logged in we want this to be block and we want this to be hidden so let's just copy both and we'll just change this to none and this to block alright there's other ways to do this guys I'm just kind of winging it I have some snippets that I'm going on but it's not something that I you know it's not it's not something that's production-ready I just want you guys to get kind of a handle on how this works so we need to figure out when to run this set element so let's go let's see we'll do it in the status change callback so if we're connected that means we're logged in so we can say set elements and remember it takes in a parameter of if we're logged in or not so I'm going to say true and then in the else X let's put this here and then we'll say false let's also put this above all right okay so if we save that and reload now you can see the button is gone could because we are logged in now we're going to need a way to log out so let's go down to the nav bar and right where we have the facebook login we're going to create above it an li tag and in here let's say we'll put an a tag and then this is going to go nowhere because we're going to actually add an event handler so let's say on click it's going to call function called logout all right so let's save that and then we have our logout link now I want this by default to be hidden so let's go up here and add it right here I would say that I give it we going to give it an ID so let's give he'll just say ID and let's set that to logout all right I apologize if you can hear my son yell on upstairs and then here let's put logout all right and then we also want to add it to set elements so if we are logged in we want it to be shown so let's just copy that and whoops we'll change this to logout alright and then if it if we are are not logged in we want it hidden so we'll say logout equals none our style display equals none all right so let's create the logout function okay and all we have to do here is take that FV value and call a method called logout so FBI logout and then that's going to take in a callback and a response will be returned we don't need to use that they'll all we need to do here it'll it'll do the logout but we also want to do the set elements okay because we want to pass along that we're no longer logged in so false all right so let's go ahead and reload and then if we click logout you can see right here the button has changed and we should be logged out if we go ahead and reload you'll see we get not authenticated I also want this heading to be hidden when we're logged in so let's add that up here so by deed has an idea of heading okay so if we log in again cy is like that heading style display:none okay if we reload it hides but we wanted to go away right when we login so if we go to actual you know what we'll do let's grab this and we're going to set this to block all right so now if we log out we can see it and then if we log back in it goes away good now when we are logged in so let's go to let's go to our status where the hell is it right here status change call back and we're connected means we lot we're logged in all we're doing is setting the elements now we're also going to call a function when we log in and we'll call that test API all right and we'll create that right here okay and what we can what we can do now is we can access FB dot API and we can work with the graph API just like we were doing here so so you can refresh that so we can say slash me and then we can add some fields so let's say F b dot api and then in here we'll say slash me because we're authenticated it knows who we are and then we're going to attach the fields fields parameter and set that to name and email all right and then it's going to take a second parameter of a call back so I'm going to say function and that's going to give us a response from that call alright and then here let's check to make sure there's a response and that there's no error so we can say if response and there's no response dot error then we can continue on with it so for now let's just do a console log of the response so we'll save that and then let's go back and reload and down here you'll see we got our response which is an object that has the email sorry about that yelling upstairs and then an ID that's the user ID and then the name okay now we also gave it permission to use the birthday so we can just add on to here and say user underscore birthday and if we go and reload Oh see what happened should be giving us name email user birthday oh it's just birthday not user that's the name of the permission but the actual field is just birthday alright and there it is cool now we want to output that profile information that we're fetching so we could do that here but what I'm going to do is create another function for that so we're going to call that build profile and we're going to pass along the response okay and then we'll just create that right here we'll say function build profile okay and for the response that's passed in we're going to call that user because that's essentially what it is and then we're going to create a variable called profile and I'm going to use template string a template string so these are actually back ticks that to the left of your number one key and that makes it so that we can put we can out we can put our Java scale in here and we can use multiple lines we don't have to keep concatenated and doing all that stuff alright this is part of the es6 standard so let's put in an h3 and in here we're going to have the user's name now if you want to put a variable in here you can use the money sign and then the curly brace alright and then we're going to say user dot name user is coming from here which is coming from this response which is coming from the API call alright so under the h3 let's put in a ul and we're using bootstraps so I'm going to use a class of list group and then here let's put an li and we're going to give that a class as well of list group item and this is going to be the users ID so it's a user ID and then we're going to put in that variable that user dot ID alright and then I'm just going to copy this I'm going to put some other information here so let's do user dot email and we'll change the label here to email and then what else do we have the birthday so that'll be user dot birthday and then I also want the location now in order to do that we have to add that permission request down here so where we have this FB login we want to add to the scope user underscore location okay so yeah let's do that and just test it out in the Explorer we would need the permission so let's use your location okay and then what we can do is just add on to here location and it gives us a location object with an ID and then the name which is the city and state so let's do this in our application we're going to go up to where we made the API call where the hell is it's right here and let's just add location all right and then down here we should now have access to user location and we want the name field which is the city and state so now all we have to do is go down here and say document dot get element by D profile and we're going to set the innerhtml equal to that profile variable so let's go ahead and save that and go to our application and let's see we get an area cannot read property name of undefined so which is talking about that user dot location dot name oh you know what it is since we added a new prop a new field that that needs a permission we actually need to log back in so now if we go ahead and click login it's going to now ask us to share the city of the location and continue and now we can get the data all right so we're pulling this data from my facebook profile so before I go I want to show you how we can pull in our feed or our posts from Facebook so if we go to the Explorer and let's change this to slash me slash feed and submit okay so it's not getting the data you can see it's an empty array because we need that permission so if we go to get token and we check off user posts and then we validate here or authenticate whatever submit and now we can get the post so I want to display these on our page as well so I'm going to have to put a placeholder in the HTML where I want this to output so let's go right here and we're going to say div ID equals feed all right and we're going to hide that by default just like we did with profile and logout all right so you can kind of see the cycle here when you want to add new stuff and then we'll also have to go to our set elements and when we are logged in we want it to display so I'm going to just copy one of these and this will be feed we want that to display block and then if we're not logged in we want it hidden so let's say feed and make sure it's equal to none all right so let's go back up here to where we made our call and we want to go inside of this inside the call function and lo it asynchronously so right here I'm going to say FB dot API and we're going to pass in / me / feed and then put our call back with the response that it gives us all right and just like we did here we're going to check for the error and then if everything is okay we're going to proceed to run a function called build feet and pass in that response all right so let's go create that down here all right and that's going to take in a response which I'm going to call feed now remember it comes in an array called data so keep that in mind when we when we go when we work with the response so we're going to create a variable here called output and initially I just want it to be an h3 and we'll just say latest posts and then we're going to have to loop through the data array so let's say for and in here it's do let's I equals 0 actually no we're not doing that we're going to say let I in feed data and then let's check for the make sure it has a message you'll see with with this data this one has a story and this is a link to to a video I only want the regular posts and they all have a message so we're going to check for that so if see I'm going to say if feed dot data and then the current iteration and then dot message so if there's a message we're going to proceed and we're going to append on to the output variable and let's use our back ticks here so we can use a template string and let's see I guess we'll put a div and we'll give it a class of well which is a bootstrap class and inside here we want a variable which is going to be feed dot data a current iteration and then the message all right and then after the for loop which ends right here we need to do our output so document dot get element sorry about that get element by D feed and then we want to do dot inner HTML is equal to that output variable alright let's save that and we're going to have two real aughh in for this to work so let's go ahead and login oh you know what we didn't add the permission for the post so I'm going to log out and go down here to the button and we just want to add on to this user underscore posts alright so let's try that and still not outputting hmm div ID of feed and it is displaying because it's showing the h3 and then we're looping through you know what let's log out and reload and then log back in alright so social lock will receive your timeline post will to continue and there we go alright so we just had two real aughh in so this is all the text I'm not going to go into getting the videos and photos and all that you guys can look at the documentation and try to figure that out we do have the time we could put for our posts but if you do want the images and videos and all that you'll have to you'll have to add to your to your API calls so let's see right after the message we'll put in a span and then we'll put in feed dot data current iteration and then dot I figure out what it is createdate created time okay reload and now you have the time here and you can format that if you want so I think I think that's going to be it guys that's how we can implement Facebook log in how we can make calls to the graph API there is some pretty good documentation I mean there's a lot but it's pretty informative if you want to take a look at that all the different we're working with the JavaScript SDK so different guides and examples and all that you there's even documentation on how to implement it through angular and react and all that stuff alright so hopefully this gave you a little bit of insight as to how everything works with with the Facebook API and and log in alright so thanks for watching guys if you're not subscribed please do so if you liked this and also leave a like leave a dislike if you didn't and leave some feedback and I will see you next time

Channel: Traversy Media

Views: 196,050

Keywords: facebook login, facebook api, graph api, facebook sdk, javascript sdk, facebook login tutorial

Id: gXux8b3wcYw

Length: 41min 8sec (2468 seconds)

Published: Wed May 10 2017