Angular facebook login example

Facebook is most popular social website and another hand angular is also popular JS framework. Today we are going to learn Angular facebook login example. So let’s get start with the Angular facebook login example

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

Next, Click on Add a New App. The next screen will looks like this

Enter display name and click on the Create App ID

After clicking on the Create App ID the facebook will redirect you to the Select a Scenario screen here choose Integrate Facebook Login option and click on Confirm button. Now you are in the App Dashboard which will looks like this

Here choose the Settings then Basic menu in the left hand side, will open the setting page. Here enter your website url in the App Domain input box then click on the Save Changes

Next, We will dive in the code. To do that we need a new component for the login, I will work on the app.component. so let’s get started

Access Facebook Graph API

We need Facebook sdk to make any interaction with facebook api. Let’s include Facebook Graph API in our project.

Open app.component.ts file and add the below method. You can put this code in your component.ts file

fbLibrary() {

    (window as any).fbAsyncInit = function() {
      window['FB'].init({
        appId      : '869805000070130',
        cookie     : true,
        xfbml      : true,
        version    : 'v3.1'
      });
      window['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'));

}

Here, change the appId property with your appId

You may noticed that we have declare the fbAsyncInit method, The facebook will called this method when the facebook sdk loaded completely. Under the fbAsyncInit method we have initialized the app

next, call the above method from the ngOnInit method

ngOnInit() {
    this.fbLibrary();
}

Create a facebook login button,

Next, We need a login button which will call facebook login method

Open app.component.html file and put the below html. You can put this html in your component.ts file

<div class="container mt-5">
  <h2>Facebook Login</h2>
  <div class="row mt-5">
    <div class="col-md-4 mt-2 m-auto ">
        <button class="loginBtn loginBtn--facebook" (click)="login()">
            Login with Facebook
          </button>
    </div>    
  </div>
</div>

Facebook Login

Next, We need to create a new method where we will call the facebook login method.

Open app.component.ts file and add the below method. You can put this code in your component.ts file

login() {

    window['FB'].login((response) => {
        console.log('login response',response);
        if (response.authResponse) {

          window['FB'].api('/me', {
            fields: 'last_name, first_name, email'
          }, (userInfo) => {

            console.log("user information");
            console.log(userInfo);
          });
          
        } else {
          console.log('User login failed');
        }
    }, {scope: 'email'});
}

By default facebook return only first_name, last_name and user_id. If you want more user information. You can use the scope parameter

Here is the list of parameter you can pass in the scope

https://developers.facebook.com/docs/facebook-login/permissions

Running application:

Run the application using ng serve --o

Preview

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *