1
00:00:00,000 --> 00:00:04,557
[MUSIC]

2
00:00:04,557 --> 00:00:10,906
Now that we have understood about OAuth
2 and how Facebook supports OAuth 2,

3
00:00:10,906 --> 00:00:16,870
let's move onto this exercise where
we will configure our express server

4
00:00:16,870 --> 00:00:23,460
application to make use of Facebook as
the OAuth 2 provider for our server.

5
00:00:23,460 --> 00:00:26,820
And at the same time for
our client application.

6
00:00:26,820 --> 00:00:30,500
In this exercise we're going to
be relying on the passport that

7
00:00:30,500 --> 00:00:34,730
we have already configured
in our express application.

8
00:00:34,730 --> 00:00:39,890
We will configure a new strategy for
authenticating with Facebook

9
00:00:39,890 --> 00:00:43,600
using that passport
Facebook token node module.

10
00:00:45,680 --> 00:00:51,629
To get started on this exercise,

11
00:00:51,629 --> 00:01:01,590
go to https//developers.facebook.com/apps.

12
00:01:01,590 --> 00:01:07,640
Now, this is where you will register
the client application, which is basically

13
00:01:07,640 --> 00:01:13,280
your server, the extra server, acting
as the client application for Facebook.

14
00:01:13,280 --> 00:01:16,380
And then we will register
a client application there.

15
00:01:16,380 --> 00:01:21,250
And then get hold of an app ID and
an app secret from Facebook.

16
00:01:21,250 --> 00:01:24,950
Now obviously it goes without saying
that you need to have a Facebook account

17
00:01:24,950 --> 00:01:27,160
in order to be able to configure this.

18
00:01:27,160 --> 00:01:32,520
If you don't have a Facebook account and
you do not wish to do this exercise,

19
00:01:32,520 --> 00:01:36,220
then there is no harm in
not doing this exercise.

20
00:01:36,220 --> 00:01:39,110
But of course for
doing this OAuth 2 exercise,

21
00:01:39,110 --> 00:01:45,210
you need a Facebook account to configure
your OAuth provider on Facebook.

22
00:01:45,210 --> 00:01:47,390
So going to this site,

23
00:01:47,390 --> 00:01:52,510
developers.Facebook.com/apps, you
will notice that you will need

24
00:01:52,510 --> 00:01:57,970
to login in order to continue if you
are not logged in from your browser.

25
00:01:57,970 --> 00:02:01,790
Now you can see that I have already
configured a few apps here and

26
00:02:01,790 --> 00:02:03,170
tested them out.

27
00:02:03,170 --> 00:02:07,990
Now, to create a new app
click on the Add New App.

28
00:02:07,990 --> 00:02:13,140
And then you can provide the name for
your app.

29
00:02:13,140 --> 00:02:20,990
So I can say Confusion3, and
then we can provide the contact email.

30
00:02:20,990 --> 00:02:26,336
And then follow the procedure
to create your new app here.

31
00:02:36,108 --> 00:02:40,925
And once the app is created,
you will immediately notice that

32
00:02:40,925 --> 00:02:45,290
there is an app ID that has
been created for your app.

33
00:02:45,290 --> 00:02:47,180
And then for this particular app.

34
00:02:47,180 --> 00:02:50,680
So if you're going to the dashboard,
you will see

35
00:02:51,840 --> 00:02:56,640
two pieces of information that you really
require in order to proceed further.

36
00:02:56,640 --> 00:03:01,850
One is the App ID, so make sure
that you make a copy of the App ID.

37
00:03:01,850 --> 00:03:03,810
And the second one is the app secret.

38
00:03:03,810 --> 00:03:10,320
So, you can type on the show button
here and then you'll get the app secret.

39
00:03:10,320 --> 00:03:14,350
Secret here so as you can see these
two are nothing but ASCII strings.

40
00:03:14,350 --> 00:03:18,980
So make a copy of this because you need
to configure your expert server and

41
00:03:18,980 --> 00:03:23,200
also your client application with
these two pieces of information.

42
00:03:23,200 --> 00:03:25,870
And once you get hold of that then

43
00:03:25,870 --> 00:03:29,105
we can proceed ahead with
the rest of the exercise.

44
00:03:29,105 --> 00:03:33,500
You'll need to go to your
dashboard of your application.

45
00:03:33,500 --> 00:03:38,890
And in the settings, as you can see,
in the basic settings here

46
00:03:38,890 --> 00:03:43,310
you just add a website platform here.

47
00:03:43,310 --> 00:03:52,650
And then supply the URL
as https//localhost3443.

48
00:03:52,650 --> 00:03:58,168
And save the changes here
to your application here.

49
00:03:58,168 --> 00:04:03,910
After adding in the website here
go to the advanced settings.

50
00:04:03,910 --> 00:04:09,000
And then click on Yes to say native or

51
00:04:09,000 --> 00:04:14,400
desktop app here and say yes to that and
then save the changes.

52
00:04:15,590 --> 00:04:20,461
And in the basic setting
in the app domains, type in

53
00:04:20,461 --> 00:04:28,339
https://localhost:3443 and
save the changes.

54
00:04:29,640 --> 00:04:33,520
Next, go to the exercise instructions for
this exercise.

55
00:04:33,520 --> 00:04:36,580
And you would see that there
is an index.html file that

