带有 Angular 和 Spring 错误的 Keycloak：GET http://localhost:8180/auth/realms/Storage/protocol/openid-connect/3p-cookies/step1.html 404（未找到）

Question

我正在尝试将 Keycloak 与 Spring Boot 和 Angular 集成。

安全工作正常。当我尝试通过浏览器手动访问受保护的端点时localhost:8080/products/1 （产品是我数据库中的实体），然后我被重定向到 Keycloak 登录客户端，登录后我可以访问该端点。

我一直在关注本教程。

当我尝试访问localhost:4200 (Angular app main page) 时出现问题，在浏览器控制台中我收到此错误：

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

Spring 配置文件： application-local.yml

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

其余配置文件取自上述教程。

钥匙斗篷领域：

Angular 中的 Keycloak 初始化：

@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 {
}

密钥斗篷客户端

Answer 1

我感觉到你的痛苦。我今天正在关注本教程并陷入相同的 GET 404 错误：

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

错误来自 keycloak-js 包。经过几个小时的尝试寻找原因后，我检查了 keycloak-js 的发布版本，发现新版本 11 是在 6 天前发布的（我正在使用它）。

我为keycloak-js包切换到10.0.2版。

总结一下这里是版本：

钥匙披风：10.0.1

keycloak-js：10.0.2

keycloak-angular：8.0.1（如果你使用它）

angular: 10**（我拼命从angular 9升级到了10，不知道有没有影响）

因此对我来说，是新版本的 keycloak-js 包造成了所有的麻烦。

我建议您尝试将 keycloak-js 的版本降级到 10.0.2