Angular Universal 中的 Google OneTap

Question

我想在我的 Angular 通用应用程序（使用 SSR）中实现 Google OneTap。 我正在使用 Angular 11，在将应用程序转换为 Angular Universal 之前，以下脚本正在运行：

initGoogleOneTap() {
  const domain = window.location.hostname;
  google.accounts.id.initialize({
    client_id: environment.GOOGLE_OAUTH_CLIENT_KEY,
    cancel_on_tap_outside: false,
    auto_select: true,
    state_cookie_domain: domain,
    callback: (response: any) => {
      this.oneTapLogIn(response.credential)
        .catch( (error) => {
          console.error('Error logging in with Google One Tap: ', error);
        });
    },
  });

  google.accounts.id.prompt( (notification: any) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}

我在脚本顶部使用declare var google: any 。

我得到的错误是： ERROR ReferenceError: google is not defined

Answer 1

首先，通过将其放入您的index.html来加载客户端库

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

然后，像这样实现你的组件

declare var window: any;

ngOnInit() {
  window.google.accounts.id.initialize({
    client_id: 'YOUR CLIENT ID',
    callback: this.handleGgOneTap.bind(this)
  });
  window.google.accounts.id.prompt();
}

handleGgOneTap(resp) {
  console.log('handleGgOneTap ', resp);
}