56
00:04:36,580 --> 00:04:39,540
I have provided in the exercise resources.

57
00:04:39,540 --> 00:04:47,270
Download this index.html file, and
then move it into your public folder.

58
00:04:47,270 --> 00:04:49,941
So let's download this index.html file.

59
00:04:57,932 --> 00:05:05,548
Next, going to the conFusionServer
folder in the public folder,

60
00:05:05,548 --> 00:05:11,125
you see that I already
have an index.html file.

61
00:05:11,125 --> 00:05:16,039
I'm going to replace this with
the downloaded index.html file

62
00:05:16,039 --> 00:05:17,774
that I just obtained.

63
00:05:17,774 --> 00:05:20,502
I have saved this on my desktop.

64
00:05:20,502 --> 00:05:23,173
So I'm just going to
pull this index.html and

65
00:05:23,173 --> 00:05:27,771
then replace the index.html file in
the public folder of my conFusionServer.

66
00:05:27,771 --> 00:05:31,227
Next, going to the editor,
let's open the index.html file.

67
00:05:31,227 --> 00:05:34,584
And if you open it you will see that I
have already configured some JavaScript

68
00:05:34,584 --> 00:05:35,112
code here.

69
00:05:35,112 --> 00:05:39,850
This JavaScript code I got hold
of from Facebook where they

70
00:05:39,850 --> 00:05:44,790
specify how you can configure
a Dev application using this.

71
00:05:44,790 --> 00:05:51,030
So, I have copied this from
the Facebook instructions.

72
00:05:51,030 --> 00:05:55,470
In particular you will notice
that in this index.html file,

73
00:05:55,470 --> 00:05:58,735
there is this appId field here.

74
00:05:58,735 --> 00:06:04,400
You're going to be replacing
this appId field with the client

75
00:06:04,400 --> 00:06:09,060
Id that you obtained by
registering your app on Facebook.

76
00:06:09,060 --> 00:06:13,130
So, here, I am replacing this client's Id

77
00:06:13,130 --> 00:06:18,430
with the Id of my app that I have
registered on Facebook here.

78
00:06:18,430 --> 00:06:22,957
And you need to do
the same step with the app

79
00:06:22,957 --> 00:06:27,750
that you register on Facebook, with
the app ID that you get from Facebook.

80
00:06:27,750 --> 00:06:30,812
And then save the changes to index.html.

81
00:06:30,812 --> 00:06:36,980
This index.html page that
I have here will create

82
00:06:36,980 --> 00:06:42,290
a login button on the index.html page,
which when clicked will

83
00:06:42,290 --> 00:06:47,580
Help us to login to Facebook and
then obtain an access token from Facebook.

84
00:06:48,660 --> 00:06:51,260
Next, going to the conFusionServer folder,

85
00:06:51,260 --> 00:06:55,280
we will install the passport
Facebook token node module.

86
00:06:55,280 --> 00:06:58,494
So at the prompt type npm install

87
00:07:00,200 --> 00:07:05,003
Passport-facebook-token and

88
00:07:05,003 --> 00:07:09,730
install this node module.

89
00:07:09,730 --> 00:07:17,000
And as you can see I am using
the 3.3.0 version in this course.

90
00:07:17,000 --> 00:07:20,446
Going back to the editor, open config.js.

91
00:07:20,446 --> 00:07:25,162
And in config.js I'm going to add in

92
00:07:25,162 --> 00:07:34,440
a Property called 'facebook'
into my config.js file.

93
00:07:34,440 --> 00:07:39,221
And inside here, I will

94
00:07:39,221 --> 00:07:44,481
configure my clientId and

95
00:07:44,481 --> 00:07:48,560
the clientSecret.

96
00:07:48,560 --> 00:07:54,150
Now, the clientId will be exactly
what you obtain from Facebook.

97
00:07:54,150 --> 00:08:00,304
Here, and the client's secret as you saw
when you registered your application.

98
00:08:02,198 --> 00:08:05,221
You get a second string there so
copy that string and

99
00:08:05,221 --> 00:08:07,764
then paste it into the ClientSecret here.

100
00:08:07,764 --> 00:08:13,790
Now make sure that this is
pasted as a string here.

101
00:08:13,790 --> 00:08:19,090
Similarly, pasting in the ClientSecret
into my config.js file.

102
00:08:19,090 --> 00:08:26,360
So, configuring this here will help me to
use these two where I need in my code.

103
00:08:26,360 --> 00:08:29,790
Next, as we realized, whenever the user

104
00:08:32,390 --> 00:08:37,770
logs in and then obtains the access token
and passes it on to our express server.

105
00:08:37,770 --> 00:08:41,160
The express server is going to
use that access token and go and

106
00:08:41,160 --> 00:08:47,840
fetch the file information from
the Facebook 0 ought server.

107
00:08:47,840 --> 00:08:52,380
And then, once it attains the profile
information, then our express server will

108
00:08:52,380 --> 00:08:57,980
create a new user account
into our application.

109
00:08:57,980 --> 00:09:01,750
And use the Facebook ID as
the index into this use account.

110
00:09:01,750 --> 00:09:03,630
So to accommodate this,

111
00:09:03,630 --> 00:09:08,467
we will go into the user.js file
where we have define our model.

