To get or post data to the server, a valid authentication token should be present inside all the requests sent to the Facebook server. Usually, we need to set up an oAuth authentication mechanism in our application to log in to remote servers such as Facebook. We will cover how to do this with Electron at the end of this chapter. But here, in the case of Facebook, the SDK provides a simple function to log in to the application which will open the Facebook login screen inside a separate window and allow the user to log in with their credentials. There are several types of authentication mechanisms available with the Facebook SDK. Here we follow a custom login process, which is described in the Facebook developer portal at: (https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow).

Create a new component called LoginComponent in the login.component.ts file with the following content:

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'fb-login', 
    template:  <style> 
      .login_btn { 
        position: absolute; 
        top: 45%; 
        background: #4080ff; 
        border-radius: 3px; 
        border-color: #4080ff; 
        border-width: 1px; 
        color: #fff; 
        display: inline-block; 
        font-family: Freight Sans, 'helvetica neue',helvetica,arial,'lucida grande',sans-serif; 
        font-size: 14px; 
        padding: 12px 20px 10px 20px; 
        left: 30%; 
      } 
    </style> 
    <div class="container"> 
      <button class="login_btn" (click)="login()">Login to FaceBook</button> 
     </div> 
}) 
export class LoginComponent { 
}

This shows a simple button and if the user is not logged in, the user should be getting this screen to enable the user to login with their Facebook credentials. Configure the router to show the login component if the user is not logged in. Change the router configuration in the app.module.ts file as follows:

import { LoginComponent } from './login.component.ts'; 

@NgModule({ 
   imports: [ 
      BrowserModule, 
      RouterModule.forRoot([ 
         { path: '', component: AppComponent }, 
         { path: '/login', component: LoginComponent } 
      ]) 
   ], 
   declarations: [ 
      AppComponent, 
      LoginComponent 
   ], 
   bootstrap: [ 
      AppComponent 
   ] 
}) 
export class AppModule { }

Now the LoginComponent is independent and by default AppComponent will be rendered to the screen. So we need to ask the Angular router to check the user authentication status before displaying AppComponent. The Angular router provides a canActivate property which provides a way to execute some logic before rendering a component. This property accepts an Angular service that implements the CanActivate interface from the Angular router module. Add the LoggedInGuard service in the loggedinguard.service.ts file with the following code:

import { Injectable } from '@angular/core'; 
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
@Injectable() 
export class LoggedInGuard implements CanActivate { 
    constructor(private router: Router) { 

    } 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any { 
        if (state.url !== '/login') { 
            FB.getLoginStatus((response: any) => { 
                if (response.status !== 'connected') { 
                    this.router.navigate(['/login']); 
                    return false; 
                } 
            }); 
        } 
        return true; 
    }

}

Update the router configuration and add the LoggedInGuard service into the CanActivate hook:

@NgModule({ 
   imports: [ 
      BrowserModule, 
      RouterModule.forRoot([ 
         { path: '', component: AppComponent, canActivate: [LoggedInGuard] }, 
         { path: '/login', component: LoginComponent } 
      ]) 
   ], 
   providers: [ 
      LoggedInGuard 
   ], 
   declarations: [..], 
   bootstrap: [...] 
})

Once you run the application, you should be getting the login component instead of AppComponent. Open LoginComponent and add the login method as an event handler for the login button click:

 
@Component({ 
    selector: 'fb-login', 
    template: <div class="container"> 
      <button class="login_btn" (click)="login()">Login to FaceBook</button> 
    </div> 
}) 
export class LoginComponent { 

    constructor() { } 

    public login() { 
        FB.login(); 
    } 
}

Once you click on the button, the default Facebook login window should open. You can log in with your Facebook credentials for further data retrieval. The app's login screen should look like the following: