typescript - KeyCloak登录导致死循环

Question

我最近开始将 KeyCloak 与 Angular 结合使用。我的 KeyCloak Docker 在端口 8080 上运行，我的 Angular-Application 在端口 4200 上运行。现在，当我通过浏览器访问我的应用程序时，我被重定向到 auth/realms/... 并使用适当的重定向-网址。到目前为止，这是预期的行为。然而，在 KeyCloak 登录页面加载之前，我被重定向回 auth/realms/...，但这次我的重定向 url 是旧的 auth/realms/... 我刚才有。

问题似乎不是 KeyCloak 本身，而是我的 Angular 实现，因为即使我禁用我的 KeyCloak 客户端或访问错误的客户端，我也会得到相同的行为。

现在是一些代码。我已经像这样设置了我的 KeyCloakOptions:

export const keycloakOptions: KeycloakOptions = {
  config: {
    url: '/auth',
    realm: 'bookstore',
    clientId: 'bookstore-front-end'
  },
  initOptions: {
    onLoad: 'login-required',
    checkLoginIframe: false
  },
  enableBearerInterceptor: true,
  bearerExcludedUrls: ['/assets']
};

服务是这样初始化的:

export class AppModule implements DoBootstrap {

  public ngDoBootstrap(appRef: ApplicationRef): void {
    keycloakService
      .init(keycloakOptions)
      .then(() => {
        console.log('[ngDoBootstrap] bootstrap app');
        appRef.bootstrap(AppComponent);
      })
      .catch(error => console.error('[ngDoBootstrap] init Keycloak failed', error));
  }
}

我怀疑我的应用程序路由与问题有关。它看起来像这样:

const routes: Routes = [
  // home route protected by auth guard
  {path: 'books', component: BooksComponent, canActivate: [AuthGuard]},

  // otherwise redirect to home
  {path: '', redirectTo: 'books', pathMatch: 'full'}
];

如果您需要任何进一步的代码，请告诉我，我们感谢您的帮助。

编辑:

我的第一个请求是这样的:

http://localhost:4200/auth/realms/bookstore/protocol/openid-connect/auth?client_id=bookstore-front-end&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2F&state=c530f55a-b21e-43c3-8e1c-a3beb134c9ee&response_mode=fragment&response_type=code&scope=openid&nonce=0c359787-92e7-4d6d-9578-a65da686b046

但是我刚刚意识到，在我的响应正文中，我得到了我的应用程序的 index.html 文件，这很奇怪。

Answer 1

您配置 Keycloak 客户端的方式，它永远不会重定向到 Angular。相反，它会重定向到自身(使用略有不同的 URL)。请求的 URL 中的端口号 4200 是赠品。

要修复，请更改 Keycloak 配置(在 Angular 中)。换行

  url: '/auth',

到:

  url: 'http://localhost:8080/auth',