Fix: oauthService.getIdentityClaims always returns null with implicit flow


Angular の angular-oauth2-oidc ライブラリで、Google の OAuth 認証を行おうとしたら、this.oauthService.getIdentityClaims();が必ず null を返してきて、ユーザーの情報が取得できませんでした。

原因がいくつか分かったので、メモとして残しておきます。

・原因1

Router の設定で{ useHash: true }にしていると claims が必ず null になります。以下のようにコメントアウトすることで問題を解消することができます。これはこれでリロード時にエラーになるという問題を持っているのですが。💦

@NgModule({
  imports: [RouterModule.forRoot(routes/*, { useHash: true }*/)],
  exports: [RouterModule]
})


・原因2

ルーティングの設定で、スラッシュ('/')が入っている場合も claims が必ず null になります。スラッシュを外すだけでこの問題は解消します。

const appRoutes: Routes = [
  // redirectTo は'/home'にすると情報を取得できなくなるので注意
  {path: '**', redirectTo: 'home', pathMatch: 'full'}
];


・原因3

これは他のサイトの情報ですが、設定のredirectUriwindow.location.originになっていると claims が null になるようです。

window.location.origin + '/index.html'に設定を変更することで問題が解消する模様。

結構、ハマりどころが多い上に、原因追求が困難なものばかりなので参考になれば幸いです。