Facebook Login Oauth2 from Angular 6

Login with Facebook

Logging in with Facebook and other social media platforms has made the life easier for both users and developers.

This blog will help you to develop a basic Angular app to log-in with Facebook. Though, this blog walks you through with writing code in latest version of Angular as of now i.e Angular 6, you can still achieve the same with minute changes using previous versions i.e Angular 2, 4, 5.

Before you start writing code, you need some prerequisites that need your app to integrate with Facebook Login service.

• Facebook App ID
• Facebook SDK for Javascript

To implement Facebook Login, you need a Facebook App ID, which you can create and retrieve in the App Dashboard.

Start by creating a Facebook App ID to register your app with Facebook at App Dashboard.

• Click here to go to App Dashboard
• If you are not logged in, log in with your credentials.
• Once you are redirected to the App dashboard, click on “Add a new app”.

• Enter your Display Name of your app and Contact Email.
• Click “Create App ID”.

• That’s it!! You have created an APP ID which you can see on the top.
• Now to integrate Facebook Login, you need to add “Facebook Login” product.
• Click on “Set Up” button of “Facebook Login” section.

• Now select “Web” since you are creating an Angular web application.

• Enter your URL of your website. If you are running on your localhost and port 4200, you can add “localhost:4200”. Else change it as per your configuration.

• Click “Save”.
• Now Click “Continue” and repeat the same and just go through the description to understand it.
• Don’t worry! we will go step by step.

Great!!! Now create a login component in your Application.

• Import NgOnInit and add the following code to download Facebook SDK on load in your component.ts file.
• Declare a variable FB after the imports.

import { Component, OnInit } from '@angular/core';
declare var FB: any;

• Set the appId property to your appid.
• Now you can access Facebook Graph API.

ngOnInit() {

    (window as any).fbAsyncInit = function() {
      FB.init({
        appId      : '394951114363257',
        cookie     : true,
        xfbml      : true,
        version    : 'v3.1'
      });
      FB.AppEvents.logPageView();
    };

    (function(d, s, id){
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement(s); js.id = id;
       js.src = "https://connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));

  }

• Now you can access Facebook Graph API by calling Facebook functions or calling graph APIs directly passing the required fields with access token.
• Add the Html code in your component.html file which is a button which call submitLogin() function.

<button type="button" class="btn" (click)="submitLogin();">Login with facebook</button>

• Now let’s define the submitLogin() function in the component.ts file which calls login api “FB.login()”.
• The function authenticates and returns back success with logged in user’s userid and access code on success.
• You can write your custom code to redirect to home page or create session, etc on success and error responses based on your requirement.

submitLogin(){
        console.log("submit login to facebook");
        // FB.login();
        FB.login((response)=>
            {
              console.log('submitLogin',response);
              if (response.authResponse)
              {
                //login success
                //login success code here
                //redirect to home page
               }
               else
               {
               console.log('User login failed');
             }
          });

      }

• That’s it!!! Try starting your Angular app and click the log in to Facebook button and you can see the Facebook dialog prompting for credentials.
• On success you can use Facebook Graph APIs to get more Facebook and Instagram info about user passing the access token you have received on successful login response.
• Now use the Facebook Graph APIs by passing the access token or by using Facebook functions. You can get clear Reference for Facebook Graph APIs HERE.

/* make the API call */
FB.api(
    "/{user-id}/",
    function (response) {
      if (response && !response.error) {
        /* handle the result */
      }
    }
);

• Now you have access to the fields Facebook offers (like user’s name, email, gender, interests, user photos, etc). Check out Graph API Explorer to see the fields you can get about a specific user.
• That’s IT!! Code On!!!

ERRORS:

• Just in case if you come across below error while calling your APIs

Error: “(#210) This call requires a Page access token.”

Solution: Check the fields you are trying to access. Some might not have permission.

Good Day!!!