ngx-mtc-got
v17.0.0
Published
Google one tap para aplicaciones en Angular.
Downloads
5
Readme
NgxMtcGot
Google one tap para aplicaciones en Angular.
Getting started
Install via npm
npm i ngx-mtc-got
Import the module
En su AppModule, importar NgxMtcGotModule
import { NgxMtcGotModule } from 'ngx-mtc-got';
@NgModule({
declarations: [
...
],
imports: [
...
NgxMtcGotModule.config(
{
client_id: 'App_client_id',
cancel_on_tap_outside: false,
authvalidate_by_googleapis: false,
auto_select: false,
disable_exponential_cooldowntime: false,
context: 'signup',
...
})
],
providers: [],
bootstrap: [...]
})
export class AppModule { }
NgOneTap service
import { NgxMtcGotService } from 'ngx-mtc-got';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
userDetails;
constructor(private oneTap: NgxMtcGotService) { }
ngOnInit() {
this.oneTap.tapInitialize(); //Initialize OneTap, At intial time you can pass config like this.oneTap.tapInitialize(conif) here config is optional.
this.oneTap.promtMoment.subscribe(res => { // Subscribe the Tap Moment. following response options all have self explanatory. If you want more info pls refer official document below attached link.
res.getDismissedReason();
res.getMomentType();
res.getNotDisplayedReason();
res.getSkippedReason();
res.isDismissedMoment();
res.isDisplayed();
res.isNotDisplayed();
res.isSkippedMoment();
});
this.oneTap.oneTapCredentialResponse.subscribe(res => { // After continue with one tap JWT credentials response.
console.log(res);
});
this.oneTap.authUserResponse.subscribe(res => { // Use Auth validation by using google OAuth2 apis. Note: this one for testing and debugging purpose.
this.userDetails = res;
});
}
tapCancel() {
this.oneTap.cancelTheTap();
}
}
Options
| Name | Type | Required | Description | | --------------------- | ------- | :------: | :----------------------------------------------------------------------------------: | | client_id | String | true | Your application's client ID | | disable_exponential_cooldowntime | Boolean | false | when Close X one tap promt it's take reset/reshowing take some times this called Exponential cool down. you can disable that using this option Note: Recommended for development mode. If you want to use this feature in prod before pls check with official doc. link below. | | authvalidate_by_googleapis | Boolean | false | Validate the user without backend-server validation by using google provide APIs. Note: Recommended for development mode. If pro mode need to validate JWT one tap returned credentials from backend-server by using google-auth-library | | auto_select | Boolean | false | Enables automatic selection. | | cancel_on_tap_outside | Boolean | false | Cancels the prompt if the user clicks outside the prompt. | | context | String | false | The title and words in the One Tap prompt |
Resource
Server
Using one of the Google API Client Libraries (e.g. Java, Node.js, PHP, Python) is the recommended way to validate Google ID tokens in a production environment.
npm install google-auth-library --save
Node.js
const { OAuth2Client } = require('google-auth-library');
const client = new OAuth2Client(CLIENT_ID);
async function verify() {
const ticket = await client.verifyIdToken({
idToken: token,
audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend
// Or, if multiple clients access the backend:
//[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3]
});
const payload = ticket.getPayload();
const userid = payload['sub'];
// If request specified a G Suite domain:
// const domain = payload['hd'];
}
verify().catch(console.error);
More Reference - https://developers.google.com/identity/sign-in/web/backend-auth#using-a-google-api-client-library