112
00:09:08,467 --> 00:09:12,854
So in addition to the first name and
the last name,

113
00:09:12,854 --> 00:09:17,241
I will also add in a field
here called facebookId,

114
00:09:17,241 --> 00:09:20,510
which is of the type String here.

115
00:09:20,510 --> 00:09:24,548
The facebookId will
store the facebookId of

116
00:09:24,548 --> 00:09:28,700
the user that has passed
in the access token.

117
00:09:29,760 --> 00:09:34,002
In the next step I will show
you how to configure this.

118
00:09:34,002 --> 00:09:40,260
Then we configure our Facebook strategy
using the passport Facebook token..

119
00:09:40,260 --> 00:09:43,640
When a user passes in the access token,

120
00:09:43,640 --> 00:09:47,230
then you're going to be fetching the
profile and then setting up an account for

121
00:09:47,230 --> 00:09:52,160
that user in our local server here,
in our express server here.

122
00:09:52,160 --> 00:09:56,410
We will be initializing the first name and
the last name and the facebookId.

123
00:09:56,410 --> 00:10:01,760
But of course this particular
account will not have a password or

124
00:10:01,760 --> 00:10:04,140
rather the hash installed
associated with this.

125
00:10:04,140 --> 00:10:09,150
Because, if a user makes login using this
account then they will have to use their

126
00:10:09,150 --> 00:10:14,400
Facebook login part in order
to login to our application.

127
00:10:14,400 --> 00:10:18,330
Next we will go to
authenticate dark.js file.

128
00:10:18,330 --> 00:10:23,138
So this where we have been setting
up all our different passport

129
00:10:23,138 --> 00:10:25,507
authentication strategies.

130
00:10:25,507 --> 00:10:30,880
So here in addition to
the jwt strategy and

131
00:10:30,880 --> 00:10:37,175
the local strategy that
I have configured here,

132
00:10:37,175 --> 00:10:43,176
let me create
a FacebookTokenStrategy here.

133
00:10:43,176 --> 00:10:49,965
And then set the require
password-facebook-token.

134
00:10:52,494 --> 00:10:56,561
And this will give us
a new strategy that we can

135
00:10:56,561 --> 00:11:00,530
configure in our passport module here.

136
00:11:00,530 --> 00:11:04,573
So, going down into the code here,
right there,

137
00:11:04,573 --> 00:11:07,761
at the end of this file, I will create,

138
00:11:12,878 --> 00:11:17,055
facebookPassport as

139
00:11:17,055 --> 00:11:21,697
passsport.use().

140
00:11:21,697 --> 00:11:28,380
And so this is where I would specify
new FacebookTokenStrategy here.

141
00:11:29,610 --> 00:11:33,730
And then we will specify
the details of this

142
00:11:33,730 --> 00:11:38,886
FacebookTokenStrategy, right
at this point here.

143
00:11:38,886 --> 00:11:45,280
So, in this FacebookTokenStrategy,
how do we approach this problem?

144
00:11:45,280 --> 00:11:51,910
Let me just wrap around the word wrap so
that you can see the complete code.

145
00:11:51,910 --> 00:11:59,300
So for the FacebookTokenStrategy,
we will start up by saying first.

146
00:11:59,300 --> 00:12:04,794
The first part of the
FacebookTokenStrategy takes the clientId.

147
00:12:08,542 --> 00:12:17,406
Which we have config at
config.facebook.clientId here,

148
00:12:17,406 --> 00:12:22,302
and client, Secret,

149
00:12:22,302 --> 00:12:30,340
which also we have configured in,
Our config file here.

150
00:12:30,340 --> 00:12:38,235
So we're going to be supplying this as
the first parameter to this strategy here.

151
00:12:38,235 --> 00:12:43,985
And then the second parameter,
is where the defying

152
00:12:43,985 --> 00:12:48,145
the callback function that
comes in at this point.

153
00:12:48,145 --> 00:12:53,015
So the callback function
here gets three values.

154
00:12:53,015 --> 00:12:57,100
So it gets accessToken,

155
00:12:59,672 --> 00:13:04,584
refreshToken, profile, and

156
00:13:04,584 --> 00:13:07,760
callback called as done here.

157
00:13:07,760 --> 00:13:12,047
So these are the four parameters that come
into the callback function that we will

158
00:13:12,047 --> 00:13:13,447
configure at this point.

159
00:13:13,447 --> 00:13:18,660
So let me indent that code in so
that it's a bit more clearer to see.

160
00:13:18,660 --> 00:13:25,592
And inside this callback
function that I configure here,

161
00:13:25,592 --> 00:13:30,150
I'm going to first say User.findOne.

162
00:13:30,150 --> 00:13:35,430
So we'll try to see if this
particular Facebook user

163
00:13:35,430 --> 00:13:40,470
has logged in earlier so
the account would already

164
00:13:40,470 --> 00:13:46,381
be configured, With the facebookId.

165
00:13:46,381 --> 00:13:49,051
Now where do we obtain the facebookId?

166
00:13:49,051 --> 00:13:55,160
Notice that we're getting that profile for
the user,

167
00:13:55,160 --> 00:13:59,630
coming in here, so you can see that this
profile is coming in as a parameter.

168
00:13:59,630 --> 00:14:04,208
This profile will carry a lot of
information coming from Facebook that we

