Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In order to understand what's happening when we log in with Facebook, we need to understand what OAuth is. This video explains OAuth and Facebook login and walks you through signing up for a Facebook developer account to add an application.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[? 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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up