1
00:00:00,380 --> 00:00:04,050
In the last video we spoke about the flow that a user is going to go through whenever they initiate

2
00:00:04,110 --> 00:00:06,020
a layoff inside of our application.

3
00:00:06,030 --> 00:00:09,690
So now in this video we're going to start going to the actual setup process.

4
00:00:09,690 --> 00:00:12,260
All right so here's the general idea of what we're going to do.

5
00:00:12,390 --> 00:00:16,800
If you've already gone through that previous application building that YouTube application a couple

6
00:00:16,800 --> 00:00:19,150
of these steps might feel a little bit familiar.

7
00:00:19,170 --> 00:00:24,030
So the first thing we're going to go go to is the developers council at Google.com.

8
00:00:24,180 --> 00:00:29,310
We're going to create a new project once we create this new project we're going to first set up in the

9
00:00:29,340 --> 00:00:34,560
confirmation screen that confirmation screen is essentially the same one that you go through any time

10
00:00:34,560 --> 00:00:36,510
that a user starts that flow.

11
00:00:36,570 --> 00:00:43,380
And we asked the user for access to their e-mail or profile or whatever else after that.

12
00:00:43,380 --> 00:00:45,840
We're then going to generate a lot Client ID.

13
00:00:45,960 --> 00:00:51,060
This is going to be an identifying token that is going to identify our application to Google servers

14
00:00:52,220 --> 00:00:57,890
following that will then install Google's API library and initialize it with that oath client id and

15
00:00:57,890 --> 00:01:02,150
then we'll make sure that any time that the user clicks on that log in with Google button we make use

16
00:01:02,150 --> 00:01:05,740
of that Google API library to start the process.

17
00:01:05,780 --> 00:01:06,590
So let's get to it.

18
00:01:06,590 --> 00:01:12,200
We're going to first begin by setting up a new project at council that developers start google.com.

19
00:01:12,260 --> 00:01:15,730
So inside of a new browser tab I'll go to cons..

20
00:01:15,800 --> 00:01:17,210
I always mix up the order there.

21
00:01:17,210 --> 00:01:17,840
I always do.

22
00:01:17,840 --> 00:01:19,730
Developers dot con..

23
00:01:19,760 --> 00:01:23,520
All right console developers dot Google dot com.

24
00:01:23,690 --> 00:01:27,730
Now once you come here remember you might see a project already on the screen.

25
00:01:27,740 --> 00:01:33,470
If you have ever created a project with Google before you probably don't do NOT want to reuse a project

26
00:01:33,470 --> 00:01:34,560
that you've already created.

27
00:01:34,570 --> 00:01:39,380
Instead we want to create a new project so we're going to find the project dropdown up here at the top

28
00:01:39,380 --> 00:01:41,850
left down side and then click on it.

29
00:01:42,170 --> 00:01:48,820
Once we have this dropdown open or this pop up open then click on new project up here at the top right.

30
00:01:48,920 --> 00:01:54,340
We then get asked to enter in a project name and so I'm going to use a project name of simply screamy

31
00:01:54,890 --> 00:01:56,830
and then click on Create.

32
00:01:56,840 --> 00:02:01,910
Now remember when you generate a project with Google you're going to see a little notification spinner

33
00:02:01,950 --> 00:02:04,880
appear even though you think that you just create the project.

34
00:02:04,880 --> 00:02:07,030
It is still in the process of being created.

35
00:02:07,100 --> 00:02:11,660
And so when you get dumped back at this page you're still probably going to be looking at a previously

36
00:02:11,660 --> 00:02:13,290
generated project.

37
00:02:13,370 --> 00:02:18,350
So it's only after that notification spinner ends and I see that little one right there that my project

38
00:02:18,350 --> 00:02:21,540
has been created and I can now successfully select it.

39
00:02:21,620 --> 00:02:26,760
So I got to go back up to this dropped down on the top left hand side and select screamy.

40
00:02:26,830 --> 00:02:29,600
So now I have the correct project selected.

41
00:02:29,620 --> 00:02:31,500
All right so now we've generated our project.

42
00:02:31,540 --> 00:02:36,550
We now need to set up an a confirmation screen so to do so we're going to find the credentials button

