Categories

Monday, May 20, 2024
#919814419350 therichposts@gmail.com
Angular 8Angular 9Angular7

How to login into Angular 9 application with Facebook?

How to login into Angular 9 application with Facebook?

Hello to all, welcome again on therichpost.com. In this post, I will tell you, How to login into Angular 9 application with Facebook?

Here are the complete commands and code snippet and please follow carefully:

1. Here are the basics commands to set angular 9 your system:

npm install -g @angular/cli 

ng new angularbootstrap //Create new Angular Project

$ cd angularbootstrap // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

 

2. Here is the command to install bootstrap 4 into your angular 9 applicatiopn:

npm install --save bootstrap

3. Here is the command to install Angular 9 Social login module:

npm install --save angularx-social-login

 

4. Here are the bootstrap 4 css and js path, you need to include into your angular.json file:

"styles": [
        ...
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ...
         ],
"scripts": [
       ...
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ...
       ]

 

5. Here is the html code, you need to add into your src\app\app.component.html file:

div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h4>About Me</h4>
     <h3>{{user.name}}</h3>
      <h5>Photo of me:</h5>
      <div class="fakeimg"><img src="{{user.photoUrl}}"></div>
     <button (click)="signInWithFB()" class="btn btn-primary">Login Facebook</button>
   </div>
  </div>
</div>

 

 

6. Here is the code, you need to add into your app.module.ts file:

...

import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { FacebookLoginProvider } from "angularx-social-login";
let config = new AuthServiceConfig([
  
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("YourFacebookAppID")
  }
]);

export function provideConfig() {
  return config;
}
...

...
 providers: [
      {
      provide: AuthServiceConfig,
      useFactory: provideConfig
      } 
  ],
...

 

 

6. Here is the code, you need to add into your app.component.ts file:

import { Component } from '@angular/core';
import { AuthService } from "angularx-social-login";
import { FacebookLoginProvider} from "angularx-social-login";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularbootstrap';
  private user: any;
  private loggedIn: boolean;
  constructor(private authService: AuthService) { }
  //Logion
  signInWithFB(): void {
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
  
  } 
  // Logout Function
  signOut(): void {
    this.authService.signOut();
  }
  ngOnInit() {
    //Get User Data
    this.authService.authState.subscribe((user) => {
      this.user = user;
    
      this.loggedIn = (user != null);
    });
  }
}

 

This is it and please run ng serve command and check the output. If you have any kind of query then please do comment below.

Jassa

Thank you

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

1 Comment

  • I het an error:
    Error: ./src/app/app.module.ts 29:23-40
    “export ‘AuthServiceConfig’ was not found in ‘angularx-social-login’

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.