1 00:00:00,720 --> 00:00:05,670 In the last section we started to wire up passport in the Google strategy inside of our index such as 2 00:00:05,750 --> 00:00:06,990 file remember. 3 00:00:06,990 --> 00:00:11,970 For right now we're going to put all of our passport in authentication stuff directly into this file. 4 00:00:12,080 --> 00:00:17,270 But very shortly we'll separate it out to a couple of different files and folders inside of our server 5 00:00:17,270 --> 00:00:18,500 project. 6 00:00:18,500 --> 00:00:23,840 Now we have left things off saying that we needed to pass some additional configuration options to the 7 00:00:23,840 --> 00:00:27,120 Google strategy before we make use of the Google strategy. 8 00:00:27,140 --> 00:00:34,550 We have to give it two important options a client id and the client secret this client id and the client 9 00:00:34,550 --> 00:00:39,270 secret are provided to us directly from Google's overall service. 10 00:00:39,410 --> 00:00:46,730 Remember that when we went through our water flow we had said that we would take some user who is trying 11 00:00:46,730 --> 00:00:52,100 to visit or slash Google and we would forward them on to Google where they would then be asked to grant 12 00:00:52,100 --> 00:00:54,240 us permission to get their profile. 13 00:00:54,530 --> 00:01:00,410 So when we take a user and just kind of like throw them over to Google Google has to be able to identify 14 00:01:00,470 --> 00:01:02,210 where that user is coming from. 15 00:01:02,210 --> 00:01:07,030 They have to be able to say oh this user is coming from the guys who are putting together the email 16 00:01:07,090 --> 00:01:08,410 the application. 17 00:01:08,420 --> 00:01:14,210 So when the user grants permission for them to read the profile we're going to send them back over to 18 00:01:14,210 --> 00:01:20,240 the e-mail people in order for Google to be aware that our application exists and be able to make that 19 00:01:20,240 --> 00:01:21,470 type of connection. 20 00:01:21,500 --> 00:01:24,400 We have to sign up with the Google Olaf API. 21 00:01:24,590 --> 00:01:30,530 And so essentially register our application and just tell Google hey we exist and we're going to have 22 00:01:30,530 --> 00:01:33,250 people who want to a along with our application. 23 00:01:34,680 --> 00:01:39,350 Now signing up with the Google auth API is a little bit complicated. 24 00:01:39,420 --> 00:01:43,810 So let's start it right now and give ourselves a good bit of time to get through it. 25 00:01:44,280 --> 00:01:51,910 I'm going to create a new browser tab and I'm going to navigate directly to console developers developers 26 00:01:51,930 --> 00:01:58,110 dot Google dot com and I'll paste this inside of my code editor so you can see it nice and large. 27 00:01:58,730 --> 00:01:59,110 OK. 28 00:01:59,180 --> 00:01:59,790 So there you go. 29 00:01:59,890 --> 00:02:05,060 Consulate developers dot Google dot com OK. 30 00:02:05,090 --> 00:02:10,860 So once you navigate there if you do not yet have a Google account please at this point create an account 31 00:02:10,860 --> 00:02:11,630 with Google. 32 00:02:11,640 --> 00:02:13,020 It can be a total trash account. 33 00:02:13,020 --> 00:02:16,820 You don't have to use your personal on any google account will do. 34 00:02:17,340 --> 00:02:21,840 When you come to this developer's con. You might see something that looks like what I see on the screen 35 00:02:21,870 --> 00:02:26,940 but you might see something instead that says hey you create your first project or something like that. 36 00:02:27,020 --> 00:02:28,940 And so that's exactly what we want to do right now. 37 00:02:28,950 --> 00:02:35,960 We want to generate a brand new project to use with our Google off API at present. 38 00:02:36,000 --> 00:02:41,520 I see this screen because I already have a couple of existing kind of sample projects inside of this 39 00:02:41,520 --> 00:02:42,240 account. 40 00:02:42,480 --> 00:02:46,910 So you're only going to see this stuff if you already have existing projects. 41 00:02:47,140 --> 00:02:52,500 Anyways let's create a new one that will be tied just to all the logic around this email application 42 00:02:52,500 --> 00:02:53,690 that we're working on. 43 00:02:54,090 --> 00:02:57,030 So up at the drop down up here click it. 44 00:02:57,210 --> 00:03:02,810 And then on the far right hand side going to hit the plus button to create a new project. 45 00:03:02,880 --> 00:03:05,580 Now I get prompted to add a project name. 46 00:03:05,580 --> 00:03:12,930 I'm going to give it the name of email the dash dev like so and I do recommend you put dasht Dev on 47 00:03:12,930 --> 00:03:17,290 there because we're going to make a second key a little bit or a second project a little bit later on. 48 00:03:17,880 --> 00:03:21,440 OK so after that I'll click the create button and then this is really important. 49 00:03:21,450 --> 00:03:22,780 Let me pause you right now. 50 00:03:22,890 --> 00:03:25,360 Really important when you click on Create right there. 51 00:03:25,360 --> 00:03:27,740 It does not instantly create your project. 52 00:03:27,960 --> 00:03:31,930 Instead it starts the process of creating a new project. 53 00:03:32,100 --> 00:03:37,320 And very briefly you'll see a spinner appear in your notifications area as Google is creating that new 54 00:03:37,320 --> 00:03:38,250 project. 55 00:03:38,250 --> 00:03:43,170 So I'm still looking at my previous one and I have to make sure that I click on the dropdown and then 56 00:03:43,170 --> 00:03:47,250 select the new project email Emily dashed that I just created. 57 00:03:47,250 --> 00:03:50,380 Now that's only relevant if you have other projects already in here. 58 00:03:50,430 --> 00:03:54,380 If you have a completely fresh account chances are it will do the right thing. 59 00:03:54,660 --> 00:03:59,670 Basically at the end of the day just make sure that you seemingly dashed death up in the nav bar up 60 00:03:59,670 --> 00:04:00,150 here. 61 00:04:00,150 --> 00:04:01,160 That's what you want to see. 62 00:04:02,710 --> 00:04:07,360 OK so now we've created this new project we need to do two separate things. 63 00:04:07,450 --> 00:04:11,580 And again this is where I said that the sign up stuff is a little bit complicated. 64 00:04:11,830 --> 00:04:13,660 So let's just get through these two things. 65 00:04:13,660 --> 00:04:18,070 The first one is going to be to enable the Google auth API. 66 00:04:18,070 --> 00:04:22,470 And then secondly we're going to create a brand new API credential. 67 00:04:22,930 --> 00:04:25,930 So first we're going to enable the Google API. 68 00:04:26,290 --> 00:04:32,590 I'm going to click on enable API up here and then it gives me a list of all the different API that we 69 00:04:32,590 --> 00:04:35,980 have access to inside of this account for us. 70 00:04:35,980 --> 00:04:39,620 We want to get access to specifically Olaf API. 71 00:04:39,940 --> 00:04:44,400 And so you can search for cloth and you'll notice very helpfully. 72 00:04:44,440 --> 00:04:49,960 And I say that entirely sarcastically it says no results for off so I'm going to tell you right now 73 00:04:50,140 --> 00:04:55,060 this is definitely one of the things they here in this course for because this is really not clear to 74 00:04:55,510 --> 00:04:57,130 outside beginners at all. 75 00:04:57,250 --> 00:05:05,560 When we want to sign up for the API we actually want to sign up for the Google Plus API so search for 76 00:05:05,590 --> 00:05:10,310 Google Plus you'll see a result of Google Plus API. 77 00:05:10,510 --> 00:05:12,160 Click on that. 78 00:05:12,160 --> 00:05:17,980 And then on the page that pops up you're going to see something that says oh yeah access user data with 79 00:05:18,030 --> 00:05:19,150 a law to point out. 80 00:05:19,300 --> 00:05:24,550 So in my opinion this API right here is truly buried because you can't search for a lot. 81 00:05:24,580 --> 00:05:27,620 So hey what good is it anyways. 82 00:05:27,850 --> 00:05:28,940 I'm just throwing that out there. 83 00:05:28,990 --> 00:05:30,330 You know just a little bit of a headache. 84 00:05:30,370 --> 00:05:36,160 So make sure you're looking at Google Plus API and then you click on and Nabl at the time it'll take 85 00:05:36,160 --> 00:05:37,650 just a second to turn it on. 86 00:05:40,080 --> 00:05:41,350 And any second. 87 00:05:41,430 --> 00:05:41,650 OK. 88 00:05:41,670 --> 00:05:45,390 So we're going to go now just enabling the API is not enough. 89 00:05:45,390 --> 00:05:48,940 Remember we also have to generate an API credential. 90 00:05:48,960 --> 00:05:55,290 So now this API is enabled in our accounts but to access our account and the API that are Nabl inside 91 00:05:55,290 --> 00:05:57,250 of it we have to make a credential. 92 00:05:57,450 --> 00:06:02,660 So you can either click on the Create credentials message that pops up here or just click on credentials 93 00:06:02,670 --> 00:06:05,240 on the left hand nav. 94 00:06:05,490 --> 00:06:06,800 So we click on credentials. 95 00:06:06,870 --> 00:06:12,000 You'll be prompted with the window that says oh you create credential you can click on the button and 96 00:06:12,000 --> 00:06:22,730 then we want the option that says oh all client id want client id so the fun is not over yet. 97 00:06:22,790 --> 00:06:23,560 We're not done yet. 98 00:06:23,600 --> 00:06:26,980 The funds are not over yet still some other stuff some hoops to jump through. 99 00:06:27,170 --> 00:06:29,440 Yes this process is just crazy town. 100 00:06:29,690 --> 00:06:35,170 So in order to get a client id we have to set up a product name for our consent screen. 101 00:06:35,270 --> 00:06:36,550 So what does a consent screen. 102 00:06:36,590 --> 00:06:42,180 Well remember whenever we take this user who's attempting to sign in and we take them over to Google. 103 00:06:42,260 --> 00:06:46,860 Google is going to ask the user if they grant permission to our application. 104 00:06:46,910 --> 00:06:52,250 And so when the user gets prompted to grant us permission that is the consent screen that is the thing 105 00:06:52,250 --> 00:06:57,530 that says hey these people are trying to get access to your account information is that OK. 106 00:06:57,710 --> 00:07:04,190 And they'll have our our our account name on it and our Maybe our picture and some other stuff on there. 107 00:07:04,220 --> 00:07:06,430 And so that's what this consent screen is. 108 00:07:06,980 --> 00:07:12,680 So a click on config consent screen and then we've got a couple of different things to fill out in here 109 00:07:13,050 --> 00:07:13,630 right now. 110 00:07:13,640 --> 00:07:16,460 The only thing we have to fill out is the product name. 111 00:07:16,760 --> 00:07:23,450 So we will put email the dash dev in here and then we don't have to put anything else in here. 112 00:07:23,450 --> 00:07:25,150 Everything else is optional. 113 00:07:25,880 --> 00:07:32,740 So let's click save and then we can select the application type that we're trying to create. 114 00:07:32,760 --> 00:07:38,160 So we're making a web application so we click on web application and then we get a couple of other options 115 00:07:38,160 --> 00:07:40,110 to fill out inside of here as well. 116 00:07:40,110 --> 00:07:47,100 First off is the name we'll leave that as web client one we get authorized javascript origins and then 117 00:07:47,100 --> 00:07:52,120 we also have authorized redirect you are it's now for right now. 118 00:07:52,200 --> 00:07:56,490 We're going to just put some values in here and we're not going to talk a lot about what's going on 119 00:07:56,490 --> 00:07:56,880 with them. 120 00:07:56,940 --> 00:07:57,380 OK. 121 00:07:57,540 --> 00:07:59,460 Now I guarantee we will come back. 122 00:07:59,460 --> 00:08:03,790 We'll talk about what these two settings are that we're filling out. 123 00:08:03,810 --> 00:08:06,500 But we'll do that a little bit later. 124 00:08:06,510 --> 00:08:15,240 So first for the authorized javascript origin we're going to say age TTP colon slash slash local host 125 00:08:15,240 --> 00:08:24,870 colon 5 0 0 0 0 and slash star 5000 slash star and then we're going to put the exact identical thing 126 00:08:27,540 --> 00:08:29,060 I've got a typo somewhere in here. 127 00:08:29,060 --> 00:08:29,700 What is it. 128 00:08:29,880 --> 00:08:34,910 Oh it doesn't like the slash star we want just localhost 5000 on this one. 129 00:08:34,920 --> 00:08:36,920 My apologies on the second one. 130 00:08:36,960 --> 00:08:39,500 That's where we want the slash star much better. 131 00:08:39,510 --> 00:08:39,990 OK. 132 00:08:40,260 --> 00:08:47,150 So first one local host five thousand second one local hosts 5000 slash star. 133 00:08:47,280 --> 00:08:52,200 Now like I said we will come back we'll talk about what these things are for at a later point in this 134 00:08:52,480 --> 00:08:53,960 flow. 135 00:08:54,070 --> 00:08:58,710 Right now let's click on Create do make sure you get there like little dots on there. 136 00:08:58,770 --> 00:09:03,540 You might have to click on the create button twice now after we finish that up we get this nice pop 137 00:09:03,540 --> 00:09:07,860 up and it tells us a client id and a client secret. 138 00:09:07,890 --> 00:09:11,640 So these are the two little identifying tokens that we need to get access to. 139 00:09:11,640 --> 00:09:19,850 So right now we're going to copy the first one we're going to go back over to our code editor and for 140 00:09:19,860 --> 00:09:26,030 right now I'm going to just paste it in here and I label it as Client ID. 141 00:09:26,110 --> 00:09:28,960 Now I'm going to do the same thing with the second one as well. 142 00:09:28,970 --> 00:09:35,330 It's going to copy the client secrets a label it as clients secret and they'll paste that one too. 143 00:09:35,330 --> 00:09:37,880 Now we're going to make use of both of these in just a second. 144 00:09:37,880 --> 00:09:42,820 The reason we're copy pasting them over here right now is that we're going take a break right now. 145 00:09:42,850 --> 00:09:47,850 And just in case you want to stop watching and don't have to pull this window back up. 146 00:09:47,900 --> 00:09:50,120 I want to make sure you've got a reference to them right here. 147 00:09:50,120 --> 00:09:51,700 So we're in take a break right now. 148 00:09:51,710 --> 00:09:53,380 We're going to come back in just a second. 149 00:09:53,450 --> 00:09:57,100 We'll make use of the client id and the client secret at that point. 150 00:09:57,200 --> 00:09:59,220 So I'll see you in just a second.