Keycloak con errore Angular e Spring: GET http: // localhost: 8180 / auth / realms / Storage / protocol / openid-connect / 3p-cookies / step1.html 404 (non trovato)

Sto cercando di integrare Keycloak con Spring Boot e Angular.

La sicurezza funziona correttamente. Quando cerco di accedere manualmente all'endpoint protetto tramite il browser localhost:8080/products/1 (i prodotti sono un'entità nel mio database) , vengo reindirizzato al client di accesso Keycloak, dopo aver effettuato l'accesso ho accesso all'endpoint.

Ho seguito questo tutorial .

Il problema si verifica quando cerco di accedere localhost:4200 (pagina principale dell'app Angular) , nella console del browser ricevo questo errore:

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

File di configurazione Spring: application-local.yml

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

Il resto dei file di configurazione è tratto dal tutorial menzionato sopra.

Regno di Keycloak:

Inizializzazione di Keycloak in 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 {
}

Client Keycloak

Condivido il tuo dolore. Oggi stavo seguendo questo tutorial e sono rimasto bloccato nello stesso errore GET 404:

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

L'errore proviene dal pacchetto keycloak-js. Dopo un paio d'ore di tentativi di trovare la causa, ho controllato le versioni di rilascio di keycloak-js e ho scoperto che la nuova versione 11 era stata rilasciata 6 giorni fa (e che stavo usando).

Sono passato alla versione 10.0.2 per il pacchetto keycloak-js .

Per riassumere ecco le versioni:

keycloak: 10.0.1

keycloak-js: 10.0.2

keycloak-angular: 8.0.1 (se lo usi)

angolare: 10 ** (in una mossa disperata ho aggiornato da angolare 9 a 10, non so se ha avuto un impatto)

Quindi per me è stata la nuova versione del pacchetto keycloak-js a causare tutti i problemi.

Ti suggerirei di provare a eseguire il downgrade della versione di keycloak-js alla 10.0.2

Prova a utilizzare una versione di keycloak.js dal tuo server keycloak dal percorso /auth/js/keycloak.js

La libreria può essere recuperata direttamente dal server Keycloak su /auth/js/keycloak.js ed è anche distribuita come archivio ZIP.

Una best practice consiste nel caricare l'adattatore JavaScript direttamente da Keycloak Server poiché verrà aggiornato automaticamente quando si aggiorna il server. Se invece copi l'adattatore nella tua applicazione web, assicurati di aggiornare l'adattatore solo dopo aver aggiornato il server.

Puoi fare riferimento a questo per ulteriori dettagli.