Google Sign-in ボタンが Angular で時々表示されない

やぬてつです。 この記事は Angular 8 をターゲットにしています。

問題

今まで問題なく動いていると思っていたのだけれど、時々ボタンが表示されない現象が起きた。

調査

stack overflow にこんな記事があった。 https://stackoverflow.com/questions/32625970/google-signin-button-in-angularjs-sometimes-does-not-show-up

これは AngularJS なので Angular に対応させる必要がありそう。

タイミングの問題かな？と思って ngOnInitに書いたり、 ngAfterViewInit に書いたりしたが、結果はあまり変わらなかった。 どこに書いたらいいのだろうか？タイミングの問題じゃない？

特殊な書き方をしているところは window[] を利用しているところなので、ここをいじってみる。

window['onSignIn'] = (user) => ngZone.run(() => this.authService.onSignIn(user).then(() => this.redirect()));

これをこうしてみた。

gapi.signin2.render('signin-button', {
  'scope': 'profile email https://www.googleapis.com/auth/admin.directory.group.readonly',
  'longtitle': true,
  'theme': 'dark',
  'onsuccess': googleUser => this.ngZone.run(() => this.authService.onSignIn(googleUser).then(() => this.redirect())),
});

一緒にボタンのカスタマイズもこのタイミングで行うように変更した。

まとめ

何が原因かはわからないが、これでなんとかなった。