169
00:14:04,208 --> 00:14:06,319
can use within our application.

170
00:14:06,319 --> 00:14:13,326
The accessToken, of course,
is supplied to the server by the user.

171
00:14:13,326 --> 00:14:20,870
So, once we try and find at least
one user with a Facebook profile id.

172
00:14:20,870 --> 00:14:26,200
So if this user exists then we have
already found that the user has previously

173
00:14:26,200 --> 00:14:30,550
logged into our account
using the Facebook approach.

174
00:14:30,550 --> 00:14:37,078
So, in this case we can proceed forward
otherwise we will create a new user.

175
00:14:37,078 --> 00:14:42,416
So, the callback function here
there will have two parameters,

176
00:14:42,416 --> 00:14:44,557
the err and the user here.

177
00:14:49,621 --> 00:14:55,298
And this callback function as we will see,

178
00:14:55,298 --> 00:15:01,800
well inside here we will
check to see if (err).

179
00:15:01,800 --> 00:15:07,072
So if this causes an error, then of course

180
00:15:07,072 --> 00:15:13,408
what we need to do is return done(err,
false).

181
00:15:15,694 --> 00:15:20,663
So this done as you can see is
the callback function that is coming in as

182
00:15:20,663 --> 00:15:23,577
the parameter to this function here, so

183
00:15:23,577 --> 00:15:26,770
we'll call the done with the err and
false.

184
00:15:26,770 --> 00:15:31,830
If it is not an error then

185
00:15:31,830 --> 00:15:36,384
we'll say if (!err

186
00:15:36,384 --> 00:15:41,950
&& user !== null).

187
00:15:43,170 --> 00:15:47,880
So if the user is not null, so that means
that we have found a user in the system

188
00:15:47,880 --> 00:15:52,610
that has not been earlier with that
particular facebookId, So for the user,

189
00:15:52,610 --> 00:15:59,750
all that we need to do is
return done(null, ) since

190
00:15:59,750 --> 00:16:05,100
there is no error here, and then we'll
return the user value for this down here.

191
00:16:05,100 --> 00:16:08,560
So which means that if the user has
already logged in earlier using

192
00:16:08,560 --> 00:16:13,350
the Facebook approach, then the user
would have already been created.

193
00:16:13,350 --> 00:16:17,730
And so, that user will be found and
then we just pass back that user.

194
00:16:17,730 --> 00:16:25,010
If not, see the if not part is the more
interesting part of this exercise.

195
00:16:25,010 --> 00:16:30,290
If the user doesn't exist,
then we need to create a new user.

196
00:16:30,290 --> 00:16:33,959
Now to create the new user,
we will say user,

197
00:16:38,653 --> 00:16:42,181
= new User, and when we create a new user,

198
00:16:42,181 --> 00:16:45,832
recall that we need to
pass in the username.

199
00:16:45,832 --> 00:16:50,970
The username would be obtained from
the profile, and the Facebook profile that

200
00:16:50,970 --> 00:16:57,200
has returned will have a field
called as a displayName.

201
00:16:57,200 --> 00:17:02,050
And so that is the field that I'm going
to use to create a new user here.

202
00:17:02,050 --> 00:17:07,176
So we will create a new
user with the username set

203
00:17:07,176 --> 00:17:13,455
equal to the displayName, and
after the user is created,

204
00:17:13,455 --> 00:17:21,874
then we will say user.facebookId,
= profile.id.

205
00:17:21,874 --> 00:17:24,654
So we're going to be saving
the Facebook ID of the user.

206
00:17:24,654 --> 00:17:28,902
So return in this profile object here, and

207
00:17:28,902 --> 00:17:33,979
then put the user's
Facebook ID to the profile ID.

208
00:17:33,979 --> 00:17:38,204
So that subsequently,
if the same user logs in,

209
00:17:38,204 --> 00:17:43,265
this search will be able to
find this user in our database.

210
00:17:43,265 --> 00:17:46,450
And then we will

211
00:17:46,450 --> 00:17:50,863
say user.firstname

212
00:17:50,863 --> 00:17:57,242
= profile.name.givenName

213
00:17:58,857 --> 00:18:02,447
So the profile has this name object on it,

214
00:18:02,447 --> 00:18:07,970
which has a given name and
a family name associated with this.

215
00:18:07,970 --> 00:18:10,994
This is returned from
the user's Facebook profile.

216
00:18:10,994 --> 00:18:16,165
And also the user.lastname we will set

217
00:18:16,165 --> 00:18:21,026
it to profile.name.familyName.

218
00:18:22,762 --> 00:18:28,232
And then, once we have set up all
of these we will say user.save.

219
00:18:28,232 --> 00:18:31,310
So we're saving the changes
to the user and

220
00:18:31,310 --> 00:18:35,270
then this will return err and the user.

221
00:18:35,270 --> 00:18:39,090
So, it will return an error if
the user could not be created,

222
00:18:39,090 --> 00:18:42,960
otherwise it will return
the created user here.

223
00:18:42,960 --> 00:18:47,240
So in this case we'll say, if (err),

224
00:18:47,240 --> 00:18:51,745
then will return done (err,

225
00:18:51,745 --> 00:18:58,627
false) because we didn't
manage to create the user.

226
00:18:58,627 --> 00:19:03,824
else, the user was successfully created,