43
00:02:36,580 --> 00:02:38,770
on the left hand side.

44
00:02:38,910 --> 00:02:43,940
I'm going to go to a Watkin's sent screen and we're going to generate a new screen right here.

45
00:02:43,950 --> 00:02:49,080
Now all we have to do is really enter in our application name going to entry in an application name

46
00:02:49,140 --> 00:02:56,770
of stream me like so then I can go down to the bottom and click on safe.

47
00:02:56,820 --> 00:03:01,740
After that I'm going to go back to the credentials section or select the credentials sub menu and then

48
00:03:01,740 --> 00:03:03,440
I'll see this big notice right.

49
00:03:03,440 --> 00:03:06,750
You're in the middle that says that we need to create a set of credentials.

50
00:03:07,010 --> 00:03:11,390
So going to click on that button right there and we're going to make sure that we select a wath Client

51
00:03:11,450 --> 00:03:12,160
ID.

52
00:03:12,300 --> 00:03:14,200
We're not making an API key here.

53
00:03:14,200 --> 00:03:18,160
We're making a client I.D. It's going to select that.

54
00:03:18,480 --> 00:03:24,560
We then get asked what type of application we are making we're making it webapp will then see this little

55
00:03:24,560 --> 00:03:25,890
form appear.

56
00:03:25,910 --> 00:03:29,990
Now the only thing we have to add in here is a authorized javascript origin.

57
00:03:30,050 --> 00:03:34,600
This little check right here or whatever you are right here is essentially a little security check.

58
00:03:34,760 --> 00:03:40,700
Google is only going to allow requests to come in from a domain that is equal to whatever we list right

59
00:03:40,700 --> 00:03:41,540
here.

60
00:03:41,540 --> 00:03:46,970
So at present we are making use of our re-act application at local host 3000.

61
00:03:47,030 --> 00:03:54,200
So I'm going to put in HTP colon slash slash localhost Kulin 3000 like so.

62
00:03:54,470 --> 00:03:57,000
And notice that I did not put in HTP.

63
00:03:57,140 --> 00:03:59,700
It is simply HTP.

64
00:03:59,870 --> 00:04:07,330
And then I'll click on Create at the bottom I then see this pop up right here for my client and it has

65
00:04:07,330 --> 00:04:08,840
my client ID.

66
00:04:08,920 --> 00:04:11,390
So the only thing that we care about is the client id.

67
00:04:11,450 --> 00:04:13,930
We are not going to be making use of our client secret.

68
00:04:13,990 --> 00:04:21,110
We would only make use of that client secret if we were creating a flow with the first server's flow.

69
00:04:21,160 --> 00:04:26,890
But we are doing a lot for G-S browser applications and for that type of flow we only need the client

70
00:04:26,890 --> 00:04:28,070
id right here.

71
00:04:28,300 --> 00:04:33,050
So I'm going to copy this ID and then I'm going to go back over to my code editor.

72
00:04:33,280 --> 00:04:35,010
I'm going to create a new file.

73
00:04:35,200 --> 00:04:39,930
I'm not going to create it in my project directory I'm just going to essentially go to file new file

74
00:04:40,360 --> 00:04:44,360
and inside of here I'll say Client ID and L-Space that in like so.

75
00:04:44,470 --> 00:04:48,570
Now again I'm not going to save this file because we're going to make use of this key in just a moment.

76
00:04:48,580 --> 00:04:53,350
I just want to make sure that you don't lose it and have to go back over to the dashboard and get access

77
00:04:53,350 --> 00:04:54,710
to it a second time.

78
00:04:55,060 --> 00:04:55,690
OK that's it.

79
00:04:55,690 --> 00:04:57,340
We've now got our client I.D..

80
00:04:57,430 --> 00:04:59,470
So let's take a quick pause right here.

81
00:04:59,560 --> 00:05:02,250
We can't close that window when we come back in the next video.

82
00:05:02,260 --> 00:05:07,480
We're going to start to install the Google API library and then initialize it with that client id and

83
00:05:07,480 --> 00:05:09,230
then set up that click event handler.

84
00:05:09,310 --> 00:05:11,490
So quick pause and I'll see you in just a minute.