Facebook Login With PHP SDK v5 & Graph API Tutorial

in this tutorial you will learn how to add facebook login functionality to your login page so stay with me hey what's up guys Senaid here from codingpassiveincome.com the place where I help others to become a web developer much easier and faster than they will do it on they own so if that is something that interests you consider subscribing so before you start within the code I want to explain at the basics that you need to understand for this tutorial so let's say that already you have one login page and here you have one email one password I want a login button and here you have some page that you want to be hidden let's say index.PHP and you want that this page is only visible to the people who are logged in so what we are going to do first we will add organize Facebook button and when someone click on this button they will redirect that person to the Facebook so let's say this is Facebook and now on the Facebook the visitor will have to accept the permissions for our application and once he accept or even cancel the permissions we will redirect people from the Facebook to our one page this one let's say Facebook callback page and now on this page we are going to check everything that happened on this on the Facebook and if the person has allowed us to get all the information that we need from his profile we will redirect him to this secret page and if there is any error on this page and if the person didn't allow us permissions we are going to redirect him back to the login page so now this may seem a little bit complicated for you but actually the code is really simple and all you need to do is that we need to add one login additional button redirect to the Facebook and this fire builders process for the date so let me now show you how to write the code so now I am at my PHP store I have created a new project and also 4 empty files log and Facebook all that config and index.PHP and also one folder images and inside that folder I just have my logo.PNG nothing special so first thing that we need to do is to download facebook github library you can get it from the github comm /type /page P dash graph - has the car and just hit clone or download and hit download zip for those of you that are looking down on source code you can find in the description of the world and all those libraries will be just include there so just extract everything from here delete this archive and from this folder I'm going just to get facebook folder and move it here and it will delete this one so this is all that we need so let's first create the basic login layout so let's say five title will be and and I'm going to include the bootstrap so I'll go to the getbootstrap.com it down load the value is the latest 4.0 version and I will copy this does before my closing head tag that's it so now I will create one container I will say style I will set magicked up to the hundred pixels inside this container we will have just one row and let's say I will justify content to the center okay and I'm going to create one column MD let's say six and the offset tree so that from the both side we have three and let's say aligned to the center and inside here I will just include my logo okay too many wines and here you know just have one for I'm not going to specify anything here like method or action because we are not going to create that go - clear sign in with Facebook and he will say this is some email placeholder and of course we need some class from the bootstrap so let's say like this all right and also down the room we are going to have some submit button I'll say value is login and closed let's see button primary and another one have to Facebook and the type of this one will be just a button so let's just check our basic design so as you can see everything is in the center and it is looking really nice so if we try to press those button nothing will happen Loganville does submit information but we'll give it to you not so the next thing that we need to do is to create to get a login URL from the Facebook so I will just go to my config.PHP and I'll write some code here so first we need to include the Facebook autoload.php file so I'll say he required once Facebook Auto dot PHP and now we need to create a new instance of say Facebook Facebook and here as you can see it says we need to specify the array and now if I go to the Facebook class you can see in the constructor that we need to send application ID and application secret and default graph version and you are going to do does that so I will pass it as an array and they'll say he application ID is this we don't have one at the moment application secret is this one and finally the default girl wearing this I lose 2.10 so this is just the basic information that we will need so let's now go to our applications it's on the developers.facebook.com forward slash abs and then we can go to create a new app so let's say login tutorial I will hit create application ID we have some capture here and here we go so now we need to go to the settings and here we have application ID I will just copy right here and we also have application secret so let's click OK I will copy that - and for the application domains I will just say welcome host and down here we need to add platform so same website and here I will just specify that URL so I'll say like this and hit a save changes so and with this we should be good should have all the basics information so now we need to get helper I will say get the clothing helper and basically this is from the Facebook and it's going to help us with everything that we need around log like logon URL like access token etc etc so this is all the pool that we need inside config.PHP and we are going to include it in every file where we are going to need Facebook so now on the login at the top I will just say PHP and I have forgot here see session start it's quiet for that Facebook and here I will require config and I'm going to see my redirect URL will be to form the folder where I am at the moment which is localhost Facebook login and the file where people will be read directly from the Facebook will be Fbcallback.php and permissions that you are going to need let me quickly explain you what are the permissions so if we go here this is rough API Explorer and if we try to submit we wanted to get ID in the name as you can see here it stays an active access token must be used to query information about the current user which means that first we need to get access token and based on that access token depends what we can get from the Facebook so if we go here to the get token and go to get user access token we can see here the list of holder of all the permissions that exists on the Facebook so if we do not include any of those it means that we will get the public profile which include us ID and the name but if we want to get let's say before we try that out us click here hit submit again and as you can see this ID is this and the name is this and now if I try to get an email hit enter as you can see the email is not included and here it says the file email is only accessible etc etc and we can include by going to the get get you ready stokin include this permission hit get access token we will need to approve again that we will give to the graph API Explorer our email and if we try now you can see that an email has been included so those are the permissions that we will always need to specify and since the public profile so already cool I will just see here that we need email too and last thing is to get login URL so it was helper get log in URL already wrecked URL we have define and permissions are defined - and now if I just echo login URL let's see what we will get so I have problem with permissions since my server is protected so let me just quickly do this okay let's try now so yeah so here is the URL that is generated by Facebook and we need to redirect user to this URL as you can see here is redirect URL and also our school is only email this is the permission that we are looking for so I will just now remove this line and on the button login it Facebook I will set and click method and says that window dot location this is just from JavaScript and I'm just going to redirect person to this URL and that's it so let's try again so if I click now on the login to Facebook you can see that I have redirected and that my application login tutorial is asking for the public profile and also an email address so I'll say continue and as you can see I have been redirected to the Facebook callback dot PHP which is our file that we have specified in redirect URL but at the moment it's an empty so let's write it here so I will say we need again our config dot PHP and let's now try to get an access token the same one that we have get here so we will say access token equal I'll use helper again to get access token and many times you will get different errors in the time of the development so that's why I'm using try-catch and in the catch first one that I'm going to catch his response exception which is something that is returned by the graph API and the last exception of those Facebook SDK exception and let's say I will say here echo response exception and let's just get message and exit and I will do the same here just I will say as the character so does that you can track what is wrong and now we need to check do we have access tokens so if not access token it will just redirect person to the login.php and I will say here exit and now if we are here on this line it means that we are successfully logged in with the Facebook and all we need to do is to get long lived access token maybe we will need access token for the other parts of your dashboard so this is short-lived which probably exists for up to an hour and in order to get a long level we need to use Auth2client so just define you variable and say get climb and here I will check if not access token islonglived we will get only with width or out get one little access token and we need to specify the short one like this okay you can also include try and catch here but probably it's not important to use it it's not going to be too often that you will get an error here and now once we have a long way with access token all we need to do is just to do the same that we did here so we need just to get all those informations that we are looking for so I'll say here let's say response vehicle Facebook get and here I'll just write what you need we can just copy this just exactly the same ID let's say we will have first name you don't have last name email I will have picture and another parameter is access token so like you just do like this okay and let's get user data we can get it from the graph node and I'll get it as an array so let's now just print to the screen this array and see what we have inside this here so now we need to login again and here we go maybe I should do this to make it a bit nicer and now here we go as you can see now we have got an ID we have a first name last name email and as you can see picture is an array again and there is an URL for this picture and if we try to open this picture you can see that this is very small 50 by 50 pixels and in order to get a bigger one we need to specify hit picture doctype large and that's it so now once we know that we have all the data let's say I will store this data into the session so see user data equal user data and I will say say access token to the session okay and I'm going to save us on string okay and I will just redirect person to our heat and index dot PHP file that is available only for them those are our loganing so now once you have this data you can do whatever you want with that data maybe want to save it to the your database maybe you want to show another page with personal choose his own password whatever you want but this is how you login with Facebook so now I'm going to design this index dot PHP file and just display the informations that we have got from the Facebook so here we need again some basic design let's see here use a profile we need again bootstrap okay and we need against some basic design that's all just copy all of this paste here and I will just say here column D let's say eight offset I will just delete all of this and here I'm going to create maybe even better it will be if we have one mine don't need this okay like this so we are going to have two combs - three another one is nine in the first one I will just show the image from the person and in another one I'm going to have a table so let's see well see table I want it over and I want to be bordered okay they will have one table body and I'm going to have an ID first name last name email and that's it first name last name and an email and let's see for each of those the specify another column like this okay and each of those will just say by this echo session user data and after that they will specify here what we want so for the ID we will get an ID for the first name we will get the first name last name and email awesome and of course for the picture here we will say user data picture and if you remember we also had a new era for this image okay and of course at the top we will need to start a session okay so let's make a test fresh organic Facebook and it's resurrected me to the index dot PHP and as you can see now here we have my image and also this is some nice table with the basic informations from my facebook profile test ID first name last name email etc so guys pretty much that's it we can also maybe include just to say maybe on the login we can here just check if isset session now let's see access token we will just redirect a person to them index.PHP exit and we will do the same on the index but we will check check if not isset we will redirect to the login.PHP which we are all trying to do to protect and that's it so now our login and everything is working just fine so guys I hope that this is very simple and useful tutorial for you I think this is very useful in most websites so just do it step by step and I'm sure that you will be successful with it and also if you have any questions please ask in the comments below and if you liked it please like it and share with your friends take care

Channel: Coding Passive Income

Views: 70,663

Keywords: facebook login, facebook php sdk, facebook api login, facebook login tutorial, login with facebook, facebook login api, php, bootstrap design, bootstrap, tutorial, tutorials, howto, facebook graph api, facebook graph api tutorial, facebook sdk v5, senaid bacinovic, beginners, php tutorial, learn php, php tutorials

Id: 1DgzTWr3F2I

Length: 26min 38sec (1598 seconds)

Published: Mon Aug 28 2017