KeyCloak Login приводит к бесконечному циклу

Недавно я начал использовать KeyCloak с Angular. Мой докер KeyCloak работает на порту 8080, а мое приложение Angular - на 4200. Теперь, когда я получаю доступ к своему приложению через браузер, я перенаправляюсь на auth/realms/... с соответствующим URL-адресом перенаправления. Это ожидаемое поведение на данный момент. Однако до того, как страница входа в 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 файл моего приложения, что странно.


person AndideBob    schedule 04.02.2020    source источник
comment
Можете ли вы показать полный журнал всех запросов? (Инспектор вашего браузера может записать это.) Отображается ли страница входа в систему, если вы попробуете ее в частном сеансе / окне? Действительно ли ваша конфигурация содержит URL-адрес auth или это отредактированное значение для этого вопроса? Возможно, отсутствует порт 8080.   -  person Codo    schedule 04.02.2020
comment
Я отредактировал пост. Остальные запросы остаются такими же, но с более длинным и длинным URL-адресом перенаправления.   -  person AndideBob    schedule 04.02.2020


Ответы (1)


Как вы настроили клиент Keycloak, он никогда не перенаправляется на Angular. Вместо этого он перенаправляет на себя (с немного другим URL-адресом). Номер порта 4200 в запрошенном URL-адресе является подарком.

Чтобы исправить это, измените конфигурацию Keycloak (в Angular). Измените строку

  url: '/auth',

to:

  url: 'http://localhost:8080/auth',
person Codo    schedule 04.02.2020
comment
Спас меня, спасибо - person Cristiano Fontes; 22.02.2021