Fix: oauthService.getIdentityClaims always returns null with implicit flow

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

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

・原因１

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

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

・原因２

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

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

・原因３

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

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

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

あるSEのつぶやき・改