227
00:19:03,824 --> 00:19:08,615
so we'll return done(null, user).

228
00:19:08,615 --> 00:19:11,265
So no matter what the case is,

229
00:19:11,265 --> 00:19:15,965
if the user exists then you will
find that user and return the value.

230
00:19:15,965 --> 00:19:19,824
If the user doesn't exist you're going to
be creating a new user based upon

231
00:19:19,824 --> 00:19:22,431
the user's Facebook
profile that we obtained.

232
00:19:22,431 --> 00:19:28,772
And then add in the new user into
our server site, into the database.

233
00:19:28,772 --> 00:19:32,642
So this is the strategy
that we configure for

234
00:19:32,642 --> 00:19:37,532
our passport,
the new FacebookTokenStrategy.

235
00:19:37,532 --> 00:19:40,552
So this will enable us to find the user.

236
00:19:40,552 --> 00:19:45,571
So now that we have configured
our application to either

237
00:19:45,571 --> 00:19:50,499
create a user or
find the user based on the Facebook ID.

238
00:19:50,499 --> 00:19:55,752
The last step is of course to introduce

239
00:19:55,752 --> 00:20:00,851
a new route into the users.js file.

240
00:20:00,851 --> 00:20:05,284
So in the users.js file you'll recall
that we had the sign up route which

241
00:20:05,284 --> 00:20:09,950
allows the user to sign up for local
account with the user name and password.

242
00:20:09,950 --> 00:20:15,137
And then you have the login which allows
the user to log in using the username and

243
00:20:15,137 --> 00:20:15,730
password.

244
00:20:15,730 --> 00:20:19,455
But now, we're going to be using
Facebook for logging in the user.

245
00:20:19,455 --> 00:20:25,601
So in this case we will say, router.get,

246
00:20:25,601 --> 00:20:32,208
and the endpoint will be /facebook/token.

247
00:20:32,208 --> 00:20:37,260
So if the user sends a get
request to users/facebook/token,

248
00:20:37,260 --> 00:20:41,550
then we're going to be
authenticating the user using

249
00:20:41,550 --> 00:20:45,585
the Facebook OAuth 2 based authentication.

250
00:20:45,585 --> 00:20:50,470
So here,
we will say passport.authenticate, and

251
00:20:50,470 --> 00:20:57,555
we're going to be authenticating
using the facebook-token strategy.

252
00:20:57,555 --> 00:21:04,076
Recall that we had already configured
this in our authenticate.js file,

253
00:21:04,076 --> 00:21:10,908
so we'll configure the passport
authenticate facebook-token strategy and

254
00:21:10,908 --> 00:21:15,786
then that callback function
which gets req, res here.

255
00:21:23,390 --> 00:21:30,081
So let me, Toggle the word wrap here,

256
00:21:30,081 --> 00:21:36,356
so you can see that this is
the router.get on this endpoint here.

257
00:21:36,356 --> 00:21:44,890
And then in here,
I will configure this application.

258
00:21:44,890 --> 00:21:51,768
So, at this point, we would say, if
(req.user), now notice that when we call

259
00:21:51,768 --> 00:21:57,168
passport.authenticate with
the facebook-token strategy.

260
00:21:57,168 --> 00:21:59,055
This, if it is successful,

261
00:21:59,055 --> 00:22:03,010
it would have loaded in the user
into the request object.

262
00:22:03,010 --> 00:22:08,387
So by the time we come to this point
here after the passport.authenticate

263
00:22:08,387 --> 00:22:11,596
facebook-token middle ware is executed,

264
00:22:11,596 --> 00:22:16,291
you would have the user already
loaded into the request object.

265
00:22:16,291 --> 00:22:23,070
So if this is the case, Then,
we'll say, we'll create a token.

266
00:22:23,070 --> 00:22:27,709
We will create a JSON web token here,
just like the way we

267
00:22:27,709 --> 00:22:32,371
created the JSON web token
when the user logged in here.

268
00:22:32,371 --> 00:22:35,275
So, we're going to be copying that here.

269
00:22:38,010 --> 00:22:41,586
Authenticate.getToken, so
this will get us the JSON web token.

270
00:22:41,586 --> 00:22:46,656
So essentially, the user is sending
the access token to the express server,

271
00:22:46,656 --> 00:22:50,634
the express server uses
the accessToken to go to Facebook and

272
00:22:50,634 --> 00:22:52,979
then fetch the profile of the user.

273
00:22:52,979 --> 00:22:57,560
And if the user doesn't exist, we'll
create a new user with that Facebook ID.

274
00:22:57,560 --> 00:23:02,486
And then after that,
then our express server will generate

275
00:23:02,486 --> 00:23:07,818
a JSON web token and then return
the JSON web token to our client.

276
00:23:07,818 --> 00:23:13,878
All subsequent accesses from our
user will have to include this JSON

277
00:23:13,878 --> 00:23:19,317
web token that we have just
returned by using this approach.

278
00:23:19,317 --> 00:23:24,280
So at this point you no longer need
the Facebook access token anymore.

279
00:23:24,280 --> 00:23:29,287
You can discard the Facebook
access token at this point because

280
00:23:29,287 --> 00:23:35,237
the JSON web token is the one that keeps
the users authentication active for

281
00:23:35,237 --> 00:23:39,602
whatever duration that this
JSON web token is active.

