我正在尝试使用使用Google Sign-In for Websites创建登录功能按钮出现在我的应用程序中，登录过程成功完成但从未调用onSignIn（googleUser）方法。 我想我必须在我的组件文件中以某种方式绑定按钮并附加回调但尚未找到如何使用Angular 5执行此操作。
如何在登录完成时触发（data-onsuccess）回调并将检索到的用户传递给Register.component.ts中的onSignIn（googleUser）？
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);
}
}
<!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>
<div class="g-signin2" (data-onsuccess)="onSignIn()"></div>
谢谢。
答案 0 :(得分：0)
将此添加到您的compnent.ts文件
declare const gapi: any;
ngOnInit() {
this.googleInit();}
public auth2: any;
public googleInit() {
let that = this;
gapi.load('auth2', function () {
that.auth2 = gapi.auth2.init({
client_id: "YOUR_CLIENT_ID.apps.googleusercontent.com",
cookiepolicy: 'single_host_origin',
});
that.onSignIn(that.element.nativeElement.firstChild);
}); }
onSignIn(element) {
console.log('element is now ', element);
this.auth2.attachClickHandler(element, {},
function (googleUser) {
var profile = googleUser.getBasicProfile();
const desc = {
'ID: ' : profile.getId(),
'Name: ' : profile.getName(),
// 'Image URL: ' : profile.getImageUrl(),
'Email: ' : profile.getEmail()
}
alert(JSON.stringify(desc));
// console.log('Token || ' + googleUser.getAuthResponse().id_token);
console.log(profile)
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.})};}