Angular Universal中的谷歌OneTap

Question

我想在我的Angular Universal应用程序(使用OneTap )中实现谷歌SSR。我使用的是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);
}