Angular 9/OAuth2/OIDC 和路由問題

Question

我已經使用 angular-oauth2-oidc API 實現了基本的 Oauth2/OIDC 靜默刷新，並且在獲取指向我的應用程序中特定區域的鏈接時遇到了一些問題。

例如，應用程序為用戶生成電子郵件以到達特定頁面。 單擊該鏈接時，頁面會呈現片刻，然后重新加載似乎來自 OAuth 請求，然后應用程序返回到初始頁面。

    export class AppComponent implements OnInit {
      private authConfig: AuthConfig;
      constructor(
        private oauthService: OAuthService,
        private location: Location,
      ) {
        console.log("AppComponent:constructor");
        this.configureOAuth();
      }
    
      ngOnInit() {
      }
    
      private configureOAuth() {
        this.authConfig = {
          issuer: this.getIssuer(),
          clientId: environment.clientId,
          scope: 'openid profile email preferred_username',
          responseType: 'code',
          redirectUri: `${window.location.origin}/`,
          silentRefreshRedirectUri: `${window.location.origin}/silent-renew.html`,
          useSilentRefresh: true,
          showDebugInformation: true,
        };
    
        this.oauthService.configure(this.authConfig);
        this.oauthService.setStorage(sessionStorage);
        this.oauthService.setupAutomaticSilentRefresh();
    
        this.oauthService.loadDiscoveryDocumentAndLogin();
     }

我的 AppComponent 似乎在控制台日志中被加載了兩次：

Navigated to: https://localhost:44306/action/1234
AppComponent:constructor
HttpRequestInterceptor: hasValidAccessToken:  https://auth.myhost.com/.well-known/openid-configuration
HttpRequestInterceptor: hasValidAccessToken:  https://auth.myhost.com/pf/JWKS
oauth/oidc event discovery_document_loaded
oauth/oidc event discovery_document_loaded

Navigated to https://localhost:44306/?code=b5dcWoxpFnc2Z9lfaCJaVWoj-l0oEpo1AG8AAAAG&state=VGplenktRWZ3N21aNDh5UHdlSVMyMGJOVEJheDBMa0lTeU1kaGR1OTRoSy5Y

AppComponent:constructor
oauth/oidc event discovery_document_loaded
oauth/oidc event discovery_document_loaded
http-request-interceptor.service.ts:25 HttpRequestInterceptor: hasValidAccessToken:  https://auth.myhost.com/as/token.oauth2
refresh tokenResponse {access_token: "eyJhbGciOiJSUzI1NiIsImtpZCI6Ikx4cmdXck1EVV9nN3ROSV…Hq720zdSrR4UkPwBRTmfZIE0ZbLNHYl0v-DhNHChEBrSE0-OA", id_token: "eyJhbGciOiJSUzI1NiIsImtpZCI6Ikx4cmdXck1EVV9nN3ROSV…hynONaOjaeBKv63jKRm-m4VPC3JRysIRj0-zK4Y0C7VGdnjUA", token_type: "Bearer", expires_in: 7199}
oauth/oidc event token_received
oauth/oidc event token_refreshed

我想我在這里遺漏了一些非常簡單的東西，但是在過去 8 小時閱讀了 angular-oauth2-oidc 文檔、示例和谷歌搜索想法之后，我一無所獲。

謝謝

Answer 1

經過一夜的睡眠並重新閱讀了一些帖子后，我找到了使事情正常進行的正確組合。

首先，在我的 RouterModule 中，我重新配置以停止初始導航：

@NgModule({
  imports: [RouterModule.forRoot(routes, { initialNavigation: false })],

在我的 RouteGuard 中，我僅在檢索到令牌后才激活：

  canActivate(
    route: ActivatedRouteSnapshot, state: RouterStateSnapshot
  ) {
    let hasIdToken = this.oauthService.hasValidIdToken();
    let hasAccessToken = this.oauthService.hasValidAccessToken();
    return (hasIdToken && hasAccessToken);
  }

最重要的是，在我的 AppComponent 中，我將初始的 URL 傳遞給 initCodeFlow 並在返回時使用它：

  constructor(
    private oauthService: OAuthService,
    private router: Router,
    private location: Location,
  ) {
    this.url = this.location.path(true);
    this.configureOAuth();
  }

  private configureOAuth() {
    this.authConfig = {
      issuer: this.getIssuer(),
      clientId: environment.clientId,
      scope: 'openid profile email preferred_username',
      responseType: 'code',
      redirectUri: `${window.location.origin}/`,
      silentRefreshRedirectUri: `${window.location.origin}/silent-renew.html`,
      useSilentRefresh: true,
    };
       
    this.oauthService.configure(this.authConfig);
    this.oauthService.setupAutomaticSilentRefresh();

    return this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
      if (this.oauthService.hasValidIdToken()) {
        if (this.oauthService.state) {
          this.router.navigateByUrl(decodeURIComponent(this.oauthService.state));
        }
        else {
          this.router.navigateByUrl('/');
        }
        this.isLoaded = true;
      } else {
        // init with requested URL so it can be retrieved on response from state
        this.oauthService.initCodeFlow(this.url);
      }
    });
  }