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
Now that we have our local Express application set up and configured with our Facebook credentials, we can implement Facebook login. This video walks you through using the "facebook-js" node module to add log in with Facebook to your site.
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
[??] [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
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