0:00
hello everyone welcome back to the
0:02
programming Fields I'm Umesh Rana in our
0:04
last video we implemented the social
0:07
login in larl 11 in which we added the
0:10
login with Google functionality we did
0:12
the project setup along with the larl
0:15
socialite package integration now in the
0:17
today's video we are going to implement
0:19
the Facebook login in our larl
0:21
application using larel socialite
0:23
package so by the end of this video you
0:26
will have a fully functioning app having
0:28
the Facebook login for your app
0:30
application so let's get started to the
0:32
Practical part quickly firstly we will
0:34
start with this login page customization
0:37
so we will have to add one more login
0:39
button and that will be login with
0:41
Facebook so let's come to the code
0:43
editor inside the resources views we
0:47
have the Au and we have the login blade
0:50
for the front end views we are using
0:53
laral Bridge package all right so
0:55
previously I added this login with
0:58
Google button here this is basically a
1:00
hyperlink now we will have to add one
1:02
more hyperlink for Facebook login so
1:05
what I want instead of adding the
1:07
buttons in the same div I will create
1:09
one more div after this div here so I
1:12
will copy this div class flax and I will
1:16
add it here now from here I will cut
1:19
this login with Google button and I will
1:21
add it inside this div okay so this will
1:26
our social login section if I will
1:30
we have the login with Google button
1:32
here now instead of this login with
1:34
Google text here I will add image so I
1:38
already downloaded some images for these
1:40
icons here we have the Facebook Google
1:43
LinkedIn Twitter Etc so I will add image
1:47
here instead of this text I will remove
1:49
this text here and inside this I will
1:52
add image SRC tag and I will fetch it
1:57
asset assets icons this will be our
2:03
Google okay and regarding this
2:06
background we don't need this okay let
2:09
me refresh once we have the large icon
2:12
so I will fix the width for all these
2:14
icons here so I will add one custom
2:19
social link and I will add the style for
2:23
this class so as of now I will add this
2:26
style here just above this guest layout
2:33
all right and inside this social link we
2:36
have the image tag so for all the images
2:39
I will set width as let's suppose 30px
2:43
now let's come to the browser Let me
2:46
refresh yes this is fine now I will add
2:49
one more hyperlink for the Facebook
2:51
login so I will duplicate this
2:54
hyperlink this will be login with
2:57
Facebook I will change this icon to
3:01
assets icons we have the facebook.
3:04
JP okay let me refresh once we have the
3:08
background white here text white this is
3:12
not required adding X this will be three
3:16
okay this is fine and I will remove
3:21
between okay this is fine we have the
3:24
login with Google login with Facebook
3:26
button I will add title attribute for
3:32
title login with Google and this will be
3:37
for login with Facebook let's refresh
3:41
and here we have the login with Google
3:43
and login with Facebook okay I will add
3:47
some space between these buttons so
3:49
better I will add in this
3:51
style social link and I will add
3:56
margin WR 5px okay let's
4:01
refresh we can add it to 10px yeah this
4:05
looks nice now so we have the login with
4:08
Google login with Facebook now we will
4:10
have to implement the Facebook login
4:12
here so firstly we will have to add the
4:14
Facebook redirection by clicking on this
4:16
Facebook button okay so I will come to
4:19
the code editor and here we can see
4:22
previously we were using this route o.
4:25
gooogle and currently we have to
4:27
implement this for Facebook so I don't
4:29
want want to create a separate route for
4:31
the redirection because later we will
4:33
have more login buttons here just like
4:36
we will have GitHub login we will have
4:38
LinkedIn we will have X all right so
4:41
instead of creating separate route for
4:43
this redirection I will create a common
4:46
route and I will just pass one flag here
4:49
okay so what I will do I will create a
4:55
redirection and I will pass this Google
4:58
as a parameter inside that and same
5:01
thing for this I will pass au.
5:03
redirection here I will
5:06
pass okay now I will copy this route
5:10
endpoint I will come to the web.php file
5:13
here we had created this route as o/g
5:17
Google and this was triggering this
5:20
Google login function so here I will
5:22
modify this function as
5:25
/ redirection and I will capture this as
5:30
a variable just like provider okay and
5:34
here I will rename this function from
5:37
Google log to Au provider redirect okay
5:42
I will change this name to Au do
5:46
redirection this is fine now I will copy
5:49
this function name I will come to the
5:53
soite controller here previously we set
5:57
this for Google redirection only now I
6:00
will rename this function to Au provider
6:02
redirect first and here I will capture
6:05
one variable as provider I will add dump
6:10
andai provider let me come to the
6:13
browser first Let me refresh now let me
6:16
try to click on login with Google button
6:19
we are getting provider as Google same
6:22
thing if I will try to click on Facebook
6:24
yes I'm getting that provider name so I
6:27
will pass this provider dynamically here
6:32
driver okay I will add one condition if
6:39
provider then this will be redirected
6:41
inside this socialite okay else I will
6:47
44 now based on this provider name this
6:51
will be redirected on that page here I
6:53
will change this message as given
6:55
provider now if we scroll down we create
6:59
cre this function for authentication so
7:02
I will change this function to social
7:05
authentication inside this we will have
7:07
to pass the provider again all right now
7:10
I will change this function inside
7:11
web.php route now previously we added
7:15
this route name as au. Google callback
7:18
that we will have to change to a common
7:21
route name so that we can use this for
7:23
multiple social login previously we set
7:27
this only for the Google call back now
7:29
in the case if we want to use the same
7:32
route for the Facebook or other login
7:34
then we will have to make it common so
7:37
instead of au. Google callback I will
7:39
set this to au. callback only and here
7:43
in the route endpoint name I will change
7:47
au/ call back and I will capture that
7:51
provider name all right now we will have
7:53
to modify the function name that we
7:55
already added as social authentication
7:58
now we will have to come inside tnb file
8:00
here we added the Google client ID
8:03
client secret and call back redirects so
8:05
previously we were using this route as /
8:09
Google callback okay so instead of this
8:12
/g gooogle callback I will keep this as
8:16
a dynamic something so I will capture
8:18
the provider here and I will add SL call
8:23
back so this route endpoint name will be
8:26
like au/ Google / callback and if we'll
8:31
check it for Facebook this will be /
8:34
facebook/ callback okay now we will come
8:40
file here we added client ID client
8:43
secret and redirects for the Google and
8:47
in the call back redirects we added the
8:49
redirection URL so I will change this
8:52
route as o/g go/ callback okay now we
8:57
will have to create these credit for the
9:00
Facebook as well so I will add
9:03
Facebook client ID and we will have to
9:06
generate this credentials from
9:08
developer. facebook.com so let me Define
9:11
the variable first Cent
9:16
back redirects okay regarding the
9:24
all/ Facebook call back now we will have
9:27
to generate the Facebook client ID and C
9:29
secret in the developer
9:31
facebook.com now let's come to the
9:33
browser let's refresh okay this is fine
9:44
facebook.com here you will have to log
9:46
to the registered Facebook
9:49
account here you have the email and
9:51
password option in order to log to the
9:54
Facebook account so just add your email
9:56
address and password and let's log to
10:01
and after this successful login you will
10:03
have the my apps option in this top
10:05
right corner let's click on this once
10:08
you are landed on this my apps option
10:10
first time you won't have any
10:12
application created by default so you
10:14
will have to create a new app here let's
10:19
app and let's select I don't want to
10:21
connect a business portfolio yet let's
10:24
click on next here you will have to
10:26
choose the authenticate and request data
10:28
from us us with Facebook login let's
10:31
select this radio button if we'll expand
10:34
this so this will be used for
10:36
authenticating the users with the
10:38
Facebook login okay now let's click on
10:41
next here you'll have to provide the
10:43
application name so I will provide the
10:45
application name as programming fils
10:48
you'll have to provide the same email
10:50
address for your Facebook account after
10:53
entering the email address you'll have
10:58
next let's click on next
11:00
here in the last step you have the
11:03
option to finalize this by clicking on
11:12
button yes the app has been created now
11:16
you have the customization option for
11:17
the app here we have the ADD and
11:20
customize use cases so we can customize
11:23
the login button if we'll expand
11:26
this we will have to add the email
11:29
permission here so let's click on
11:33
ADD okay so the email permission is
11:36
added let's click on settings here
11:38
you'll have to provide that call back
11:40
URL okay so firstly you'll have to
11:43
scroll down and at the bottom you will
11:46
have to add the valid o o redirect Uris
11:50
so according to your application URL you
11:52
will have to provide that call back URL
11:54
and we have created the route as
11:57
Facebook call back okay let's copy this
12:00
and you'll have to add it here and in
12:02
the case if this inforce https is
12:06
enabled then by default it won't accept
12:09
the HTTP URL so you will have to add it
12:12
https okay now after adding this valid
12:16
wor redirect uis here you'll have to
12:20
changes okay now let's scroll up and you
12:23
have to check the redirect URI so let's
12:27
paste it here you'll have to add https
12:30
let's click on check URI yes you can see
12:34
this is a valid redirect URI for the
12:36
application this is fine let's click on
12:39
Save changes again this is done now
12:42
you'll have to come in the app settings
12:45
let's click on this and inside this you
12:49
settings inside the basic settings you
12:52
will have the app ID and app secret so
12:55
let's copy this app ID from here and
12:57
let's come to the application
12:59
inside this client ID you'll have to add
13:02
the app ID also you'll have to copy the
13:05
app secret from here let's copy it and
13:08
let's paste it here okay this is done
13:11
and here you'll have to provide the app
13:13
domains so we'll add https Local Host
13:19
8,000 okay let's click on Save
13:23
changes this is fine let's come to the
13:26
dashboard yes you are done now now let's
13:29
come to the code editor again and under
13:32
the config of the services.
13:34
PHP you'll have to create one more array
13:37
for the Facebook driver so let's copy
13:40
and paste it and let's change this to
13:43
Facebook and the key will be same as
13:45
client ID client secret and redirect
13:48
here we'll have to change the en
13:50
variables so we have the FB client
13:55
ID FB client secret and for the
14:00
we have the FB call back redirects okay
14:03
this is fine now let's come to the
14:05
socialite controller again here we'll
14:07
have to add the dump and die dollar
14:10
provider first so that we will check
14:13
given provider name now let's come to
14:15
the browser let's refresh the
14:17
application let's try to click on login
14:21
Facebook yes now this is redirected to
14:25
the Facebook login okay and you'll have
14:28
to confirm your profile profile if you
14:29
are already logged into the Facebook so
14:32
you'll have to select your profile as
14:33
your profile name I will
14:36
select and yes it redirected back to the
14:40
socialite controller and I'm getting
14:42
that driver name because in the URL
14:45
itself we have the / provider SL
14:49
callback so I'm getting that provider
14:51
name here now we will have to pass the
14:53
same provider dynamically so firstly I
14:56
will add if condition if we have the
14:59
provider then only this will allow to
15:02
login inside this driver I will pass the
15:06
dynamic provider here and I will keep
15:09
the entire codes inside this if block
15:13
only okay and in the else block again I
15:21
404 okay now I will scroll up now here I
15:24
will add social user okay I will add
15:31
dump and die social user let's come to
15:36
refresh yes we got the authenticated
15:40
data from the Facebook all right we have
15:43
the Facebook ID we have name email AAR
15:46
and other fields as well so we have
15:48
successfully authenticated with Facebook
15:51
now we will have to check if this user
15:53
exists in our users table then we will
15:57
have to make this authenticated login
15:59
else we will have to insert this user
16:01
record inside the users table so let's
16:06
again here previously we were fetching
16:09
the Google ID in order to check if that
16:12
user already exists in the user table
16:15
now instead of this Google ID we will
16:18
have to create a common field for
16:20
managing all the providers
16:22
authentication okay so I will come to
16:25
the create user table migration under
16:29
we have the migrations create users
16:32
table here previously we had created the
16:35
Google _ ID column and uh now we will
16:39
have to change this as o
16:41
provider okay and I will add one more
16:44
column as o provider id so in the First
16:48
Column I will store o provider name just
16:51
like if it is logged in through Google
16:54
or Facebook and in the second column I
16:57
will store that primary
16:59
that we are getting after the successful
17:01
authentication this one okay so let's
17:04
roll back this migration again so I will
17:06
type PHP artion migrate refresh so this
17:10
will drop all the migrations and this
17:13
will rerun the entire migration let's
17:16
enter yes migrations have been rolled
17:20
back and it executed again now inside
17:23
the users table if we come to the
17:26
database SQ light inside the user table
17:29
we have the Au provider name and Au
17:33
provider id all right now we'll have to
17:38
model and we'll have to add the fillable
17:45
provider and Au provider id okay let's
17:49
close these files now let's come to the
17:51
socialite controller here we will have
17:53
to check the provider id so we'll have
17:56
to pass the column name as
18:00
or provider id okay and that we will
18:05
pass from this social
18:07
user all right else if it is not there
18:11
then I will create that user so this
18:14
will fetch from the social user name
18:17
social user email and here we will have
18:22
o provider id and this will fetch from
18:26
the social user ID and all also we will
18:29
have to pass the Au provider that will
18:32
store the provider name as Google or
18:35
Facebook based on the social login type
18:38
just like if we clicked Google login or
18:40
if we clicked Facebook so I will add
18:45
here okay this is done and by default we
18:48
will create the random password as
18:51
password at theate 1 2 3 4 and here
18:54
regarding this return redirect I will
18:57
keep it common because anyhow after
19:00
login or after registering this will be
19:03
redirected to the dashboard page only so
19:05
we can keep it common okay now regarding
19:08
the password I received a comment from
19:11
one of our subscriber so his concern was
19:14
how the newly created user will know the
19:17
password Here we can achieve that in
19:19
different ways either after registering
19:21
the user we can send an email with that
19:25
password to that registered email
19:27
address so that the new newly created
19:29
user will know the password or after the
19:31
successful login we can add a page in
19:35
the dashboard page that will prompt to
19:37
change the password immediately after
19:39
the successful login okay so I'm not
19:41
going to implement that functionality as
19:43
of now that we will cover sometimes in
19:46
different project okay this is fine now
19:49
let's come to the browser Let me refresh
19:52
let me try to click on login with
19:54
Facebook yes this said you previously
19:57
logged in programming Fields with
19:59
Facebook this is basically our
20:01
application name now I will continue to
20:04
this login so I will click
20:07
continue and here this redirected back
20:10
to the dashboard page okay here we have
20:13
the profile and if we'll click on the
20:16
profile settings we have the username
20:18
and that registered email address now I
20:23
application I will try to login again
20:27
Facebook we have to continue with the
20:31
again Yes again we have logged in and we
20:34
have redirected on the dashboard page
20:36
now if I will log out and if we try to
20:39
login through the password again so I
20:42
have the registered user and password as
20:47
234 yes I have successfully logged in
20:49
through the password as well okay this
20:52
is fine if I will log out and that's all
20:55
we have successfully set up the social
20:57
login and we have implemented the login
21:00
with Facebook in our Lille application
21:02
using socialite package if you found
21:04
this video helpful be sure to give it a
21:07
thumbs up and share it with your friends
21:09
and if you have any questions or
21:11
suggestions for the future videos don't
21:13
forget to drop that in the comment
21:15
section below and if you have not
21:17
subscribed to programming fields at
21:19
please do subscribe because that gives a
21:22
motivation to bring contents for you in
21:24
the next video we will continue with the
21:26
social authentication and we will
21:28
implement the other social login here
21:31
all right and after this demo I will
21:34
reset the credentials from here so
21:37
please don't try to use the credentials
21:38
again all right and if you need the
21:41
source code of this project you can
21:44
check out my GitHub profile I already
21:46
created the repository so you can access
21:48
that I will provide that repository Link
21:51
in the description so thanks for
21:54
watching see you soon in the next video
21:56
Until Then happy coding
