menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular:Google Oauth

folder Projet: angularApp
Se connecter avec google Gmail

npm install npm @abacritt/angularx-social-login

app.component.html

<div class="card text-center ">
<div class="card-body">
<h5 class="card-title">Login With Google</h5>
<div class="card-text">
<div class="container" style="max-width: 550px">
<div *ngIf="isLoggedin == false">
<div>
<button type="button" (click)="loginWithGoogle()" class="btn btn-danger">Login with Google</button>
</div>
</div>
<div *ngIf="isLoggedin == true">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" [value]="socialUser.firstName" id="firstname" readonly>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" [value]="socialUser.lastName" id="lastname" readonly>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" [value]="socialUser.email" id="email" readonly>
</div>
<button type="button" (click)="logOut()" class="btn btn-primary">Log Out</button>
</div>
</div>
</div>
</div>
<div class="card-footer text-muted">
</div>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { SocialAuthService, GoogleLoginProvider, SocialUser,} from 'angularx-social-login';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})

export class AppComponent {
socialUser!: SocialUser;
isLoggedin: boolean=false;
constructor(
private formBuilder: FormBuilder,
private socialAuthService: SocialAuthService
) {}

//Se connecter avec google
loginWithGoogle(): void {
this.socialAuthService.authState.subscribe((user) => {
this.socialUser = user;
this.isLoggedin = user != null;
});
this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);
}
//se déconnecter
logOut(): void {
this.socialAuthService.signOut();
this.isLoggedin = false;
}
}

Générer google key pour Oauth

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { SocialLoginModule, SocialAuthServiceConfig} from 'angularx-social-login';
import { GoogleLoginProvider } from 'angularx-social-login';

@NgModule({
declarations: [
AppComponent
],
imports: [
SocialLoginModule,
BrowserModule,
AppRoutingModule,
FormsModule ,
ReactiveFormsModule
],
providers: [
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider('Your Google Key'),
},
],
} as SocialAuthServiceConfig,
},
],
bootstrap: [AppComponent]
})
export class AppModule { }