282
00:23:39,602 --> 00:23:45,529
Now in addition to this, of course
we also need to do these steps here.

283
00:23:45,529 --> 00:23:48,365
So I'm just going to copy that part here.

284
00:23:48,365 --> 00:23:53,336
because I'm going to do exactly
the same thing in this case also,

285
00:23:53,336 --> 00:23:56,284
so we will paste in that code here.

286
00:23:56,284 --> 00:24:00,485
So we'll say statusCode = 200,
content header type, and

287
00:24:00,485 --> 00:24:06,120
then we'll say res.json you're
successfully logged in, and that's it.

288
00:24:06,120 --> 00:24:13,521
So with this approach, as you can see,
now using a call to this endpoint.

289
00:24:13,521 --> 00:24:17,498
The user application,
the client in this case,

290
00:24:17,498 --> 00:24:24,320
will pass in the Facebook access token
that it has just obtained from Facebook.

291
00:24:24,320 --> 00:24:27,970
And then our express server will then
use the Facebook access token to

292
00:24:27,970 --> 00:24:30,380
verify the user on Facebook.

293
00:24:30,380 --> 00:24:35,580
And then if the user is acknowledged
by Facebook to be a legitimate user,

294
00:24:35,580 --> 00:24:42,110
then our express server will return
a JSON wed token to our client.

295
00:24:42,110 --> 00:24:44,920
And then our client is authenticated and

296
00:24:44,920 --> 00:24:48,650
then can proceed forward with
carrying out the other operations

297
00:24:48,650 --> 00:24:53,460
using the JSON wed token in the header
of all the request messages.

298
00:24:53,460 --> 00:25:00,190
Subsequently, just like we did with the
local authentication strategy, that's it.

299
00:25:00,190 --> 00:25:07,630
So we have completed all the updates to
our application, let's save the changes.

300
00:25:08,810 --> 00:25:14,940
Going to our terminal,
let's start up the server here,

301
00:25:14,940 --> 00:25:19,710
so we'll say npm start, and
the server is up and running.

302
00:25:20,740 --> 00:25:26,320
And I noticed that I had
typed in P-A-S-S-S port,

303
00:25:26,320 --> 00:25:28,790
and so this caused an error here.

304
00:25:28,790 --> 00:25:32,250
So notice that how easy
it is to make errors.

305
00:25:32,250 --> 00:25:35,439
So let me go and correct that and
then come back and restart my server.

306
00:25:37,080 --> 00:25:40,280
So, when you encounter errors like these,
don't panic.

307
00:25:40,280 --> 00:25:43,470
Look around to see where
the problem is and very often,

308
00:25:43,470 --> 00:25:47,580
it will be a simple problem like
this that will cause errors for you.

309
00:25:48,970 --> 00:25:54,160
Again, going back to the users.js and

310
00:25:54,160 --> 00:25:57,930
you see that in the authenticate.js file,

311
00:25:57,930 --> 00:26:02,270
I have configured this
saying P-A-S-S-S port.

312
00:26:02,270 --> 00:26:06,100
So in the authenticate.js file,
let me fix that to passsport and

313
00:26:06,100 --> 00:26:08,702
then save the changes and
then restart my server.

314
00:26:09,770 --> 00:26:16,340
Now, restarting my server, So
my server is now up and running.

315
00:26:17,400 --> 00:26:20,160
At this point, go to a browser.

316
00:26:20,160 --> 00:26:26,212
And in the browser,
type https://localhost3443.

317
00:26:29,625 --> 00:26:37,350
If you happen to have this page cached
here, you may wish to remove the cache.

318
00:26:37,350 --> 00:26:41,417
Or just type localhost:3343/index.html,
and

319
00:26:41,417 --> 00:26:45,829
then you will immediately
notice that in this index.html,

320
00:26:45,829 --> 00:26:49,640
you will see this button
called Log In button.

321
00:26:49,640 --> 00:26:54,280
So we're going to click on this
login button to login to Facebook.

322
00:26:54,280 --> 00:26:59,880
Let's log in and then you will
come up with this message here.

323
00:26:59,880 --> 00:27:03,365
Which if you have already
logged in to Facebook earlier,

324
00:27:03,365 --> 00:27:07,840
it'll ask for
the permission to continue as the user.

325
00:27:07,840 --> 00:27:12,440
If not, then it'll ask you to
log in to Facebook with and

326
00:27:12,440 --> 00:27:14,030
then allow you to continue.

327
00:27:14,030 --> 00:27:17,000
Since I had just logged in to
Facebook a little bit earlier, so

328
00:27:17,000 --> 00:27:19,020
I can just click on Continue.

329
00:27:19,020 --> 00:27:24,955
Now, open the developers JavaScript
console at the bottom here.

330
00:27:24,955 --> 00:27:31,810
And in the JavaScript console, you see
a bunch of messages printed in here.

331
00:27:31,810 --> 00:27:33,070
And then in particular,

332
00:27:33,070 --> 00:27:37,720
open this object that you will
see in the JavaScript console.

333
00:27:37,720 --> 00:27:43,081
And inside this object,
you will see this alt response here.

334
00:27:43,081 --> 00:27:49,370
And in there,
you will see an access tool present there.

335
00:27:49,370 --> 00:27:55,320
Now, this is a reply that is
obtained from Facebook or

