Adding Facebook oAuth to our App — Part 2

Part 2— Adding Facebook SDK to our app and using it to implement Facebook oAuth

- 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

In the Part-1 of this task story we created an App ID in our Facebook Developer account. In this part, we will add the Facebook SDK’s javascript client library to our Angular-4 app and use it to add Facebook Authentication to our app. We’ll need the App ID we created in part-1 to configure Facebook SDK client so that when it requests Facebook to allow our users to login using Facebook credentials, Facebook would know its our momentz-4-ever application that’s from whom the oAuth request is coming.

So let’s start.

1. Because we are going to use the Facebook SDK’s JavaScript client library in our Typescript files, we’ll need the type definitions of the library. For this we can install @types/facebook-js-sdk. Assuming your present working directory on the command/terminal window is the project folder, run npm command to install @types/facebook-js-sdk

npm install @types/facebook-js-sdk

Add this to the types array in tsconfig.json.

...
compilerOptions: {
       ...
       ...,
       "types": [
             "node", "jasmine", "facebook-js-sdk"
       ],
       ...
}
...
...

2. Outside of your project folder, create a file named Secrets.ts with the below code:

👆 above, replace the string ‘yourFacebookDeveloperAppId’ on line # 2 with the actual id of the facebook app that you might have created in Part-1

Since this file contains our Facebook App ID, something that we cannot have publicly available on our public GitHub repository, we have added this in a file outside of our project folder and thus this file won’t get pushed to GitHub.

3. Next, inside our project folder, under the ./src folder , create a file getFBSDK.ts with below code:

👆 above, we first imported the secrets.ts from the file we created in step 2 above and used itsfacebookAppId(line # 5) to assign itto appId key of the configuration object provided to FB.init function. This FB.init function gets called inside fbAsyncInit function that we assign to window object on line # 3.

The IIFE on line 13–19 is asynchronously loading facebook sdk, basically adding a <script> tag to the document with its src = "//connect.facebook.net/en_US/sdk.js" . Once this facebook SDK client script is loaded , I believe it calls the fbAsyncInit function that we have already set above on the global/window scope to initialize the FB object with the required configuration.

4. Next, lets import the above created getFBSDK.ts file in our app’s main.ts file so that its IIFE would get called when the bundled script by webpack gets added to index.html and we would have FB object from the SDK available to our app. ( Line # 4 below 👇)

5. Now that we have FB object from the Facebook’s Javascript SDK available in our app, we will use its login method on click of the ‘Login with Facebook’ button that we have in the login component.

Open the ./src/components/login/app-login.component.ts and update the code inside the onLoginClick() as below: (line # 12–24 below 👇)

Above, we are now using the FB object’s getLoginStatus method to see if the user is already logged into his facebook account on the device. In case the user is already connected to his/her facebook account, the response returned from getLoginStatus would have a status = ‘connected’, in which case we can directly route the user to home component.

If the user is not already logged into his/her facebook account, then we are calling FB.login method, that would open up the facebook login window on user’s device where user can enter his/her facebook account credentials. Once facebook authenticates the user we again navigate the user to home component.

6. Start the app by running the command ‘npm run build’. Webpack will build and start serving the app from localhost:9000.

Go to localhost:9000 on your web browser. Below page should appear.

7. Click on Login with Facebook button. (make sure Popup blocker is disabled for localhost:9000)

Facebook Login window should popup.

Facebook Login window should popup. Enter the email and password of one of the test-users that we have created in Part-1 of this task story.

8. Confirm to Facebook’s ‘Log In with Facebook’ window by clicking on Continue button.

Once successfully authenticated, you should get transferred to the home page of our application.

👏 Yay! We successfully implemented Facebook oAuth authentication in our application. In the next task story, we will add an angular service to get a list of albums objects and display those in a list on our Home page.