Social login api for Angular 5. Includes Facebook and Google login.
AOT Compatible.
npm install --save angular5-social-loginIn 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 GoogleLoginProvider("Your-Google-Client-Id")
},
];
);
return config;
}
@NgModule({
imports: [
...
SocialLoginModule
],
providers: [
...
{
provide: AuthServiceConfig,
useFactory: getAuthServiceConfigs
}
],
bootstrap: [...]
})
export class AppModule { }In signin.component.ts,
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
...
}
);
}
}In signin.component.html,
<h1>
Sign in
</h1>
<button (click)="socialSignIn('facebook')">Sign in with Facebook</button>
<button (click)="socialSignIn('google')">Signin in with Google</button> You need to create your own app by going to Facebook Developers page. Add Facebook login under products and configure Valid OAuth redirect URIs.
Follow this official documentation on how to Create a Google API Console project and client ID.