angular-6-social-login-epsfork
v1.1.1
Published
Agular 6 : Social Login (Facebook and Google)
Downloads
28
Maintainers
Keywords
Readme
This is a fork of
Original project : high54 https://github.com/high54/angular-6-social-login
Updated dependencies for angular 6, adding all google scopes and also return expiration time of the google token
Social login api for Angular 6. Includes Facebook, Google login and Linkedin.
AOT Compatible.
Getting started
Install via npm
npm install --save angular-6-social-login
Import the module
In app.module.ts
,
...
import {
SocialLoginModule,
AuthServiceConfig,
GoogleLoginProvider,
FacebookLoginProvider,
LinkedinLoginProvider,
} 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("1098828800522-m2ig6bieilc3tpqvmlcpdvrpvn86q4ks.apps.googleusercontent.com")
},
];
);
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
} from 'angular-6-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;
} 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')">Sign in with Google</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.