1
00:00:00,750 --> 00:00:04,170
In this video we're going to continue talking about how life works.

2
00:00:04,220 --> 00:00:08,780
Now at the very end of the last video I had mentioned that if you've ever gone through a lot with me

3
00:00:08,780 --> 00:00:13,290
before inside of another course I have shown you the oath for servers flow.

4
00:00:13,480 --> 00:00:18,290
But in this application we're going to be using a slightly different flow or a slightly different setup.

5
00:00:18,290 --> 00:00:23,540
This is going to be a flow specifically made for enabling authentication of users who are making use

6
00:00:23,570 --> 00:00:27,680
of a javascript application running inside of a browser.

7
00:00:27,710 --> 00:00:30,380
Let me tell you a couple of differences between the two.

8
00:00:30,380 --> 00:00:33,790
The first thing the first difference is not really a difference at all.

9
00:00:33,890 --> 00:00:38,330
So I want you to understand if you have learned this flow over here the flow we're going to be making

10
00:00:38,330 --> 00:00:41,360
use of is very very similar in nature.

11
00:00:41,510 --> 00:00:46,250
So at the end of the day both of these different flows are both these different approaches to handling

12
00:00:46,490 --> 00:00:52,640
oath where the user is going to effectively kind of have the same result at the end of the day we are

13
00:00:52,640 --> 00:00:58,070
asking the user to provide us access to information about them through some outside service provider.

14
00:00:58,400 --> 00:01:03,290
And as a result of this process we're going to get some identifying information for the user such as

15
00:01:03,290 --> 00:01:07,100
a profile or an e-mail address or an identification number.

16
00:01:07,250 --> 00:01:13,060
And we're also going to get a token that is going to allow us to take some action on behalf of a user

17
00:01:14,090 --> 00:01:17,080
without them directly involved or being involved.

18
00:01:18,530 --> 00:01:21,270
So that's true of both these different flows.

19
00:01:21,270 --> 00:01:25,200
Now usually we are going to be making use of the auth for servers flow.

20
00:01:25,270 --> 00:01:30,600
Anytime that you are building an application that needs to access user data when they are not actively

21
00:01:30,660 --> 00:01:34,080
logged into application or actively making use of it.

22
00:01:34,080 --> 00:01:39,090
So an example of when you might definitely want to use this flow over here is if you are building some

23
00:01:39,510 --> 00:01:45,090
application that is going to attempt to access the user's e-mail every 10 minutes and maybe attempt

24
00:01:45,090 --> 00:01:50,580
to delete some e-mails that are flagged to spam or something like that but that type of application

25
00:01:50,850 --> 00:01:56,040
you would want to be able to access their e-mail account every 10 minutes regardless of whether or not

26
00:01:56,040 --> 00:01:59,720
the user is actively logged into your application and making use of it.

27
00:01:59,880 --> 00:02:04,380
So for that type of application you would want to use this law for servers flow.

28
00:02:04,410 --> 00:02:07,250
Now in our case we're not doing anything like that.

29
00:02:07,260 --> 00:02:14,240
We are only making use of Google Earth just to allow a user to log in and then attempt to create a stream.

30
00:02:14,280 --> 00:02:19,230
So we're not really associating a lot of information with the streams that are being created from each

31
00:02:19,230 --> 00:02:20,270
of these users.

32
00:02:20,340 --> 00:02:26,220
And we also don't have any need to attempt to access that user's data on Google servers so we're going

33
00:02:26,220 --> 00:02:31,830
to instead use this other flow over here because we are only trying to kind of deal with this user when

34
00:02:31,830 --> 00:02:36,500
they are actively logged into our application and making use of it.

35
00:02:36,510 --> 00:02:37,310
All right.

36
00:02:37,470 --> 00:02:40,500
So like I said we're going to be using this other flow over here.

37
00:02:40,530 --> 00:02:44,430
Now I want to now show you a diagram that's going to help you understand exactly how this flow is going

38
00:02:44,430 --> 00:02:45,780
to work.

