0.1.1 • Published 4 years ago
angularx-social-login-cb v0.1.1
Angular 7 Social Login
Original project is https://github.com/abacritt/angularx-social-login
Social login and authentication module for Angular 7 (supports Angular 4+). Supports authentication with Google and Facebook. Can be extended to other providers also.
Check out the demo.
This fork applies fix issue 201 "modify response when using offline access for google login" to v1.2.7.
Getting started
Install via npm
npm install --save angularx-social-login
Import the module
In your AppModule
, import the SocialLoginModule
import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider } from "angularx-social-login";
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider("Facebook-App-Id")
}
]);
export function provideConfig() {
return config;
}
@NgModule({
declarations: [
...
],
imports: [
...
SocialLoginModule
],
providers: [
{
provide: AuthServiceConfig,
useFactory: provideConfig
}
],
bootstrap: [...]
})
export class AppModule { }
Sign in and out users
import { AuthService } from "angularx-social-login";
import { FacebookLoginProvider, GoogleLoginProvider } from "angularx-social-login";
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
constructor(private authService: AuthService) { }
signInWithGoogle(): void {
this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
}
signInWithFB(): void {
this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
}
signOut(): void {
this.authService.signOut();
}
}
Subscribe to the authentication state
You are notified when user logs in or logs out. You receive a SocialUser
object when the user logs in and a null
when the user logs out. SocialUser
object contains basic user information such as name, email, photo URL, etc.
import { AuthService } from "angularx-social-login";
import { SocialUser } from "angularx-social-login";
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
private user: SocialUser;
private loggedIn: boolean;
constructor(private authService: AuthService) { }
ngOnInit() {
this.authService.authState.subscribe((user) => {
this.user = user;
this.loggedIn = (user != null);
});
}
}
Display the user information
<img src="{{ user.photoUrl }}">
<div>
<h4>{{ user.name }}</h4>
<p>{{ user.email }}</p>
</div>
Specifying custom scope
const fbLoginOptions: LoginOpt = {
scope: 'pages_messaging,pages_messaging_subscriptions,email,pages_show_list,manage_pages',
return_scopes: true,
enable_profile_selector: true
}; // https://developers.facebook.com/docs/reference/javascript/FB.login/v2.11
const googleLoginOptions: LoginOpt = {
scope: 'profile email'
}; // https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2clientconfig
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("Google-OAuth-Client-Id", googleLoginOptions)
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider("Facebook-App-Id", fbLoginOptions)
}
]);
Building with AoT
If you are facing issue in building your app with AoT, check this document.
Running the demo app
cd demo
npm install
ng serve