1
00:00:00,000 --> 00:00:06,000
[? Music ?] [Code Racer] [OAuth and Facebook Applications]

2
00:00:06,000 --> 00:00:10,000
With Code Racer, we decided that we were going to allow people to log in using Facebook.

3
00:00:10,000 --> 00:00:13,000
This was going to be a lot easier and quicker than writing 

4
00:00:13,000 --> 00:00:15,000
our own authentication system.

5
00:00:15,000 --> 00:00:18,000
But in order to understand how Facebook works,

6
00:00:18,000 --> 00:00:22,000
first we have to understand the concept of OAuth.

7
00:00:22,000 --> 00:00:26,000
The way OAuth works is with the concept of clients and resources.

8
00:00:26,000 --> 00:00:30,000
Instead of me uploading all of my data to each different site I go to,

9
00:00:30,000 --> 00:00:34,000
I can just have the servers talk to each other.

10
00:00:34,000 --> 00:00:38,000
As an example, let's take a picture site called PicMonger,

11
00:00:38,000 --> 00:00:42,000
and I want to give PicMonger access to my Facebook friend list and pictures.

12
00:00:42,000 --> 00:00:46,000
Instead of giving PicMonger my Facebook login and password,

13
00:00:46,000 --> 00:00:50,000
using OAuth I can just give them access to certain resources

14
00:00:50,000 --> 00:00:53,000
and let Facebook protect that for me.

15
00:00:53,000 --> 00:00:57,000
Let's say I actually do want to give PicMonger access.

16
00:00:57,000 --> 00:01:00,000
In OAuth terms, I would be the client,

17
00:01:00,000 --> 00:01:03,000
and Facebook has my data or resources,

18
00:01:03,000 --> 00:01:07,000
and Facebook would be classified as the resource owner.

19
00:01:07,000 --> 00:01:11,000
What would happen is I request authorization from the resource owner,

20
00:01:11,000 --> 00:01:13,000
who in this case is Facebook.

21
00:01:13,000 --> 00:01:18,000
The resource owner responds back with one of a few different grant types.

22
00:01:18,000 --> 00:01:23,000
In this case, with using OAuth, we get back a code.

23
00:01:23,000 --> 00:01:26,000
Finally, the client, in this case, me,

24
00:01:26,000 --> 00:01:33,000
uses the authorization grant to get an access token from the authorization server,

25
00:01:33,000 --> 00:01:36,000
and then the client sends the access token we get back 

26
00:01:36,000 --> 00:01:40,000
to the resource server, which then responds with the protected resource,

27
00:01:40,000 --> 00:01:44,000
which in this case is my Facebook data.

28
00:01:44,000 --> 00:01:47,000
Now that we know the basics of how Facebook and OAuth work,

29
00:01:47,000 --> 00:01:51,000
let's go ahead and sign up to be a Facebook developer.

30
00:01:51,000 --> 00:01:56,000
That will allow us to create applications that can be logged into via Facebook.

31
00:01:56,000 --> 00:01:59,000
Once we're in Facebook, scroll down and click on the developer's link

32
00:01:59,000 --> 00:02:03,000
at the bottom of the page.

33
00:02:03,000 --> 00:02:07,000
This takes you to the Facebook developer site.

34
00:02:07,000 --> 00:02:09,000
Click "Get Started."

35
00:02:09,000 --> 00:02:15,000
Once the Tutorial page loads, click on "Step 1: Create a Facebook Application."

36
00:02:15,000 --> 00:02:20,000
In order to do that, you'll need to go to the Developer App.

37
00:02:20,000 --> 00:02:23,000
Then click on "Create a New App."

38
00:02:23,000 --> 00:02:29,000
We'll call our application "Test Authentication,"

39
00:02:29,000 --> 00:02:35,000
and agree to the Facebook platform policies after reading them thoroughly.

40
00:02:35,000 --> 00:02:37,000
Then click "Continue."

41
00:02:37,000 --> 00:02:45,000
At this point, you'll have to fill in the CAPTCHA.

42
00:02:45,000 --> 00:02:47,000
Then click "Submit."

43
00:02:47,000 --> 00:02:51,000
Now we can see our application preferences load.

44
00:02:51,000 --> 00:02:55,000
We don't have to worry about the application display name

45
00:02:55,000 --> 00:02:58,000
or application domain just yet.

46
00:02:58,000 --> 00:03:02,000
We do have to set our preferences for how

47
00:03:02,000 --> 00:03:05,000
the application will integrate with Facebook.

48
00:03:05,000 --> 00:03:07,000
We're going to check the website button.

49
00:03:07,000 --> 00:03:10,000
At this point, it will ask for a website.

50
00:03:10,000 --> 00:03:14,000
Since we're going to be developing this application locally at first

51
00:03:14,000 --> 00:03:20,000
on our own computer, we'll enter "local host" as the site URL.

52
00:03:20,000 --> 00:03:30,000
Also, we're going to be using port 3000, so enter that here.

53
00:03:30,000 --> 00:03:35,000
It's important to also add a trailing slash for the site URL

54
00:03:35,000 --> 00:03:41,000
or else you'll encounter errors later on that can be difficult to debug.

55
00:03:41,000 --> 00:03:43,000
Click on "Save Changes,"

56
00:03:43,000 --> 00:03:49,000
and you come back to the application basic settings screen.

57
00:03:49,000 --> 00:03:52,000
You can also customize the authentication dialog.

58
00:03:52,000 --> 00:03:55,000
This is the Facebook authentication dialog that pops up

59
00:03:55,000 --> 00:03:58,000
when your application requests access.

60
00:03:58,000 --> 00:04:00,000
We don't want to change any of these things right now

61
00:04:00,000 --> 00:04:05,000
since we're just doing an example.

62
00:04:05,000 --> 00:04:09,000
If you wanted to add other developers and testers to the account,

63
00:04:09,000 --> 00:04:14,000
you could do so inside of the roles screen.

64
00:04:14,000 --> 00:04:17,000
Let's click back to settings.

65
00:04:17,000 --> 00:04:21,000
We can see the name of our application up here.

66
00:04:21,000 --> 00:04:26,000
We'll also need the application ID and application secret 

67
00:04:26,000 --> 00:04:29,000
when we start our test application.

68
00:04:29,000 --> 00:04:31,000
That happens in the next video.