npm i ngx-one-tap
`
npm i jwt-decode
Registering the Plugin
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 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NgxOneTapModule } from 'ngx-one-tap'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, NgxOneTapModule.config({ client_id:'', cancel_on_tap_outside: true, auto_select: false, }), ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
TypeScript 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 39 40 41 42 |
import { Component } from '@angular/core'; import { jwtDecode } from 'jwt-decode'; import { CredentialResponse, NgxOneTapService } from 'ngx-one-tap'; // Define the expected structure of the profile data. interface GoogleProfile { name: string; email: string; picture: string; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { title = 'angularsample'; user: GoogleProfile | null = null; // Use the GoogleProfile interface here constructor(private oneTap: NgxOneTapService) {} ngOnInit() { this.oneTap.init({ client_id: '', context: 'signin', }); this.oneTap.identity$.subscribe((res: CredentialResponse) => { console.log(res); if (res.credential) { const profileData: GoogleProfile = jwtDecode(res.credential); console.log(profileData); // Store the profile data to display this.user = profileData; } }); } } |
Template Code
app.component.html
1 2 3 4 5 6 7 |
<div *ngIf="user"> <img [src]="user.picture" alt="Profile Picture" style="width: 100px; height: 100px; border-radius: 50%;" /> <h3>{{ user.name }}</h3> <p>{{ user.email }}</p> </div> <ngx-one-tap></ngx-one-tap> |
Running the App
ng serve