Social Login Using Angular Framework

1- Using angular npm , One can Actually Achieve what is required in Application.

2- Using method mentioned below can achieve this functionality .

3 - Run this command on terminal inside your project folder.

4- Users using Angular-2 and above version run this command , only replace the version inside this command => npm i angular5-social-login

5- After done with installing Dependencies in Node Module , Follow these steps :-

6- Import dependencies in app.module.ts

 import {
    SocialLoginModule,
    AuthServiceConfig,
    GoogleLoginProvider,
    FacebookLoginProvider,
} from "angular5-social-login";
 
 
// Configs 
export function getAuthServiceConfigs() {
  let config = new AuthServiceConfig(
      [
        {
          id: FacebookLoginProvider.PROVIDER_ID,
          provider: new FacebookLoginProvider("Your-Facebook-app-id")
        },
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvid("Your-Google-Client-Id")
        },
      ];
  );
  return config;
}
 
@NgModule({
  imports: [
    ...
    SocialLoginModule
  ],
  providers: [
    ...
    {
      provide: AuthServiceConfig,
      useFactory: getAuthServiceConfigs
    }
  ],
  bootstrap: [...]
})
 
export class AppModule { }

7- After import dependencies in your required Component.ts from where you want to login.

import {Component, OnInit} from '@angular/core';
import {
    AuthService,
    FacebookLoginProvider,
    GoogleLoginProvider
} from 'angular5-social-login';
 
@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
 
 
export class SigninComponent implements OnInit {
 
  constructor( private socialAuthService: AuthService ) {}
  
  public socialSignIn(socialPlatform : string) {
    let socialPlatformProvider;
    if(socialPlatform == "facebook"){
      socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
    }else if(socialPlatform == "google"){
      socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
    }
    
    this.socialAuthService.signIn(socialPlatformProvider).then(
      (userData) => {
        console.log(socialPlatform+" sign in data : " , userData);
        // Now sign-in with userData
        ...
            
      }
    );
  }
  
}

9- Create buttons in your Component.html

<h1>
     Sign in
</h1>
 
<button (click)="socialSignIn('facebook')">Sign in with Facebook</button>
<button (click)="socialSignIn('google')">Signin in with Google</button> 

10- Also, the important step is to generate Api_key & client_Oauth_key for desired Social Profiles you want to access inside your application.

11- For  Api_key & client_Oauth_key

12- for gmail => Go to " google api console " in browser and you can generate one for you.

13- for Facebook => Go to " Facebook developers " in browser and you can generate one for your application.

14- You must login there and then follow the given steps there and Done with this.

15- It helped me in my application , Hope it will help you too.