使用 StsConfigHttpLoader 时错误找不到匹配的状态配置

Question

我在使用 v15.2.10 的 Angular 项目中使用 Angular-auth-oidc-client 库 v16.0.2。 当我使用静态身份验证配置时，一切正常，但如果我使用异步身份验证配置，则会在对用户进行身份验证时收到错误“无法找到状态 ${stateParamFromUrl} 的匹配配置”。

• 我尝试设置historyCleanupOff = false
• 我不使用任何 Angular-auth-oidc-client 库 authGuard
• 身份验证被触发，我得到代码在callbackComponent处停止（isAuthenticated$订阅永远不会返回，并且我收到上面提到的错误）。

auth-config.module.ts

/** Static config loading works perfectly fine */
export const StaticAuthConfigLoaderFactory = (): StsConfigLoader => {
            const authConfig = {
                    triggerAuthorizationResultEvent: true,
                    forbiddenRoute: `${window.location.origin}/error`,
                    unauthorizedRoute: `${window.location.origin}/error`,
                    logLevel: LogLevel.Debug,
                    historyCleanupOff: false,
                    authority: 'https://mySSO.com',
                    redirectUrl: `${window.location.origin}/callback`,
                    postLogoutRedirectUri: `${window.location.origin}/logout`,
                    clientId: 'angular-test',
                    scope: 'openid profile',
                    responseType: 'code',
                    silentRenew: false,
                    useRefreshToken: true,
               };
      return new StsConfigLoader(authConfig);
    }

/** Http config loading fails at callback */
export const HttpAuthConfigLoaderFactory = (httpClient: HttpClient): StsConfigLoader => {
  const authConfigPath = `assets/config/auth-config.json`;
  let authConfig$ = httpClient.get<OpenIdConfiguration>(authConfigPath)
    .pipe(
      catchError((err) => {
        console.error('Failed to load auth config', err);
        return throwError(err);
      }),
      map((customConfig: any) => {
        const obj = {
          authority: customConfig.authority,
          redirectUrl: customConfig.redirectUrl,
          clientId: customConfig.clientId,
          responseType: customConfig.responseType,
          scope: customConfig.scope,
          postLogoutRedirectUri: customConfig.postLogoutRedirectUri,
          silentRenew: false,
          postLoginRoute: customConfig.postLoginRoute,
          forbiddenRoute: customConfig.forbiddenRoute,
          unauthorizedRoute: customConfig.unauthorizedRoute,
          logLevel: LogLevel.Debug,
          historyCleanupOff: false,
        };
        return obj;
      })
    );
  return new StsConfigHttpLoader(authConfig$);
};
@NgModule({   imports: [
    AuthModule.forRoot({
      loader: {
        provide: StsConfigLoader,
        useFactory: HttpAuthConfigLoaderFactory,
        deps: [HttpClient],
      },
    }),   
   ],   
   exports: [AuthModule], 
}) 

export class AuthConfigModule { }

Answer 1

这可能不是正确的答案，但我能够通过将配置（一旦获取）保存在会话缓存中并稍后从缓存中检索来解决该问题。序列和代码片段-

代码流程：

1. 在身份验证流程开始之前获取身份验证配置。
2. CallBackComponent 使用来自 sso 服务器的“代码”进行调用。
3. 一旦用户通过身份验证，用户将自动重定向到调用 Authorize() 的组件 --> 这是没有 authGuards 的情况 都用过。
4. 再次获取身份验证配置，这是我面临的时候 错误。

解决方案：

1. 让动态身份验证配置获取保持原样，但将配置保存在 会话缓存。

2-3。这些步骤没有变化。

4. 从会话缓存中获取身份验证配置并返回 StsConfigStaticLoader 而不是 StsConfigHttpLoader --> 这解决了我的问题。

注意：我在sample-code-flow-http-config (https://www.npmjs.com/package/angular-auth-oidc-client)中尝试使用我的SSO服务器和clientID进行动态配置，代码流程是与我的完全相同 - Auth 配置被获取两次，但我没有看到我面临的问题 --> Angular-auth-oidc-client lib 和 Angular 都在 V18 上，节点为 v20。

代码片段：

export const HttpAuthConfigLoaderFactory = (httpClient: HttpClient): StsConfigLoader => {
  const sessionCache = inject(SessionService);

  const cachedConfig = sessionCache.getItem('auth_config');
  **if (cachedConfig) {
    return new StsConfigStaticLoader(cachedConfig);
  }**

const authConfigPath = `assets/config/auth-config.json`;
  let authConfig$ = httpClient.get<OpenIdConfiguration>(authConfigPath)
    .pipe(
      catchError((err) => {
        console.error('Failed to load auth config', err);
        return throwError(err);
      }),
      map((customConfig: any) => {
        const obj = {
          authority: customConfig.authority,
          redirectUrl: customConfig.redirectUrl,
          clientId: customConfig.clientId,
          responseType: customConfig.responseType,
          scope: customConfig.scope,
          postLogoutRedirectUri: customConfig.postLogoutRedirectUri,
          silentRenew: false,
          postLoginRoute: customConfig.postLoginRoute,
          forbiddenRoute: customConfig.forbiddenRoute,
          unauthorizedRoute: customConfig.unauthorizedRoute,
          logLevel: LogLevel.Debug,
          historyCleanupOff: false,
        };
        return obj;
      })
    );
  return new StsConfigHttpLoader(authConfig$);
};

现在这个问题已经为我解决了。如果我发现代码中有任何差距，我将更新线程。

谢谢， RDV