[??] [CODE/RACER - Authorization with Facebook]

Now that we have our skeleton application working,

we can get to the fun stuff of logging in with Facebook.

First, we're going to create a layout so that we can actually do this.

Let's go back to our terminal and make a views directory.

Inside of our views directory we'll create a layout template.

We'll also create a homepage.

And finally, we'll create a page to display when somebody has successfully signed in.

Now that we have these created, let's open up the code.

We're just going to create some simple HTML inside of our layout.eco file.

Now that we have our layout set up, let's open up the homepage.

Let's just welcome everybody and ask them to log in.

We haven't created the login endpoint inside of our application yet,

but we should see this screen if we tell the application to render the home.eco template.

Let's run our supervisor again and go to the homepage.

Now let's reload it.

We can see we have a link to log in.

This is probably going to error out since we haven't set up the login endpoint yet,

but let's click it anyway.

And we see we get an error message just like we were expecting.

Now when we hit the login endpoint,

this is where we want to have Facebook authorization kick in.

Let's load up the Facebook JS documentation

in order to see how we do that.

It looks like we redirect them by calling facebook.getAuthorizeUrl.

Let's go ahead and set that up inside of our code.

So we tell Express that we want to redirect,

and we call facebook.getAuthorizeUrl.

This is where we have to send in our application ID in secret

that we requested earlier from Facebook.

So we send in the client_id, and that's located inside of our globals variable.

Now we have to give it a redirect_uri.

This is where Facebook will redirect

after somebody has successfully authorized our application.

We're going to create another endpoint for that later called authenticated, or authed.

For now we just need to tell it where to go.

The last thing we add is the scope key.

Facebook lets you define different scopes

for what sort of information it will allow you to return based on what the user authorizes.

We're going to ask users for their email address.

If you'd like to find out what else can be accessed via the Facebook API,

you can check out the documentation.

[https://developers.facebook.com/docs/]

Now that we have our redirect set up, let's see how that works.

What should happen is when we click Log In, it should redirect us to Facebook

and ask us to authenticate.

After that, Facebook should redirect us back to this authed endpoint,

at which point we'll probably get an error because we haven't created it yet.

So here we are back on our homepage, and let's click Log In.

Here we can see our Test Authentication Log In page.

We can click Go to App,

and here we see we have the error that we were expecting, "can't get authed,"

because we haven't set up that endpoint yet.

Let's go ahead and do that now.

At this point we need to get the access token from Facebook

so that we can store it inside of our session.

Let's go back to the documentation for facebook.js and see how we do that.

It looks like we send in our application ID and our application secret

and then grab the code that Facebook sends back to us.

Let's go ahead and do that now.

Remember, we stored this inside of our globals variable.

Next, we'll grab the code that Facebook sends back.

And finally, we send in the URL that we gave it.

Then we'll see what Facebook sends back.

We know it sends back an error callback as well as an access token and refresh token.

Once we successfully have these, we'll set them inside of our session.

And finally, let's go ahead and redirect this to another endpoint

where we can show the status, and we'll call that fbstatus.

Now let's create that endpoint.

At this point we want to make an API call to Facebook to get our information.

We can do that now that we're logged in to Facebook

and Facebook has sent us back an access token.

We do that using the apiCall method.

And we send it using the access token that we should already have inside of the session.

Facebook is going to send back our data inside of the body variable that we have

inside of this callback.

For right now we're just going to display it,

so we'll render the authenticated template

and assign the data to a variable called facebook_data.

Now let's open up the template.

We'll just display the data that we have.

Now when we reload this, we should see all of the data that Facebook sends back to us.

In order to do this, we're going to have to log in again,

so let's go back to our homepage and click on Log In.

We've already told Facebook that it's okay to send this data to our application,

so it should just redirect us.

And you can see in the title bar we've got the fbstatus endpoint that we've been redirected to,

and it has successfully rendered our authenticated template

and it's returned all of the information that I've allowed inside of my Facebook account,

including the email.

And that's how you authenticate with Facebook.