如何通过 Angular 中的隐式流进行静默刷新？

Question

所以我有我们的令牌不会刷新的问题。不仅如此，我们的整个网站都在重复。这是背景：

我们有以下身份验证配置（或多或少）：

export const authConfig: AuthConfig = {
    issuer: '[censored]',
    redirectUri: window.location.origin + '/',
    silentRefreshRedirectUri: window.location.origin + '/assets/login-sources/silent-refresh.html',
    tokenEndpoint: '[censored]',
    loginUrl: '[same as tokenEndpoint]',
    clientId: '[censored]',
    scope: '[censored]',
    clearHashAfterLogin: true,
    oidc: true,
};

我们还有一个loginService，它大致做了如下的onInit：

this.oauthService.configure(authConfig);
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
// this.oauthService.setupAutomaticSilentRefresh(); - didn't work
this.oauthService.loadDiscoveryDocument([censored]).then((doc) => {
  // Subscribe to expiration event to refresh token.
  this.oauthService.events
    .pipe(filter(element => element.type === 'token_expires'))
    .subscribe(
      (a) => {
        console.log("Token is about to expire! Refreshing!");
        this.oauthService.silentRefresh().then(result => console.log(result)).catch(error => console.error(error));
      }
    );
  if (this.userid == null) {
    this.oauthService.tryLoginImplicitFlow().then((loggedIn) => {
      if (!loggedIn) {
        this.oauthService.initLoginFlow();
      }
    });
  }
});

问题：每当令牌过期时，都会发生以下事情：

• 整个网站克隆它的实例，所以两个实例并行运行（根据控制台） => 如果我们在没有所有这些事件监听器的情况下使用 automaticSilentRefresh，情况会更糟。在那里，它会无限期地克隆自己，直到内存用完
• 几秒钟后，我们在控制台中收到“刷新超时”错误，没有堆栈跟踪。

所以我查看了silentRefresh() 的代码，它似乎适用于iframe。在所说的 iframe 中应该只是简单的代码，用于刷新令牌并“与主应用程序通信”see here. We even implemented the refresh.html like here。然而，在我们的例子中，我们有一个 iframe，其中整个网站都是镜像的。这意味着我们有这样的东西：

html
  head /head
  body
    app-root /app-root
    iframe
      app-root /app-root
    /iframe
  /body
/html

因为对于每个silentRefresh()，每次创建整个网站的新实例时，iframe 都会被删除并重新添加到 DOM 中。我做错了什么，我该如何解决这个问题？

版本： 角 9 + “角度-oauth2-oidc”：“^9.0.1”， “angular-oauth2-oidc-jwks”：“^9.0.0”。

Answer 1

我在我的一些示例中使用的一种处理方法是仅在主窗口上运行时呈现主应用程序。在我的小示例中，我将 index.html 用于主应用程序和更新 iframe，但运行的代码会有所不同。

我的是ReactJS Sample，这是我使用的技术。尽管可能有替代解决方案，但希望这有助于以一种不太干扰的方式。

if (window.top === window.self) {

    // Run the main ReactJS app
    render (
        <App />,
        document.getElementById('root'),
    );
} else {

    // Run a minimal app to handle the iframe renewal
    const app = new IFrameApp();
    app.execute();
}