Adding Facebook oAuth to our App
Part 1 - Setting up and Configuring Facebook Developer App
- Project Repository: https://github.com/jsified-brains/momentz4ever-web-ng4/
- Branch specific for this task: https://github.com/jsified-brains/momentz4ever-web-ng4/tree/facebook-oauth
1. Create a facebook developer’s account by following the steps explained in this short video. (https://youtu.be/mT3dFdPMLps)
2. Add an app from your facebook developer’s account. For the application that we are developing, we’ll create an app named ‘momentz4ever’ in the Facebook developer account.
i. Go to your facebook developer account -https://developers.facebook.com.
ii. Click on the top-left ‘My Apps’ button and from the pop-over menu, select ‘Add a New App’ button.
iii. ‘Create New App ID’ window would pop up. Enter a name for the app.
iv. If prompted for captcha security check, enter the captcha text to verify you are not a robot trying to create the app and click Submit :
3. The app should get created and you will be presented with the ‘Select a Product’ page. Or else, you can also go to ‘Select Product’ from the created app’s dashboard left-side menu panel option - ‘Add a Product’.
4. Because we are planning to use the Facebook oAuth for our momentz-4-ever angular application, we will select ‘Facebook Login’ from the above page.
5. Now go to the newly created app’s dashboard page as below:
6. From the App’s dashboard page and go to its settings (Click ‘Settings’ on the left side menu as seen in the above screen).
7. On the App’s settings page, click ‘Add Platform’ and the select ‘website’ as a platform.
8. Once you add ‘Website’ as a platform, you should see ‘Website’ section in the Facebook App’s settings page.
Under the ‘Website’ section, enter http://localhost:9000 as Site URL. This is because as of now we are in the development phase of our app and the app is being served locally by the webpack at port 9000
Also add localhost in App Domains field:
9. Save the changes we made above to the app settings:
Setting up Test Accounts for our Facebook App
1. From the App’s dashboard page, select ‘Roles → Test Users’ from the left-side menu panel on the page.
2. Click on ‘Add’ button at the top of Test Users table
3. In the ‘Create Test Users’ pop-up, select the number of test accounts to be created and other settings as shown in the below screen-shot.
4. This will create test accounts as shown in the screen-shot below.
5. Click on ‘Edit button next to each of the test-account to setup its password. Select the ‘Change name and password for this test user’ option from the pop-up menu.
6. Next click on ‘App Review’ from the left-side panel of the app’s dashboard. Here you would see the app is not set as public. This is because our app is still under development and is not available to public yet. You can keep this setting as is for now.
7. Next click on ‘Facebook Login’ from the left-side panel of the app’s dashboard.
Here, set the Facebook login settings as shown in the screen-shot below
This completes our setup and configuration of Facebook developer app. In the next task, we will see how to use Facebook SDK to implement Facebook oAuth in our angular-4 app.
