1 00:00:00,630 --> 00:00:05,730 We've now got our minimum amount of configuration put together for our Google strategy as the first 2 00:00:05,730 --> 00:00:10,560 argument we passed in some configuration options and then as the second argument we placed an arrow 3 00:00:10,560 --> 00:00:15,260 function as a Colback and we're not really too worried about what this is doing just yet. 4 00:00:15,300 --> 00:00:18,160 But we will talk about it in just a little bit. 5 00:00:18,180 --> 00:00:24,260 Now we've basically got enough configuration put together here to test out our authentication flow. 6 00:00:24,270 --> 00:00:28,260 So in this section we're going to do one last little small change and then we're going to start to test 7 00:00:28,260 --> 00:00:30,640 out the full authentication flow. 8 00:00:30,940 --> 00:00:34,160 Now before we do that I want to review our flow here very quickly. 9 00:00:34,260 --> 00:00:39,450 Remember that we had said that whenever a user clicks our logon button they are going to be directed 10 00:00:39,450 --> 00:00:41,500 to our server slash. 11 00:00:41,610 --> 00:00:43,150 Slash Google. 12 00:00:43,170 --> 00:00:48,540 Our application will then for them onto Google servers and after the user grants permission to our application 13 00:00:48,930 --> 00:00:56,190 they will be kicked back to our server specifically to the route of local host Colin 5000 slash off 14 00:00:56,280 --> 00:00:59,000 slash Google slash callback. 15 00:00:59,790 --> 00:01:05,490 So the last thing we have to do to test this flow out is make sure that we put together some configuration 16 00:01:05,490 --> 00:01:13,470 to say hey whenever a user goes to slash or slash Google we should then start the entire process being 17 00:01:13,470 --> 00:01:15,040 managed by passport. 18 00:01:15,060 --> 00:01:17,880 So thats the last little piece we have to put together. 19 00:01:17,970 --> 00:01:24,510 Remember how we had said that we use Express to do different things based on what route a user visits 20 00:01:24,590 --> 00:01:26,610 we put together a route handler. 21 00:01:26,610 --> 00:01:28,870 And so thats exactly what were going to do right now. 22 00:01:28,920 --> 00:01:33,730 We're going to put together a little route handler inside of our application that makes sure that the 23 00:01:33,730 --> 00:01:36,640 user gets kicked into this passport flow. 24 00:01:37,230 --> 00:01:37,510 All right. 25 00:01:37,540 --> 00:01:43,560 I mean to change back over to my next guest file and then directly underneath the passport you statement 26 00:01:44,340 --> 00:01:47,670 we're going to add a single route handler. 27 00:01:47,670 --> 00:01:52,740 Now remember we had spoken about rope handlers Previously we had said we referenced the Express app 28 00:01:52,770 --> 00:01:58,740 object we state the type of or method of the requests that we want to handle here. 29 00:01:58,740 --> 00:02:02,980 And so in this case we want to handle a get type HTP request. 30 00:02:03,300 --> 00:02:09,720 Then the first argument is the path that we want to handle which in this case is slash off slash Google. 31 00:02:10,110 --> 00:02:16,260 And then the second argument is some code to be executed whenever a request comes in to this route with 32 00:02:16,260 --> 00:02:18,330 this request type. 33 00:02:18,390 --> 00:02:24,480 Now in the past on the previous example we did we put an arrow function in here that was executed whenever 34 00:02:24,480 --> 00:02:26,020 a user came to this route. 35 00:02:26,340 --> 00:02:33,510 But this time around as a second argument we're going to tell express to involve passport and basically 36 00:02:33,690 --> 00:02:38,750 pass the user off to passport where they will then be kicked into this authentication flow. 37 00:02:40,490 --> 00:02:47,300 So it's the second argument we're going to say passport Daut authenticate we're going to give it a first 38 00:02:47,300 --> 00:02:54,070 argument of Google as a string and then a second argument that's going to be an object. 39 00:02:54,470 --> 00:02:59,190 It's going to have a property scope and we'll talk about what this is in just a second. 40 00:02:59,510 --> 00:03:06,110 And that will be an array with profile and email like so OK. 41 00:03:06,160 --> 00:03:07,090 So let's save this. 42 00:03:07,090 --> 00:03:09,350 And we're going to talk about what's going on here. 43 00:03:09,370 --> 00:03:14,380 So again whenever user it comes to this route we want to kick them into our waterflow which is being 44 00:03:14,380 --> 00:03:16,640 entirely managed by passport. 45 00:03:16,840 --> 00:03:22,570 So we are saying hey passport attempt to authenticate the user who is coming in on this route and use 46 00:03:22,570 --> 00:03:24,870 the strategy called Google. 47 00:03:24,880 --> 00:03:30,310 Now one quick thing that is very confusing with Google with passport and remember this is one of the 48 00:03:30,400 --> 00:03:35,230 other complaints they had about Google is that some of the configuration you do it's kind of like whoa 49 00:03:35,230 --> 00:03:36,040 what's going on here. 50 00:03:36,040 --> 00:03:37,050 This is kind of weird. 51 00:03:37,180 --> 00:03:39,870 So I want to specifically point at this string right here. 52 00:03:39,880 --> 00:03:40,780 Google. 53 00:03:40,840 --> 00:03:42,660 So when you read google you might think OK. 54 00:03:42,680 --> 00:03:43,060 Yeah. 55 00:03:43,090 --> 00:03:43,960 You know that makes sense. 56 00:03:43,960 --> 00:03:46,780 We want to authenticate the user with Google. 57 00:03:46,780 --> 00:03:48,650 We want to use Google Earth. 58 00:03:48,700 --> 00:03:55,090 However if you look back up at all this configuration that we did right here we had never explicitly 59 00:03:55,090 --> 00:04:00,930 said Hey here is this Google strategy and it is called like the string Google. 60 00:04:00,940 --> 00:04:07,720 In other words we never specifically registered the strategy with passport and called it with a string 61 00:04:07,720 --> 00:04:08,290 of Google. 62 00:04:08,320 --> 00:04:11,590 So we never set up this identifier right here. 63 00:04:11,620 --> 00:04:13,700 So here's what's going on internally. 64 00:04:13,840 --> 00:04:21,250 Google's strategy has some little bit of code that says I am known as a strategy called Google like 65 00:04:21,340 --> 00:04:22,690 the string Google. 66 00:04:22,720 --> 00:04:28,990 So hey passport when you load me up if anyone attempts to authenticate and say authenticate with a string 67 00:04:29,050 --> 00:04:32,650 of Google use me use this strategy right here. 68 00:04:32,680 --> 00:04:33,370 OK. 69 00:04:33,760 --> 00:04:40,720 So again the Google strategy has an internal identifier of Google and that's how passport knows to take 70 00:04:40,720 --> 00:04:46,480 the string right here and go and find this strategy that has been already wired up to it. 71 00:04:46,480 --> 00:04:46,760 OK. 72 00:04:46,780 --> 00:04:48,040 So that's the first argument. 73 00:04:48,040 --> 00:04:52,540 Now the second argument is an options object and we passed in scope right here. 74 00:04:52,870 --> 00:04:59,890 The scope specifies to Google like the actual Google servers what access we want to have inside of this 75 00:04:59,980 --> 00:05:01,470 user's profile. 76 00:05:01,480 --> 00:05:06,940 So in other words we are asking Google to give us access to this user's profile information and their 77 00:05:06,970 --> 00:05:09,750 e-mail address as well. 78 00:05:10,120 --> 00:05:13,780 These two strings that I passed in here are not randomly made up. 79 00:05:13,780 --> 00:05:19,090 So Google internally has a list of all the different scopes or permissions that we can ask for from 80 00:05:19,090 --> 00:05:26,530 a user's account so we can also ask for say the ability to read a user's contact list or read all the 81 00:05:26,530 --> 00:05:31,080 images inside of their Google Drive account or read all of their e-mails. 82 00:05:31,090 --> 00:05:33,260 Those are different scopes that we can ask for. 83 00:05:33,280 --> 00:05:38,910 And side of the process in this case we are just getting access to the profile in e-mail. 84 00:05:39,010 --> 00:05:42,970 I don't really care about any of these for our application like they don't really make a difference 85 00:05:42,970 --> 00:05:44,000 for our application. 86 00:05:44,020 --> 00:05:51,420 I just want to give you an example of how we can ask for very specific pieces of a user's account. 87 00:05:51,460 --> 00:05:51,870 OK. 88 00:05:51,910 --> 00:05:55,180 So I think they are now ready to test this out inside the browser. 89 00:05:55,180 --> 00:05:57,600 We have set up our handler. 90 00:05:57,670 --> 00:06:03,220 We've said that when ever someone visits the route or slash Google they should be directed into the 91 00:06:03,220 --> 00:06:05,090 palace for authentication flow. 92 00:06:05,110 --> 00:06:06,770 So I want to now test this out. 93 00:06:06,970 --> 00:06:11,050 I'm going to tell you right now that when we test this we're going to get a very small error and that's 94 00:06:11,050 --> 00:06:17,380 totally OK it's because I want to draw like very specific attention to this one aspect of authentication 95 00:06:17,500 --> 00:06:18,480 or lot in general. 96 00:06:18,490 --> 00:06:18,730 OK. 97 00:06:18,730 --> 00:06:20,490 So we're going to get there but that's totally OK. 98 00:06:20,530 --> 00:06:23,020 We're going to fix it up very quickly. 99 00:06:23,380 --> 00:06:28,270 So let's first make sure that our servers running to do so will change back over to our terminal. 100 00:06:28,270 --> 00:06:35,230 I'm still inside my server directory and I'll start up the server with node index dot J.S. and that's 101 00:06:35,230 --> 00:06:42,160 going to start the server up then I'm going to open up a new browser tab and remember to get Flash Google 102 00:06:42,580 --> 00:06:46,770 on our server which is running on localhost Colan 5000. 103 00:06:47,080 --> 00:06:51,690 So we're going to say look a close call and 5000 slash off slash Google. 104 00:06:51,850 --> 00:06:52,710 Now when we go there 105 00:06:55,390 --> 00:06:59,720 Express is going to see that we are making a request to Google. 106 00:06:59,760 --> 00:07:05,050 It's going to access that route Candler that we just put together and it's going to direct our request 107 00:07:05,080 --> 00:07:07,040 into this big old passport flap. 108 00:07:07,150 --> 00:07:07,970 So let's get to it. 109 00:07:07,990 --> 00:07:09,480 Let's see what happens. 110 00:07:09,490 --> 00:07:16,340 So hit enter and as you can see we successfully got redirected over to Google. 111 00:07:16,360 --> 00:07:21,680 So like something good happened here like we are clearly at Google we are doing something with a cloth. 112 00:07:21,850 --> 00:07:26,830 But very quickly you'll notice that we've got a nice big error message on the screen with an arrow that 113 00:07:26,830 --> 00:07:29,430 says redirect you are I mismatch. 114 00:07:29,610 --> 00:07:33,400 And so this is a very important air to see right here because this is something that you're very likely 115 00:07:33,400 --> 00:07:36,410 to see whenever you are setting up a life for yourself. 116 00:07:36,520 --> 00:07:42,220 And it also will give you a little bit more insight into what is going on under the hood with a laugh. 117 00:07:42,220 --> 00:07:46,630 So let's take a quick break and when we come back we're going to fix up this error message and then 118 00:07:46,630 --> 00:07:48,210 test out our application again.