1
00:00:00,000 --> 00:00:05,000
[??] [CODE/RACER - Authorization with Facebook]

2
00:00:05,000 --> 00:00:08,000
Now that we have our skeleton application working,

3
00:00:08,000 --> 00:00:12,000
we can get to the fun stuff of logging in with Facebook.

4
00:00:12,000 --> 00:00:16,000
First, we're going to create a layout so that we can actually do this.

5
00:00:16,000 --> 00:00:20,000
Let's go back to our terminal and make a views directory.

6
00:00:22,000 --> 00:00:25,000
Inside of our views directory we'll create a layout template.

7
00:00:28,000 --> 00:00:32,000
We'll also create a homepage.

8
00:00:34,000 --> 00:00:40,000
And finally, we'll create a page to display when somebody has successfully signed  in.

9
00:00:45,000 --> 00:00:49,000
Now that we have these created, let's open up the code.

10
00:00:49,000 --> 00:00:55,000
We're just going to create some simple HTML inside of our layout.eco file.

11
00:01:19,000 --> 00:01:24,000
Now that we have our layout set up, let's open up the homepage.

12
00:01:24,000 --> 00:01:28,000
Let's just welcome everybody and ask them to log in.

13
00:01:37,000 --> 00:01:42,000
We haven't created the login endpoint inside of our application yet,

14
00:01:42,000 --> 00:01:49,000
but we should see this screen if we tell the application to render the home.eco template.

15
00:01:53,000 --> 00:01:58,000
Let's run our supervisor again and go to the homepage.

16
00:02:00,000 --> 00:02:03,000
Now let's reload it.

17
00:02:04,000 --> 00:02:07,000
We can see we have a link to log in.

18
00:02:07,000 --> 00:02:12,000
This is probably going to error out since we haven't set up the login endpoint yet,

19
00:02:12,000 --> 00:02:15,000
but let's click it anyway.

20
00:02:15,000 --> 00:02:19,000
And we see we get an error message just like we were expecting.

21
00:02:19,000 --> 00:02:21,000
Now when we hit the login endpoint, 

22
00:02:21,000 --> 00:02:26,000
this is where we want to have Facebook authorization kick in.

23
00:02:26,000 --> 00:02:29,000
Let's load up the Facebook JS documentation

24
00:02:29,000 --> 00:02:32,000
in order to see how we do that.

25
00:02:32,000 --> 00:02:37,000
It looks like we redirect them by calling facebook.getAuthorizeUrl.

26
00:02:37,000 --> 00:02:41,000
Let's go ahead and set that up inside of our code.

27
00:02:49,000 --> 00:02:53,000
So we tell Express that we want to redirect,

28
00:02:58,000 --> 00:03:04,000
and we call facebook.getAuthorizeUrl.

29
00:03:04,000 --> 00:03:09,000
This is where we have to send in our application ID in secret 

30
00:03:09,000 --> 00:03:12,000
that we requested earlier from Facebook.

31
00:03:12,000 --> 00:03:24,000
So we send in the client_id, and that's located inside of our globals variable.

32
00:03:26,000 --> 00:03:28,000
Now we have to give it a redirect_uri.

33
00:03:28,000 --> 00:03:31,000
This is where Facebook will redirect 

34
00:03:31,000 --> 00:03:35,000
after somebody has successfully authorized our application.

35
00:03:35,000 --> 00:03:43,000
We're going to create another endpoint for that later called authenticated, or authed.

36
00:03:43,000 --> 00:03:46,000
For now we just need to tell it where to go.

37
00:03:54,000 --> 00:03:57,000
The last thing we add is the scope key.

38
00:03:57,000 --> 00:03:59,000
Facebook lets you define different scopes 

39
00:03:59,000 --> 00:04:05,000
for what sort of information it will allow you to return based on what the user authorizes.

40
00:04:05,000 --> 00:04:10,000
We're going to ask users for their email address.

41
00:04:13,000 --> 00:04:16,000
If you'd like to find out what else can be accessed via the Facebook API,

42
00:04:16,000 --> 00:04:18,000
you can check out the documentation.

