5

IdentityServer4 サーバーで構成された暗黙的なフローと組み合わせてサイレント リフレッシュの実装angular-oauth2-oidc使用しようとしています。ng new ng-and-ids4 --minimalこのコンポーネントを使用して、アプリケーション内で動作する概念実証を取得しました。

import { Component } from '@angular/core';
import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome!</h1>
    <p>
      <button (click)='login()'>login</button>
      <button (click)='logout()'>logout</button>
      <button (click)='refresh()'>refresh</button>
    </p>
    <h2>Your Claims:</h2><pre>{{claims | json}}</pre>
    <h2>Your access token:</h2><p><code>{{accessToken}}</code></p>`,
  styles: []
})
export class AppComponent {
  constructor(public oauthService: OAuthService) {
    this.oauthService.configure({
      issuer: 'http://localhost:5000',
      redirectUri: window.location.origin + '/',
      silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
      clientId: 'my-spa',
      scope: 'openid profile',
      silentRefreshTimeout: 5000, // For faster testing
      sessionChecksEnabled: true,
    });

    this.oauthService.tokenValidationHandler = new JwksValidationHandler();

    this.oauthService.loadDiscoveryDocumentAndLogin();
    this.oauthService.setupAutomaticSilentRefresh();
    this.oauthService.events.subscribe(e => { 
      if (e instanceof OAuthErrorEvent) { console.error(e); } 
      else { console.warn(e) } 
    });
  }

  public get claims() { return this.oauthService.getIdentityClaims(); }
  public get accessToken() { return this.oauthService.getAccessToken(); }

  login() { this.oauthService.initImplicitFlow(); }
  logout() { this.oauthService.logOut(); }
  refresh() { this.oauthService.silentRefresh(); }
}

IDServer4 側では、クライアントを次のように構成しています。

new Client
{
    ClientId = "my-spa",
    AllowedGrantTypes = GrantTypes.Implicit,
    AllowAccessTokensViaBrowser = true,
    AccessTokenLifetime = 30, // Seconds (for testing purposes)
    RedirectUris = { "http://localhost:4200/", "http://localhost:4200/silent-refresh.html" },
    PostLogoutRedirectUris = { "http://localhost:4200/" },
    AllowedCorsOrigins = { "http://localhost:4200" },
    AllowedScopes =
    {
        IdentityServerConstants.StandardScopes.OpenId,
        IdentityServerConstants.StandardScopes.Profile,
    }
}

ご覧のとおり、サーバーの のプロパティでホワイトリストに登録"http://localhost:4200/silent-refresh.html"しました。ClientRedirectUris

私の質問は、ページangular-oauth2-oidcをホワイトリストに登録する必要がないように構成できるかどうかです。silent-refresh.html

私が尋ねる理由は、IdentityServer 側を変更するのがそれほど簡単ではない状況でも、このサイレント リフレッシュ アプローチを使用したいからです。また、Damien Bod の Angular アプリケーションでの Silent Refresh の例を見ると、そのようなホワイトリストが言及されていないため、何らかの方法でそれが可能であると感じています。

PS。の追加オプションを含めない場合RedirectUrisInvalid redirect_uri: http://localhost:4200/silent-refresh.htmlサーバー (ログ) とsilent_refresh_timeout OAuthErrorEventクライアント側ライブラリにアクセスします。

4

1 に答える 1