使用 angular-oauth2-oidc 和“无声刷新”，无需白名单silent-refresh.html

Question

我正在尝试将angular-oauth2-oidcSilent Refresh实现与 IdentityServer4 服务器中配置的隐式流结合使用。我有一个在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"中Client的RedirectUris财产。

我的问题是您是否可以angular-oauth2-oidc以不需要我将silent-refresh.html页面列入白名单的方式进行配置？

我问的原因是因为我想在更改 IdentityServer 端可能不太容易的情况下也使用这种静默刷新方法。此外，在 Angular 应用程序中查看Damien Bod 的 Silent Refresh 示例，我觉得它应该以某种方式成为可能，因为没有提到这样的白名单。

附注。如果我不包含 的额外选项RedirectUris，那么我会Invalid redirect_uri: http://localhost:4200/silent-refresh.html进入服务器（日志）和silent_refresh_timeout OAuthErrorEvent客户端库中的 a。

Answer 1

在与图书馆进行了更多合作之后，我认为答案是你不能轻易做到这一点。

如果必须这样做，则需要调整index.html为 Angular 应用程序提供服务的 Angular 应用程序，以便它以不同的方式引导。基本上，静默刷新将加载该文件而不是silent-refresh.html文件，因此索引必须有 2 种模式：一种用于常规应用程序加载，另一种用于有效执行此操作：

parent.postMessage(location.hash, location.origin);

因为这就是所有的silent-refresh.html事情了。但这可能有点困难，因为它需要挂钩到index.htmlCLI 创建生产构建时的生成。

因此，尽管技术上可行，但这样做并不是很务实。