如何使用最新的谷歌身份服务在 Angular 2+ 中实现谷歌登录

Question

Google 已弃用 Google Sign 的旧 JavaScript 实现。 我们应该开始使用新的身份服务。 Angular怎么实现？

Answer 1

根据 Google 文档，它有两种方式，一种使用 javascript，另一种使用 HTML。

我使用 HTML 来呈现页面上的按钮，并使用 javascript（简洁的打字稿）将库导入组件并使用回调函数捕获来自 Google 的响应。

所以，在我们的登录组件上：

在 login.component.html

    <div id="g_id_onload"
          data-client_id="*********************.apps.googleusercontent.com"
          data-callback="handleCredentialResponse"
          data-auto_prompt="false">
          </div>
    <div class="g_id_signin btn"
            data-type="standard"
            data-size="large"
            data-theme="filled_black"
            data-text="sign_in_with"
            data-shape="rectangular"
            data-logo_alignment="left">
          </div>

请注意这里的回调函数是“handleCredentialResponse”

在 login.component.ts

    (function (d, s, id) {
      var js, gjs = d.getElementsByTagName(s)[1];
      if (d.getElementById(id)) { return; }
      js = d.createElement(s); js.id = id;
      js.src = "https://accounts.google.com/gsi/client";
      gjs.parentNode.insertBefore(js, gjs);
    }(document, 'script', 'async defer'));

    (window as any).handleCredentialResponse = (response) => {
      console.log(response);
      if (response && response.credential){
          // handle the response here...
            }
          }, err => {
            console.log(err);
          })
        }
      };

对我来说，我将response.credential发送到后端服务器进行验证，但如果需要，您可以在 Angular App 上解码响应，为此您可以使用类似jwt-decode 的东西。

此外，如果您在 Angular 应用程序中使用它时遇到问题，您可以参考这个答案。

Answer 2

在 2022 年 7 月 29 日之前创建的新客户端 ID 可以使用旧版 Google 平台库。 默认情况下，新创建的客户端 ID现在无法使用平台库，而必须使用更新的 Google 身份服务库。 您可以选择任何值，建议使用描述性名称，例如产品或插件名称，以便于识别。

示例： plugin_name： '登录'。

请阅读我的文章Angular 14 Login with Google using OAuth 2.0 ，我在其中逐步解释了所有内容。

googleAuthSDK() {

    (<any>window)['googleSDKLoaded'] = () => {
      (<any>window)['gapi'].load('auth2', () => {
        this.auth2 = (<any>window)['gapi'].auth2.init({
          client_id: 'YOUR CLIENT ID',
          plugin_name:'login',
          cookiepolicy: 'single_host_origin',
          scope: 'profile email'
        });
        this.callLogin();
      });
    }

Answer 3

我们假设您已经拥有此类服务的 Google 密钥（Google 客户端 ID），因此我们继续将新的 Google Sign Identity 服务集成到 Angular 应用程序中。

作为一种好的做法，我们使用上面提到的 Google 密钥将变量 googleClientId 添加到我们的环境文件中。

 export const environment = {... googleClientId: 'YOUR_GOOGLE_CLIENT_ID', };

在 index.html 文件中，我们添加了允许我们使用此功能的 Google 脚本。

 <.doctype html> <html lang="en"> <head>..: </head> <body> <app-root></app-root> <script src="https.//accounts.google.com/gsi/client" async defer></script> </body> </html>

我们安装了谷歌一键式 package ( @types/google-one-tap ) 来帮助我们进行集成（可选）。
在我们将要使用此功能的组件中，在 .ts 文件中，我们声明了 google 全局变量。 在 ngAfterViewInit 钩子中，我们初始化按钮并通过引用我们分配给 HTML 元素的 id 来渲染它，iframe 将被注入该元素。 在初始化方法中，回调是我们收集 Google 在登录时返回给我们的令牌的地方，我们使用 ngZone 因为导航将在 Angular 区域之外触发。

 declare var google: any; import { AfterViewInit, Component, ElementRef, NgZone } from '@angular/core'; import { accounts } from 'google-one-tap'; import { environment } from 'src/environments/environment'; @Component({ selector: 'app-login-page', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'], }) export class LoginPageComponent implements AfterViewInit { constructor(private ngZone: NgZone) {} ngAfterViewInit() { const gAccounts: accounts = google.accounts; gAccounts.id.initialize({ client_id: environment.googleClientId, ux_mode: 'popup', cancel_on_tap_outside: true, callback: ({ credential }) => { this.ngZone.run(() => { this._loginWithGoogle(credential); }); }, }); gAccounts.id.renderButton(document.getElementById('gbtn') as HTMLElement, { size: 'large', width: 320, }); } private _loginWithGoogle(token: string) {... } }

Answer 4

在 Index.html 中，将此脚本标签粘贴到 head 标签下，如下所示。

 <head> <script src="https://accounts.google.com/gsi/client" async defer> </script> </head>

在 html 组件中，添加以下代码以显示 google 登录按钮。

 <div id="googleButton"></div>

最后在 ts 文件中，使用您的 google 客户端 ID 添加以下代码。

 constructor(private ngZone: NgZone) ngAfterViewInit() { google.accounts.id.initialize({ client_id: "", callback: (window as any)['handleCredentialResponse'] = (response: any) => this.ngZone.run(() => { console.log("this response holds the token for the logged in user information",response) }) }); google.accounts.id.renderButton( document.getElementById("googleButton"), { type: "standard", text: "signin_with", theme: "outline", size: "medium", width: "250"} ) }

在响应中，您将获得一个令牌，您必须对其进行解码以检索登录的用户信息，您可以使用“jwt-decode”包来执行此操作。

 import jwt_decode from 'jwt-decode'; jwt_decode(response.credential);

如何使用最新的谷歌身份服务在 Angular 2+ 中实现谷歌登录

问题描述

4 个解决方案

解决方案1
0

所以，在我们的登录组件上：

解决方案2
0 2022-07-07 18:05:28

解决方案3
0 2022-09-08 07:24:08

解决方案4
-1 2022-05-28 14:05:17

如何使用最新的谷歌身份服务在 Angular 2+ 中实现谷歌登录

问题描述

4 个解决方案

解决方案1 0

所以，在我们的登录组件上：

解决方案2 0 2022-07-07 18:05:28

解决方案3 0 2022-09-08 07:24:08

解决方案4 -1 2022-05-28 14:05:17

解决方案1
0

解决方案2
0 2022-07-07 18:05:28

解决方案3
0 2022-09-08 07:24:08

解决方案4
-1 2022-05-28 14:05:17