Angular 2+中的Google登录按钮 [英] Google sign-in button in Angular 2+

问题描述

我试图通过他们的指南在google上添加登录/注销：
https://developers.google.com/identity/sign-in/web/sign-in

但我遇到了一些问题。

index.html：

 < meta name =viewportcontent =width = device-width，initial-scale = 1> 
< script src =https://apis.google.com/js/platform.jsasync defer>< / script> 
< meta name =google-signin-client_idcontent =** my-google-api-key ** .apps.googleusercontent.com> 
< script> 
 gapi.load（'auth2'，function（）{
 gapi.auth2.init（）; 
}）; 
< / script> 
  

app.component.html： $ b

 < div class =g-signin2data-onsuccess =onSignIn>< / div> 
< a href =＃onclick =signOut（）;>退出< / a> 
  

app.component.ts： $ b

  public onSignIn（googleUser）：void {
 var profile = googleUser.getBasicProfile（）; 
 console.log（'ID：'+ profile.getId（））; //不要发送到你的后端！改用ID标记。 
 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。'）; 
}）; 
} 
  

问题：

1. 成功登录后，onSignIn函数不会被调用，因此不会打印任何内容，但signIn正在运行。
   
2. 在signOut函数我有错误：找不到名字'gapi'。但注销正在运行。

问题：

Google告诉我们不要使用googleUser.getBasicProfile（）。getId（）作为用户ID，而是使用ID Token intead：googleUser.getAuthResponse（）。id_token.sub。
为什么？

解决方案

我使用 NgZone 。不知道这是否是最好的方法，但它是最好的，直到我找到另一个：）

  import {Component，NgZone}从'@ angular / core'; 
 ...... 
 ...... 
构造函数（ngZone：NgZone）{
 window ['onSignIn'] =（user）=> ngZone.run（（）=> this.onSignIn（user））; 
} 
 ...... 
 ...... 
 onSignIn（googleUser）{
 //现在它被称为
 .. .... 
} 
  

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:

1. After logging in succussfully, onSignIn function does not get called so nothing is printed but the signIn is working.
2. In the signOut function I have error: "Cannot find name 'gapi'." but the signout is working.

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
......
}

这篇关于Angular 2+中的Google登录按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！