39
00:02:45,780 --> 00:02:49,950
At the end the day the flow that we're going to go through is going to be really easy and straightforward

40
00:02:49,980 --> 00:02:55,170
because we're going to make use of a javascript library created by Google themselves to automate this

41
00:02:55,170 --> 00:02:57,180
entire authentication process.

42
00:02:58,070 --> 00:02:58,350
OK.

43
00:02:58,360 --> 00:02:59,480
So here's the flow.

44
00:03:00,930 --> 00:03:06,500
So the entire flow for a lot is going to be some interaction between our user and Google servers.

45
00:03:06,520 --> 00:03:11,060
And there's actually going to be very little that you and I have to do inside this flow.

46
00:03:11,320 --> 00:03:17,560
So we're going to start at the top left hand side and go through this step by step so everything is

47
00:03:17,560 --> 00:03:22,150
going to begin when the user clicks on the log in with Google button inside of our header.

48
00:03:22,330 --> 00:03:26,940
When that occurs we are going to hook up a click event handler to that button.

49
00:03:27,190 --> 00:03:32,320
And so whenever user clicks on it we are going to run some code that is going to call Google's javascript

50
00:03:32,320 --> 00:03:35,120
library and initiate the process.

51
00:03:35,440 --> 00:03:41,150
When we do that call to that javascript library then that javascript library is going to automatically

52
00:03:41,260 --> 00:03:44,570
automatically make an authentication request over to Google.

53
00:03:44,890 --> 00:03:49,810
The result of which is going to be a little pop up window that appears inside the user's browser.

54
00:03:49,870 --> 00:03:55,150
So this is going to be like a separate window that appears and prompts the user the user is going to

55
00:03:55,150 --> 00:04:01,870
be prompted to grant access to our application to access their user account and get some information

56
00:04:01,870 --> 00:04:02,540
about them.

57
00:04:03,450 --> 00:04:08,460
So the user is going to click some Except button and then when that occurs that pop up window is going

58
00:04:08,460 --> 00:04:15,570
to automatically close when the user accepts and that window closes the javascript library running inside

59
00:04:15,570 --> 00:04:21,490
of our application is going to invoke a callback essentially inside of our react and redux application.

60
00:04:21,630 --> 00:04:26,700
This callback is going to be invoked with some authorization token and profile information about the

61
00:04:26,760 --> 00:04:27,310
user.

62
00:04:27,360 --> 00:04:32,610
And that's what's going to identify this user and essentially prove that they are successfully logged

63
00:04:32,610 --> 00:04:34,590
in through Google.

64
00:04:34,890 --> 00:04:39,290
At that point in time we will then consider the user to be logged in as well.

65
00:04:39,390 --> 00:04:44,610
Now as a part of this process but not shown on this diagram right here if the user ever happens to log

66
00:04:44,670 --> 00:04:50,530
out of our application or happens to log out of Google servers we are going to get another callback

67
00:04:50,540 --> 00:04:54,780
in vote and this other callback is going to essentially say hey the user just logged out.

68
00:04:54,900 --> 00:04:59,450
So we'll need to make sure that we also wire up our application to listen for that call back then as

69
00:04:59,460 --> 00:04:59,980
well.

70
00:05:00,800 --> 00:05:05,090
Now if it seems like the flow rate here is really brief or you know kind of simplistic.

71
00:05:05,160 --> 00:05:10,370
Well like I said this is a really easy way to get started with the flow.

72
00:05:10,430 --> 00:05:15,800
Very simple very easy to get started with really easy to get a user to be signed in inside of your application

73
00:05:16,040 --> 00:05:21,860
and then make requests on behalf of them or allow them some advanced access inside of your application.

74
00:05:21,890 --> 00:05:26,640
OK so now that you've got kind of a vague idea of what's going to go on here let's take a quick pause.

75
00:05:26,660 --> 00:05:30,680
When we come back the next video we're going to start doing a little bit of setup for Google authentication

76
00:05:30,710 --> 00:05:31,790
inside of rap.

77
00:05:31,850 --> 00:05:33,800
So quick break and I'll see you in just a minute.