43
00:04:18,000 --> 00:04:20,000
[https://developers.facebook.com/docs/]

44
00:04:20,000 --> 00:04:24,000
Now that we have our redirect set up, let's see how that works.

45
00:04:24,000 --> 00:04:30,000
What should happen is when we click Log In, it should redirect us to Facebook

46
00:04:30,000 --> 00:04:33,000
and ask us to authenticate.

47
00:04:33,000 --> 00:04:39,000
After that, Facebook should redirect us back to this authed endpoint,

48
00:04:39,000 --> 00:04:44,000
at which point we'll probably get an error because we haven't created it yet.

49
00:04:44,000 --> 00:04:48,000
So here we are back on our homepage, and let's click Log In.

50
00:04:48,000 --> 00:04:53,000
Here we can see our Test Authentication Log In page.

51
00:04:53,000 --> 00:04:57,000
We can click Go to App,

52
00:04:57,000 --> 00:05:03,000
and here we see we have the error that we were expecting, "can't get authed,"

53
00:05:03,000 --> 00:05:05,000
because we haven't set up that endpoint yet.

54
00:05:05,000 --> 00:05:08,000
Let's go ahead and do that now.

55
00:05:15,000 --> 00:05:20,000
At this point we need to get the access token from Facebook

56
00:05:20,000 --> 00:05:23,000
so that we can store it inside of our session.

57
00:05:23,000 --> 00:05:29,000
Let's go back to the documentation for facebook.js and see how we do that.

58
00:05:29,000 --> 00:05:33,000
It looks like we send in our application ID and our application secret

59
00:05:33,000 --> 00:05:36,000
and then grab the code that Facebook sends back to us.

60
00:05:36,000 --> 00:05:39,000
Let's go ahead and do that now.

61
00:05:43,000 --> 00:05:47,000
Remember, we stored this inside of our globals variable.

62
00:05:53,000 --> 00:05:57,000
Next, we'll grab the code that Facebook sends back.

63
00:06:00,000 --> 00:06:05,000
And finally, we send in the URL that we gave it.

64
00:06:08,000 --> 00:06:11,000
Then we'll see what Facebook sends back.

65
00:06:11,000 --> 00:06:17,000
We know it sends back an error callback as well as an access token and refresh token.

66
00:06:23,000 --> 00:06:29,000
Once we successfully have these, we'll set them inside of our session.

67
00:06:42,000 --> 00:06:47,000
And finally, let's go ahead and redirect this to another endpoint

68
00:06:47,000 --> 00:06:51,000
where we can show the status, and we'll call that fbstatus.

69
00:07:00,000 --> 00:07:03,000
Now let's create that endpoint.

70
00:07:10,000 --> 00:07:16,000
At this point we want to make an API call to Facebook to get our information.

71
00:07:16,000 --> 00:07:19,000
We can do that now that we're logged in to Facebook

72
00:07:19,000 --> 00:07:22,000
and Facebook has sent us back an access token.

73
00:07:22,000 --> 00:07:26,000
We do that using the apiCall method.

74
00:07:33,000 --> 00:07:40,000
And we send it using the access token that we should already have inside of the session.

75
00:07:50,000 --> 00:07:54,000
Facebook is going to send back our data inside of the body variable that we have

76
00:07:54,000 --> 00:07:56,000
inside of this callback.

77
00:07:56,000 --> 00:08:00,000
For right now we're just going to display it,

78
00:08:00,000 --> 00:08:02,000
so we'll render the authenticated template

79
00:08:02,000 --> 00:08:07,000
and assign the data to a variable called facebook_data.

80
00:08:17,000 --> 00:08:20,000
Now let's open up the template.

81
00:08:26,000 --> 00:08:29,000
We'll just display the data that we have.

82
00:08:49,000 --> 00:08:54,000
Now when we reload this, we should see all of the data that Facebook sends back to us.

83
00:08:54,000 --> 00:08:58,000
In order to do this, we're going to have to log in again,

84
00:08:58,000 --> 00:09:02,000
so let's go back to our homepage and click on Log In.

85
00:09:02,000 --> 00:09:08,000
We've already told Facebook that it's okay to send this data to our application,

86
00:09:08,000 --> 00:09:10,000
so it should just redirect us.

87
00:09:10,000 --> 00:09:17,000
And you can see in the title bar we've got the fbstatus endpoint that we've been redirected to,

88
00:09:17,000 --> 00:09:21,000
and it has successfully rendered our authenticated template

89
00:09:21,000 --> 00:09:25,000
and it's returned all of the information that I've allowed inside of my Facebook account,

90
00:09:25,000 --> 00:09:27,000
including the email.

91
00:09:27,000 --> 00:09:30,000
And that's how you authenticate with Facebook.