I am currently working on implementing a sign-in feature using Google Sign-In for Websites. The sign-in button is displayed in my application, the login process works as expected but the onSignIn(googleUser) method is not getting called. I believe I need to somehow bind the button in my component file and link it to the callback function, but I have yet to figure out how to achieve this with Angular 5.
How can I trigger the callback on (data-onsuccess) when the login is successful and pass the retrieved user data to onSignIn(googleUser) in Register.component.ts?
register.component.ts
import {Component} from '@angular/core';
import {RegisterService} from './register.service';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent {
constructor(private registerService: RegisterService) {
}
onSignIn(googleUser) {
this.registerService.googleSignIn(googleUser);
}
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="obfuscated for Stack Overflow">
<title>Thee</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
register.component.html
<div class="g-signin2" (data-onsuccess)="onSignIn()"></div>
Any assistance would be greatly appreciated. Thank you.