angular5-social-auth
v1.0.11
Published
Agular 5 : Social Login (Facebook and Google)
Downloads
75
Maintainers
Keywords
Readme
Hello. This is module fork from https://github.com/sabyasachibiswal/angular5-social-login. Fixed bug from auth with Linkedin and update Readme. Social login api for Angular 5. Includes Facebook and Google login.
AOT Compatible.
Getting started
Install via npm
npm install --save angular5-social-auth
Import the module
In app.module.ts
,
...
import {
SocialLoginModule,
AuthServiceConfig,
GoogleLoginProvider,
FacebookLoginProvider,
LinkedinLoginProvider
} from "angular5-social-auth";
// 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")
},
{
id: LinkedinLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvid("Your-Linkedin-Client-Id")
},
];
);
return config;
}
@NgModule({
imports: [
...
SocialLoginModule
],
providers: [
...
{
provide: AuthServiceConfig,
useFactory: getAuthServiceConfigs
}
],
bootstrap: [...]
})
export class AppModule { }
Usage :
In signin.component.ts
,
import {Component, OnInit} from '@angular/core';
import {
AuthService,
FacebookLoginProvider,
GoogleLoginProvider,
LinkedinLoginProvider
} from 'angular5-social-auth';
@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;
}else if(socialPlatform == "linkedin"){
socialPlatformProvider = LinkedinLoginProvider.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>
<button (click)="socialSignIn('linkedin')">Signin in with Linkedin</button>
Facebook App Id :
You need to create your own app by going to Facebook Developers page.
Add Facebook login
under products and configure Valid OAuth redirect URIs
.
Google Client Id :
Follow this official documentation on how to Create a Google API Console project and client ID.
Linkedin Client Id :
Follow this official documentation: https://developer.linkedin.com/