336
00:27:55,320 --> 00:28:00,610
out to authentication server
by our application here.

337
00:28:00,610 --> 00:28:03,060
And I'm going to simply copy this,

338
00:28:03,060 --> 00:28:07,010
because this is the access token
that Facebook has supplied to us.

339
00:28:07,010 --> 00:28:13,710
Now, I need to give this access token
to my express server in order for

340
00:28:13,710 --> 00:28:19,990
it to go and verify my profile, and then
allow me to log in to that application.

341
00:28:19,990 --> 00:28:22,860
So I am doing this in a clenched way

342
00:28:22,860 --> 00:28:27,560
here simply because I wanted to show
you how the access token comes in here.

343
00:28:27,560 --> 00:28:30,940
And we copy the access token,
then I'm going to take this and

344
00:28:30,940 --> 00:28:36,820
use Postman to send this access
token to my Express server.

345
00:28:36,820 --> 00:28:42,330
Now, when you design a web
app like Angular, or

346
00:28:42,330 --> 00:28:48,840
the Ionic app, or the NativeScript app,
you don't need to do all these steps.

347
00:28:48,840 --> 00:28:53,634
Now, basically when the access
token is returned to your web app,

348
00:28:53,634 --> 00:28:58,086
the Angular app, or the Ionic app,
or the NativeScript app,

349
00:28:58,086 --> 00:29:01,868
you'll simply capture this
access token in there.

350
00:29:01,868 --> 00:29:06,791
And then you will pass this
access token on to the Express

351
00:29:06,791 --> 00:29:12,770
server using the XMLHttpRequest
to obtain the information.

352
00:29:12,770 --> 00:29:16,410
But since I wanted to manually
illustrate the steps.

353
00:29:16,410 --> 00:29:21,319
So, I set up this index.html
with a simple JavaScript

354
00:29:21,319 --> 00:29:24,640
code that Facebook provides for me.

355
00:29:26,420 --> 00:29:30,792
So that I will be able to retrieve this
authorization token that we obtained from

356
00:29:30,792 --> 00:29:31,454
Facebook.

357
00:29:31,454 --> 00:29:34,662
So let me copy this authorization token.

358
00:29:34,662 --> 00:29:39,110
Now, we will go to Postman,
and then try and

359
00:29:39,110 --> 00:29:45,340
see how we can obtain the JSON web
token from our Express server.

360
00:29:45,340 --> 00:29:49,220
Now, going to Postman, from Postman,

361
00:29:49,220 --> 00:29:54,525
let me now do a GET request to

362
00:29:54,525 --> 00:30:03,195
localhost:3443User'sFacebooktoken.

363
00:30:03,195 --> 00:30:07,855
And when I send this
request to that point,

364
00:30:07,855 --> 00:30:13,115
the other configuration that
I need to do here is that,

365
00:30:13,115 --> 00:30:18,080
I need to pass in this access
token that I have just obtained.

366
00:30:18,080 --> 00:30:21,970
Now, to pass an access
token in the header,

367
00:30:21,970 --> 00:30:26,370
I can pass it in as an authorization
header by typing authorization.

368
00:30:26,370 --> 00:30:33,660
But note that the value should be typed
as Beta with a capital B in this case,

369
00:30:33,660 --> 00:30:41,350
and then paste that access token that
we obtained from Facebook in here.

370
00:30:41,350 --> 00:30:44,840
Note the capital B here, and

371
00:30:44,840 --> 00:30:48,990
then you can pass in this to our server.

372
00:30:50,090 --> 00:30:53,970
And then upon reply from our server,

373
00:30:53,970 --> 00:30:59,810
you would see that you would have obtained
the JSON web token from our server site.

374
00:30:59,810 --> 00:31:05,472
So this is one way that you obtain
the JSON web token by exchanging your

375
00:31:05,472 --> 00:31:10,000
access token from Facebook that you have
just obtained with your Express server.

376
00:31:10,000 --> 00:31:16,330
And your Express server
in turn will go and

377
00:31:16,330 --> 00:31:19,960
obtain your profile
information from Facebook, and

378
00:31:19,960 --> 00:31:23,720
then create an account specifically for
you, and

379
00:31:23,720 --> 00:31:28,260
then return you the JSON web token
if everything is successful.

380
00:31:28,260 --> 00:31:33,290
Another way of passing in this
information is in the header,

381
00:31:33,290 --> 00:31:40,480
you type access_token as the key.

382
00:31:40,480 --> 00:31:46,268
And in the value,
you just type in the access

383
00:31:46,268 --> 00:31:52,020
token like this here, and then you can
send the request And the same thing.

384
00:31:52,020 --> 00:31:55,878
It'll again return the JSON web token for
you.

385
00:31:55,878 --> 00:31:59,410
And then you'd capture the JSON web token,
and then carry on with the rest

386
00:31:59,410 --> 00:32:05,300
of the accesses to your express
server using this JSON web token.

387
00:32:05,300 --> 00:32:10,010
A third approach is to include this into

388
00:32:10,010 --> 00:32:15,410
your URL itself as a query parameter.

389
00:32:15,410 --> 00:32:23,827
The third approach is to
say token?access_token= and

390
00:32:23,827 --> 00:32:32,290
then paste the JSON web token
into that query parameter.

