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);
}