Keycloak z błędem Angular i Spring: GET http: // localhost: 8180 / auth / realms / Storage / protocol / openid-connect / 3p-cookies / step1.html 404 (nie znaleziono)

Próbuję zintegrować Keycloak z Spring Boot i Angular.

Bezpieczeństwo działa poprawnie. Kiedy próbuję uzyskać dostęp do zabezpieczonego punktu końcowego ręcznie przez przeglądarkę localhost:8080/products/1 (produkty są podmiotem w mojej bazie danych) , to jestem przekierowywany do klienta logowania Keycloak, po zalogowaniu mam dostęp do punktu końcowego.

Śledziłem ten samouczek .

Problem pojawia się, gdy próbuję uzyskać dostęp localhost:4200 (strona główna aplikacji Angular) , w konsoli przeglądarki pojawia się ten błąd:

keycloak.js:1305 GET http://localhost:8180/auth/realms/Storage/protocol/openid-connect/3p-cookies/step1.html 404 (Not Found)

Plik konfiguracyjny sprężyny: application-local.yml

keycloak:
  auth-server-url: 'http://localhost:8180/auth'
  realm: 'Storage'
  resource: 'storage-app-client'
  public-client: true
  principal-attribute: test123

Reszta plików konfiguracyjnych pochodzi z samouczka wspomnianego powyżej.

Kraina Keycloak:

Inicjalizacja Keycloak w Angular:

@Injectable({
  providedIn: 'root'
})
export class KeycloakService
{
  private keycloakAuth: KeycloakInstance;

  constructor()
  {
  }

  init(): Promise<any>
  {
    return new Promise((resolve, reject) =>
    {
      const config = {
        'url': 'http://localhost:8180/auth',
        'realm': 'Storage',
        'clientId': 'storage-app-client'
      };
      // @ts-ignore
      this.keycloakAuth = new Keycloak(config);
      this.keycloakAuth.init({onLoad: 'login-required'})
        .success(() =>
        {
          resolve();
        })
        .error(() =>
        {
          reject();
        });
    });
  }

  getToken(): string
  {
    return this.keycloakAuth.token;
  }

  logout()
  {
    const options = {
      'redirectUri': 'http://localhost:4200',
      'realm': 'Storage',
      'clientId': 'storage-app-client'
    };
    this.keycloakAuth.logout(options);
  }
}

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {APP_INITIALIZER, NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from "@angular/common/http";
import {MatSliderModule} from '@angular/material/slider';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {RouterModule} from '@angular/router';
import {NavbarComponent} from './components/navbar/navbar.component';
import {MainContentComponent} from './components/main-content/main-content.component';
import {ProductComponent} from './components/products/product/product.component';
import {HomeComponent} from './components/home/home.component';
import {ProductGroupComponent} from './components/productGroups/productGroup/product-group.component';
import {FooterComponent} from './components/footer/footer.component';
import {MatTableModule} from "@angular/material/table";
import {MatButtonModule} from "@angular/material/button";
import {MatPaginatorModule} from "@angular/material/paginator";
import {ProductUpdateComponent} from './components/products/product-update/product-update.component';
import {MatFormFieldModule} from "@angular/material/form-field";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {MatInputModule} from "@angular/material/input";
import {ProductCreateComponent} from './components/products/product-create/product-create.component';
import {MatSortModule} from "@angular/material/sort";
import {ProductGroupUpdateComponent} from './components/productGroups/product-group-update/product-group-update.component';
import {ProductGroupCreateComponent} from './components/productGroups/product-group-create/product-group-create.component';
import {MatExpansionModule} from "@angular/material/expansion";
import {MatSelectModule} from "@angular/material/select";
import {LogoutComponent} from "./components/logout/logout.component";
import {KeycloakService} from "./services/keycloak-service.service";
import {TokenInterceptor} from "./interceptors/token-interceptor";

export function kcFactory(keycloakService: KeycloakService) {
  return () => keycloakService.init();
}

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    MainContentComponent,
    ProductComponent,
    HomeComponent,
    ProductGroupComponent,
    FooterComponent,
    ProductUpdateComponent,
    ProductCreateComponent,
    ProductGroupUpdateComponent,
    ProductGroupCreateComponent,
    LogoutComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatSliderModule,
    MatToolbarModule,
    MatIconModule,
    RouterModule.forRoot([
      {path: '', component: HomeComponent},
      {path: 'products/update/:id', component: ProductUpdateComponent},
      {path: 'products/add', component: ProductCreateComponent},
      {path: 'groups', component: ProductGroupComponent},
      {path: 'groups/add', component: ProductGroupCreateComponent},
      {path: 'groups/update/:id', component: ProductGroupUpdateComponent},
      {path: 'logout', component: LogoutComponent},
    ]),
    MatTableModule,
    MatButtonModule,
    MatPaginatorModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    MatInputModule,
    MatSortModule,
    MatExpansionModule,
    MatSelectModule,
    FormsModule
  ],
  providers: [KeycloakService,
    {
      provide: APP_INITIALIZER,
      useFactory: kcFactory,
      deps: [KeycloakService],
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Klient Keycloak

Czuję twój ból. Śledziłem dzisiaj ten samouczek i utknąłem w tym samym błędzie GET 404:

https://dev.to/anjnkmr/keycloak-integration-in-angular-application-5a43

Błąd pochodzi z pakietu keycloak-js. Po kilku godzinach szukania przyczyny sprawdziłem wersje keycloak-js w wydaniu i stwierdziłem, że nowa wersja 11 została wydana 6 dni temu (i której używałem).

Przerzuciłem się na wersję 10.0.2 dla pakietu keycloak-js .

Podsumowując, oto wersje:

keycloak: 10.0.1

keycloak-js: 10.0.2

keycloak-angular: 8.0.1 (jeśli go używasz)

kątowy: 10 ** (w desperackim ruchu zaktualizowałem z kątowej 9 do 10, nie wiem, czy miało to wpływ)

Dlatego dla mnie to nowa wersja pakietu keycloak-js spowodowała cały problem.

Sugerowałbym, abyś spróbował obniżyć wersję keycloak-js do 10.0.2

Spróbuj użyć wersji keycloak.js z serwera Keycloak, korzystając ze ścieżki /auth/js/keycloak.js

Bibliotekę można pobrać bezpośrednio z serwera Keycloak pod adresem /auth/js/keycloak.js i jest ona również rozpowszechniana jako archiwum ZIP.

Najlepszą praktyką jest ładowanie adaptera JavaScript bezpośrednio z serwera Keycloak, ponieważ zostanie on automatycznie zaktualizowany podczas aktualizacji serwera. Jeśli zamiast tego kopiujesz adapter do aplikacji WWW, pamiętaj, aby zaktualizować adapter dopiero po zaktualizowaniu serwera.

Można odnieść to w celu uzyskania dalszych szczegółów.