I'm trying to add a login/logout to/from google by their guide: https://developers.google.com/identity/sign-in/web/sign-in
But I'm facing some problems.
index.html:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="**my-google-api-key**.apps.googleusercontent.com">
<script>
gapi.load('auth2',function () {
gapi.auth2.init();
});
</script>
app.component.html:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<a href="#" onclick="signOut();">Sign out</a>
app.component.ts:
public onSignIn(googleUser):void {
var profile = googleUser.getBasicProfile();
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());
}
public signOut():void {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
Problems:
Question:
Google tells us not to use the googleUser.getBasicProfile().getId() as the user ID but use the ID Token intead: googleUser.getAuthResponse().id_token.sub. Why?
I solved it by using NgZone
. Not sure if it's the best way but it's the best until I'll find another one :)
import { Component, NgZone } from '@angular/core';
......
......
constructor(ngZone: NgZone) {
window['onSignIn'] = (user) => ngZone.run(() => this.onSignIn(user));
}
......
......
onSignIn(googleUser) {
//now it gets called
......
}
you can simply add your onSignIn
method to window to get called, by following code.
constructor() {
const _self = this;
window['onSignIn'] = function (user) {
_self.onSignIn(user);
};
}
onSignIn(googleUser) {
// sign in code
}
may this link help for your last question.
Authenticate with a backend server
they described:
Warning: Do not accept plain user IDs, such as those you can get with the GoogleUser.getId() method, on your backend server. A modified client application can send arbitrary user IDs to your server to impersonate users, so you must instead use verifiable ID tokens to securely get the user IDs of signed-in users on the server side.
mrgoos answer helped me, but we can make it cleaner without NGZone:
constructor() {
window['onSignIn'] = this.onSignIn;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With