Authorization with Facebook Login and Facebook-JS Node Module

[??] [CODE/RACER - Authorization with Facebook] 0:00 Now that we have our skeleton application working, 0:05 we can get to the fun stuff of logging in with Facebook. 0:08 First, we're going to create a layout so that we can actually do this. 0:12 Let's go back to our terminal and make a views directory. 0:16 Inside of our views directory we'll create a layout template. 0:22 We'll also create a homepage. 0:28 And finally, we'll create a page to display when somebody has successfully signed in. 0:34 Now that we have these created, let's open up the code. 0:45 We're just going to create some simple HTML inside of our layout.eco file. 0:49 Now that we have our layout set up, let's open up the homepage. 1:19 Let's just welcome everybody and ask them to log in. 1:24 We haven't created the login endpoint inside of our application yet, 1:37 but we should see this screen if we tell the application to render the home.eco template. 1:42 Let's run our supervisor again and go to the homepage. 1:53 Now let's reload it. 2:00 We can see we have a link to log in. 2:04 This is probably going to error out since we haven't set up the login endpoint yet, 2:07 but let's click it anyway. 2:12 And we see we get an error message just like we were expecting. 2:15 Now when we hit the login endpoint, 2:19 this is where we want to have Facebook authorization kick in. 2:21 Let's load up the Facebook JS documentation 2:26 in order to see how we do that. 2:29 It looks like we redirect them by calling facebook.getAuthorizeUrl. 2:32 Let's go ahead and set that up inside of our code. 2:37 So we tell Express that we want to redirect, 2:49 and we call facebook.getAuthorizeUrl. 2:58 This is where we have to send in our application ID in secret 3:04 that we requested earlier from Facebook. 3:09 So we send in the client_id, and that's located inside of our globals variable. 3:12 Now we have to give it a redirect_uri. 3:26 This is where Facebook will redirect 3:28 after somebody has successfully authorized our application. 3:31 We're going to create another endpoint for that later called authenticated, or authed. 3:35 For now we just need to tell it where to go. 3:43 The last thing we add is the scope key. 3:54 Facebook lets you define different scopes 3:57 for what sort of information it will allow you to return based on what the user authorizes. 3:59 We're going to ask users for their email address. 4:05 If you'd like to find out what else can be accessed via the Facebook API, 4:13 you can check out the documentation. 4:16 [https://developers.facebook.com/docs/] 4:18 Now that we have our redirect set up, let's see how that works. 4:20 What should happen is when we click Log In, it should redirect us to Facebook 4:24 and ask us to authenticate. 4:30 After that, Facebook should redirect us back to this authed endpoint, 4:33 at which point we'll probably get an error because we haven't created it yet. 4:39 So here we are back on our homepage, and let's click Log In. 4:44 Here we can see our Test Authentication Log In page. 4:48 We can click Go to App, 4:53 and here we see we have the error that we were expecting, "can't get authed," 4:57 because we haven't set up that endpoint yet. 5:03 Let's go ahead and do that now. 5:05 At this point we need to get the access token from Facebook 5:15 so that we can store it inside of our session. 5:20 Let's go back to the documentation for facebook.js and see how we do that. 5:23 It looks like we send in our application ID and our application secret 5:29 and then grab the code that Facebook sends back to us. 5:33 Let's go ahead and do that now. 5:36 Remember, we stored this inside of our globals variable. 5:43 Next, we'll grab the code that Facebook sends back. 5:53 And finally, we send in the URL that we gave it. 6:00 Then we'll see what Facebook sends back. 6:08 We know it sends back an error callback as well as an access token and refresh token. 6:11 Once we successfully have these, we'll set them inside of our session. 6:23 And finally, let's go ahead and redirect this to another endpoint 6:42 where we can show the status, and we'll call that fbstatus. 6:47 Now let's create that endpoint. 7:00 At this point we want to make an API call to Facebook to get our information. 7:10 We can do that now that we're logged in to Facebook 7:16 and Facebook has sent us back an access token. 7:19 We do that using the apiCall method. 7:22 And we send it using the access token that we should already have inside of the session. 7:33 Facebook is going to send back our data inside of the body variable that we have 7:50 inside of this callback. 7:54 For right now we're just going to display it, 7:56 so we'll render the authenticated template 8:00 and assign the data to a variable called facebook_data. 8:02 Now let's open up the template. 8:17 We'll just display the data that we have. 8:26 Now when we reload this, we should see all of the data that Facebook sends back to us. 8:49 In order to do this, we're going to have to log in again, 8:54 so let's go back to our homepage and click on Log In. 8:58 We've already told Facebook that it's okay to send this data to our application, 9:02 so it should just redirect us. 9:08 And you can see in the title bar we've got the fbstatus endpoint that we've been redirected to, 9:10 and it has successfully rendered our authenticated template 9:17 and it's returned all of the information that I've allowed inside of my Facebook account, 9:21 including the email. 9:25 And that's how you authenticate with Facebook. 9:27