Welcome folks today in this blog post we will be integrating google and facebook
login sdk project to display user profile
using angularx-social-login
library in typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleapp
After that you need to install the below libraries using the below command as shown below
npm i angularx-social-login
After that you will see the below directory structure
of the angular app as shown below
And now we need to go to app.component.html
file and copy paste the following code
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="jumbotron bg-transparent text-center"> <div *ngIf="!user" class="card text-center"> <h6 class="card-header"> Social Login Demo </h6> <div class="card-block"> <h4 class="card-title">Not signed in</h4> <p class="card-text">Sign in with</p> </div> <div class="card-block"> <button class="btn btn-social-icon btn-google" (click)="signInWithGoogle()"><span class="fa fa-google"></span></button> <button class="btn btn-social-icon btn-facebook" (click)="signInWithFB()"><span class="fa fa-facebook"></span></button> </div> </div> <div *ngIf="user" class="card text-center"> <h6 class="card-header"> Social Login Demo </h6> <div class="card-block"></div> <img class="card-img-top img-responsive photo" src="{{ user.photoUrl }}"> <div class="card-block"> <h4 class="card-title">{{ user.name }}</h4> <p class="card-text">{{ user.email }}</p> </div> <div class="card-block"> <button class="btn btn-danger" (click)="signOut()">Sign out</button> </div> </div> </div> |
As you can see we are having two
social login buttons styled inside the bootstrap container. We have google and facebook login buttons. And after that we are displaying the dynamic
information such as the email
and then name
of the user. And also we have the signOut
button as well.
And then we need to go to index.html
and copy paste the below bootstrap
css cdn as shown below
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular 4 Social Login</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css" rel="stylesheet"> </head> <body> <app-root></app-root> </body> </html> |
And now we need to go to app.module.ts
file and copy paste the following code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { SocialLoginModule } from 'angularx-social-login'; import { AuthServiceConfig, GoogleLoginProvider, FacebookLoginProvider } from 'angularx-social-login'; const config = new AuthServiceConfig([ { id: GoogleLoginProvider.PROVIDER_ID, provider: new GoogleLoginProvider('##googleclientid##') }, { id: FacebookLoginProvider.PROVIDER_ID, provider: new FacebookLoginProvider('##facebookappid##') } ]); export function provideConfig() { return config; } @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, FormsModule, SocialLoginModule ], providers: [ { provide: AuthServiceConfig, useFactory: provideConfig } ], bootstrap: [AppComponent] }) export class AppModule { } |
As you can see we are importing the angularx-social-login
module and then you need to replace the google
client id and the facebook client id
when you make the apps
inside the developer sections. We can get this information as shown below
Getting Google Client ID
Now first of all create a new project inside the google cloud console
and then create new google client id
as shown below
Here you need to replace your application
url where you will host your website and then you will get the client id as shown below
Getting the Facebook Login App ID
Now first of all you need to create a new app
inside the facebook developer and then go to facebook
login settings as shown below
And then we need to copy paste the live
application url to the allowed domains
section and also enable the Login with Javascript SDK
option to yes as shown below
And then you can copy paste the APP ID
of the app as shown below
Just replace it with your own values
in the above code
and now we need to to go to app.component.ts
file and copy paste the following code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import { Component, OnInit } from '@angular/core'; import { AuthService } from 'angularx-social-login'; import { SocialUser } from 'angularx-social-login'; import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider } from 'angularx-social-login'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; user: SocialUser; constructor(private authService: AuthService) { } ngOnInit() { this.authService.authState.subscribe((user) => { this.user = user; console.log(user); }); } signInWithGoogle(): void { this.authService.signIn(GoogleLoginProvider.PROVIDER_ID).then(x => console.log(x)); } signInWithFB(): void { this.authService.signIn(FacebookLoginProvider.PROVIDER_ID).then(x => console.log(x)); } signOut(): void { this.authService.signOut(); } } |
As you can see we have defined all the methods
for signing with google
and facebook
and then we are also having the signOut()
method as well. And then after granting the access we are getting the user profile
and showing it inside the html
as shown below