social login in angular 6

Social login or social signup is an important features of web apps and websites. Using social media we can do signup and login or create account without registering to the website or web app. The app or website must have the social login features in the app or website .
Today we will discuss how to integrate social login in angular 6 websites.

To integrate social login in angular 6 there are lots of angular packages available, we will use one of them

We will use angular-6-social-login package for our tutorial today.

Lets start by steps :

Step One :
Install the package via npm
to install the package type the following command in command line

npm install --save angular-6-social-login

Step two :
Open your project and open the app.module.ts file and import the package SocialLoginModule and write a export function to return the configuration of provider details. so the app.module.ts file will look like below

import {
    SocialLoginModule,
    AuthServiceConfig,
    GoogleLoginProvider,
    FacebookLoginProvider,
} from "angular-6-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 GoogleLoginProvider("Your-Google-Client-Id")
        },
          {
            id: LinkedinLoginProvider.PROVIDER_ID,
            provider: new LinkedinLoginProvider("Your-Liknedin-Client-Id")
          },
      ];
  );
  return config;
}
 
@NgModule({
  imports: [
    ...
    SocialLoginModule
  ],
  providers: [
    ...
    {
      provide: AuthServiceConfig,
      useFactory: getAuthServiceConfigs
    }
  ],
  bootstrap: [...]
})
 
export class AppModule { }

Step Three :
Now we can use the imported package, lets open app.component.ts and import the package as per requirement, suppose i just want to integrate gooogle plus login so i will import like below.


import {
AuthService,
GoogleLoginProvider
} from 'angular-6-social-login';

 

now we will create a function to call it from front end

public socialLogin() {
let socialLoginProvider;
socialLoginProvider= GoogleLoginProvider.PROVIDER_ID;

this.socialLoginAuthService.signIn(socialLoginProvider).then(
(data) => {
console.log(data);

}
);
}

here socialLoginAuthService is an instance of AuthService, we have to declare and pass in our constructor like below
constructor( private socialLoginAuthService : AuthService ) {}

Then finally the code will look like below

import {Component, OnInit} from '@angular/core';
import {AuthService, GoogleLoginProvider} from 'angular-6-social-login';

@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.css']
})

export class AppComponent implements OnInit {

constructor( private socialAuthService: AuthService ) {}

public socialLogin() {

let socialLoginProvider;
socialLoginProvider= GoogleLoginProvider.PROVIDER_ID;

this.socialLoginAuthService.signIn(socialLoginProvider).then(
(data) => {
console.log(data);
//pass the data to your REST API service call
}
);
}

}

Step four : Finally we have to put html button to fire the login or sign up. Now open app.component.html and paste the following code

Leave comment

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