391
00:32:32,290 --> 00:32:37,140
Don't use the quotes here,
just the JSON web token itself.

392
00:32:37,140 --> 00:32:40,810
And then send the request to your server.

393
00:32:40,810 --> 00:32:47,680
And then even then your server will
return the corresponding JSON web token.

394
00:32:47,680 --> 00:32:52,450
So you see three different ways that you
can parse in your Facebook Access Token to

395
00:32:52,450 --> 00:32:57,350
your server, and then obtain
the JSON web token from your server.

396
00:32:57,350 --> 00:33:01,660
And after this, the rest of these
steps proceed just like before.

397
00:33:02,970 --> 00:33:09,400
Now to convince you that actually a new
account has been created with the Facebook

398
00:33:09,400 --> 00:33:13,720
profile for this particular user,
let's go to the terminal.

399
00:33:15,080 --> 00:33:20,240
In the terminal, in a new terminal window,
I will start the mongo ripple here.

400
00:33:20,240 --> 00:33:25,050
So in the mongo ripple,
let me say, use conFusion.

401
00:33:25,050 --> 00:33:31,560
And then I'll say,
db.users.find().pretty(),

402
00:33:31,560 --> 00:33:36,570
and then print out all the users
that are registered in my system.

403
00:33:36,570 --> 00:33:40,540
You notice that the three users that we
had configured in the previous exercises

404
00:33:40,540 --> 00:33:41,410
are all there.

405
00:33:43,350 --> 00:33:48,130
Notice in addition a fourth user
that has just been added in.

406
00:33:48,130 --> 00:33:53,580
And note that for this particular user,
we don't have the hash in source yet,

407
00:33:53,580 --> 00:33:57,650
but instead the facebookId
of that user is set up, and

408
00:33:57,650 --> 00:34:02,660
the username is set up to be that value,
and the firstname is set up there.

409
00:34:02,660 --> 00:34:05,580
And also the last name should
have been set up here but

410
00:34:05,580 --> 00:34:08,990
I think there's a small error in my code.

411
00:34:08,990 --> 00:34:16,910
So I will go and
check the lastname part of it there.

412
00:34:18,100 --> 00:34:20,110
Going to authenticate.js.

413
00:34:20,110 --> 00:34:23,130
Let me see if I made mistake here.

414
00:34:23,130 --> 00:34:24,580
There we go.

415
00:34:24,580 --> 00:34:28,340
I typed in F-A-M-I-L-Y Name.

416
00:34:28,340 --> 00:34:31,980
So you see,
even I am not about making mistakes.

417
00:34:31,980 --> 00:34:36,277
So this should be familyName here,

418
00:34:36,277 --> 00:34:42,730
user.lastname profile.name.familyName
here.

419
00:34:42,730 --> 00:34:46,520
So let me save the changes, and
now the code should work correctly.

420
00:34:47,710 --> 00:34:49,950
Again going back to the terminal,

421
00:34:49,950 --> 00:34:54,460
you now see that a new user has been
created with the Facebook profile here.

422
00:34:54,460 --> 00:34:59,130
Now any subsequent time I tried to
authenticate myself using Facebook

423
00:34:59,130 --> 00:35:00,520
is the same process.

424
00:35:00,520 --> 00:35:03,000
I obtained the access
token from Facebook and

425
00:35:03,000 --> 00:35:06,160
then parse in the access
token to my express server.

426
00:35:06,160 --> 00:35:10,790
My express server will then go to
Facebook, fetch the profile and

427
00:35:10,790 --> 00:35:14,020
then check to see if
the user already exists.

428
00:35:14,020 --> 00:35:18,660
And in the subsequent login
that I do using Facebook,

429
00:35:18,660 --> 00:35:22,460
I would find that this particular user
is already existing in the system.

430
00:35:22,460 --> 00:35:26,540
So, it'll simply proceed forward and
the user will be authenticated and

431
00:35:26,540 --> 00:35:31,730
then the extra server will
issue a JSON web token to their

432
00:35:31,730 --> 00:35:37,385
client and we can proceed forward from
that point onwards just like before.

433
00:35:37,385 --> 00:35:42,395
So you see, setting up OAuth 2
based authentication using a OAuth

434
00:35:42,395 --> 00:35:48,123
2 service provider like Facebook is not
that difficult provided we get hold

435
00:35:48,123 --> 00:35:54,135
of the appropriate passport Facebook
authentication strategy based module.

436
00:35:54,135 --> 00:35:59,060
Like passport Facebook token which
already takes care of much of

437
00:35:59,060 --> 00:36:04,253
the work on our behalf and then enables
us to set up our express server

438
00:36:04,253 --> 00:36:09,750
to handle third party authentication
based on OAuth 2 from Facebook.

439
00:36:09,750 --> 00:36:12,730
With this, we complete this exercise.

440
00:36:12,730 --> 00:36:16,490
In this exercise, we have learned
how to do all OAuth 2 authentication

441
00:36:16,490 --> 00:36:20,590
using Facebook as the OAuth
2 authentication provided.

442
00:36:20,590 --> 00:36:25,263
This is a good time for you to save
the changes that you've made to

443
00:36:25,263 --> 00:36:29,521
your Git Repository with
the message passport Facebook.

444
00:36:29,521 --> 00:36:35,380
[MUSIC]