Authentication with Facebook and OAuth

[? Music ?] [Code Racer] [OAuth and Facebook Applications] 0:00 With Code Racer, we decided that we were going to allow people to log in using Facebook. 0:06 This was going to be a lot easier and quicker than writing 0:10 our own authentication system. 0:13 But in order to understand how Facebook works, 0:15 first we have to understand the concept of OAuth. 0:18 The way OAuth works is with the concept of clients and resources. 0:22 Instead of me uploading all of my data to each different site I go to, 0:26 I can just have the servers talk to each other. 0:30 As an example, let's take a picture site called PicMonger, 0:34 and I want to give PicMonger access to my Facebook friend list and pictures. 0:38 Instead of giving PicMonger my Facebook login and password, 0:42 using OAuth I can just give them access to certain resources 0:46 and let Facebook protect that for me. 0:50 Let's say I actually do want to give PicMonger access. 0:53 In OAuth terms, I would be the client, 0:57 and Facebook has my data or resources, 1:00 and Facebook would be classified as the resource owner. 1:03 What would happen is I request authorization from the resource owner, 1:07 who in this case is Facebook. 1:11 The resource owner responds back with one of a few different grant types. 1:13 In this case, with using OAuth, we get back a code. 1:18 Finally, the client, in this case, me, 1:23 uses the authorization grant to get an access token from the authorization server, 1:26 and then the client sends the access token we get back 1:33 to the resource server, which then responds with the protected resource, 1:36 which in this case is my Facebook data. 1:40 Now that we know the basics of how Facebook and OAuth work, 1:44 let's go ahead and sign up to be a Facebook developer. 1:47 That will allow us to create applications that can be logged into via Facebook. 1:51 Once we're in Facebook, scroll down and click on the developer's link 1:56 at the bottom of the page. 1:59 This takes you to the Facebook developer site. 2:03 Click "Get Started." 2:07 Once the Tutorial page loads, click on "Step 1: Create a Facebook Application." 2:09 In order to do that, you'll need to go to the Developer App. 2:15 Then click on "Create a New App." 2:20 We'll call our application "Test Authentication," 2:23 and agree to the Facebook platform policies after reading them thoroughly. 2:29 Then click "Continue." 2:35 At this point, you'll have to fill in the CAPTCHA. 2:37 Then click "Submit." 2:45 Now we can see our application preferences load. 2:47 We don't have to worry about the application display name 2:51 or application domain just yet. 2:55 We do have to set our preferences for how 2:58 the application will integrate with Facebook. 3:02 We're going to check the website button. 3:05 At this point, it will ask for a website. 3:07 Since we're going to be developing this application locally at first 3:10 on our own computer, we'll enter "local host" as the site URL. 3:14 Also, we're going to be using port 3000, so enter that here. 3:20 It's important to also add a trailing slash for the site URL 3:30 or else you'll encounter errors later on that can be difficult to debug. 3:35 Click on "Save Changes," 3:41 and you come back to the application basic settings screen. 3:43 You can also customize the authentication dialog. 3:49 This is the Facebook authentication dialog that pops up 3:52 when your application requests access. 3:55 We don't want to change any of these things right now 3:58 since we're just doing an example. 4:00 If you wanted to add other developers and testers to the account, 4:05 you could do so inside of the roles screen. 4:09 Let's click back to settings. 4:14 We can see the name of our application up here. 4:17 We'll also need the application ID and application secret 4:21 when we start our test application. 4:26 That happens in the next video. 4:29