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
For more infomation >> Electrician Beacon Hill Morelite Electrical Services - Duration: 0:32. 
For more infomation >> The Rittenhouse Hotel in Philadelphia, USA (North America). The best of The Rittenhouse Hotel - Duration: 5:02. 
For more infomation >> Hotel & Resort Capo La Gala in Vico Equense, Italy (Europe). Visit Hotel & Resort Capo La Gala - Duration: 5:02. 
For more infomation >> What To Do With Your First $1,000 In Savings - Duration: 0:20. 
Không có nhận xét nào:
Đăng nhận xét