Facebook Authentication11:03 with Andrew Chalkley
In this video we'll integrate Facebook's Passport Strategy in to our application.
- Your Facebook OAuth Apps
Windows Environment Variables Command
SET GITHUB_CLIENT_ID=xxxx & GITHUB_CLIENT_SECRET=xxxx & FACEBOOK_APP_ID=xxx & FACEBOOK_APP_SECRET=xxx & node bin\www
We have the GitHub strategy in place, now it's time for Facebook. 0:00 Each strategy differ slightly because each provider 0:05 implements OAuth slightly differently and have different privacy settings for users. 0:09 To illustrate this, let's look at possible Facebook documentation. 0:15 Creating this strategy looks familiar, almost identical to GitHub, 0:23 except the Facebook app ID and the Facebook secret. 0:28 Further down in the FAQ section, there's a question, 0:34 how do I obtain a user profile with specific fields? 0:39 It's says the Facebook profile information 0:45 contains a lot of information about the user. 0:48 By default, not all fields in the profile are returned. 0:51 The fields needed by an application can be indicated 0:55 by setting the profileFields option. 0:58 This means, we have to provide the profileFields option, 1:03 in order to satisfy the requirements. 1:06 The profileFields of ID, display, photos, and email, should do that for us. 1:09 Facebook won't freely give this information, 1:16 if we don't specifically ask for it in the authentication request. 1:18 We will also need to ask for permission 1:23 when a user authorizes with the scope options of email. 1:27 When a user authorizes our application, 1:33 Facebook will notify them that we're requesting their email address. 1:36 Let's copy and 1:42 paste this strategy into our application under the GitHub configuration. 1:43 Let's update Facebook ID and Facebook secret as environment variables. 2:07 Let's modify the callback URL to match our convention. 2:18 Instead of callback, let's have return. 2:23 This is also a possible strategy or middleware. 2:28 We'll need to pass all of this in the passport's use method, 2:32 We also need a call back to generate or find a user. 2:41 We can use the same function from before and give it a name. 2:47 GenerateOrFindUser. 2:57 And then pass this in as a reference, into both of our strategies. 3:02 This function is only one way of handling multiple social media accounts. 3:13 Every time someone logs in with a different social media account that share 3:18 the same email, we'll always update their name and photo. 3:22 You can always have a more complex user model that has multiple profile images and 3:30 references to their social media IDs for 3:36 more deeper integration.1 Since we're only using it for 3:38 logging in, using a user's email is sufficient for our use case. 3:43 Remember, at the top to require the FacebookStrategy. 3:48 Let's not forget to npm install 4:05 passport-facebook with the save flag too. 4:09 Let's jump to the Facebook developer portal to create a client ID in secret. 4:22 This can be found at developers.facebook.com. 4:27 Because, I'm a developer already, I don't need to register as a developer again. 4:30 You may have to click on a register button if you're not already signed up. 4:36 Go to My Apps and then Add a New App. 4:41 Click basic setup. 4:47 Remember, when we are creating GitHub applications 4:50 I said we'll be using different IDs for production and testing. 4:53 Facebook has this concept built in. 4:57 This application that we're going to produce is a production application, 5:00 And then we'll create a test application in a moment. 5:07 Let's call it Bookworm. 5:11 Add in an email address. 5:14 And then select a category. 5:22 Books. 5:24 Submit and complete the verification step so 5:26 that Facebook knows you're human. 5:30 Then select Bookworm at the top left and create a new test app. 5:41 The name is pre-populated with Bookworm- Test1. 5:47 Submit that, verify that you're human again. 5:51 And head over to basic settings. 6:01 This is where we'll tell Facebook, the domain we're using for this application. 6:05 At the bottom add a platform website. 6:11 Enter the site URL in. 6:16 And hit Enter. 6:21 Then in App Domains include localhost. 6:24 Save changes. 6:30 And in your production environment, you'll have to include your real domain names. 6:33 At the top of the Settings page, you can see the App ID and the secret. 6:43 We'll need these when we start our application, so keep this page open. 6:50 Before we start our application, there's one final step. 6:56 Creating the authentication routes. 7:00 Open up auth.js file and 7:04 literally copy and paste the GitHub URLs. 7:07 We can swap out GitHub with Facebook. 7:15 Remember we need to add the scope of email to the authentication request 7:23 to Facebook This instructs Facebook to ask for 7:29 permission from the user to share their email addresses with our application. 7:38 Save this file and start the application. 7:45 Go to the terminal and update the start command. 7:49 By including the Facebook app ID. 7:56 And then the Facebook app secret. 8:04 Oops, it looks like we've got the syntax error. 8:18 Let's just check that out. 8:20 There it is. 8:41 Let's run the application again and visit it in our web browser. 8:45 Log out if you're still logged in. 8:55 Visit the login page. 8:59 Click on Facebook. 9:00 And notice how that Facebook presents us with a dialogue 9:07 requesting public profile information and e-mail address. 9:12 It's not asking for permission to post on your wall. 9:18 Nice! 9:21 That's because the scope option we passed to the authenticate call. 9:22 Approve, and you should now be signed using Facebook. 9:27 Notice how my profile picture image is that of my Facebook profile and 9:33 not my GitHub. 9:38 That's because when we sign in our, 9:40 our generateOrFindUser callback updates our model. 9:42 To see this in action, let's look in Mongo. 9:48 Using our bookworm-oauth database, 9:59 we can find all the users. 10:04 We see one user with a Facebook profile image. 10:11 If we sign out and then re-sign in with 10:19 GitHub And 10:24 we run the same query again. 10:31 We get the same users with the user ID. 10:34 But now it has a profile image from GitHub. 10:39 And there you have it, 10:44 you can now use Passport to add social network authentication to your site. 10:45 OAuth is a pain to implement yourself. 10:51 Passport takes away some of that pain when adding OAuth to your 10:54 express applications and it's a great tool to have at your disposal. 10:58
You need to sign up for Treehouse in order to download course files.Sign up