【发布时间】：2020-11-16 13:56:21
【问题描述】：
我正在尝试将 Keycloak 与 Spring Boot 和 Angular 集成。
安全工作正常。当我尝试通过浏览器手动访问安全端点localhost:8080/products/1（产品是我的数据库中的实体），然后我被重定向到 Keycloak 登录客户端，登录后我可以访问端点.
我一直在关注这个tutorial。
当我尝试访问localhost:4200 （Angular 应用程序主页） 时出现问题，在浏览器控制台中我收到此错误：
keycloak.js:1305 GET http://localhost:8180/auth/realms/Storage/protocol/openid-connect/3p-cookies/step1.html 404 (Not Found)
弹簧配置文件： application-local.yml
keycloak:
auth-server-url: 'http://localhost:8180/auth'
realm: 'Storage'
resource: 'storage-app-client'
public-client: true
principal-attribute: test123
其余配置文件取自上述教程。
Keycloak 领域：
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 {
}
Keycloak 客户端
【问题讨论】：
-
您是否与 keycloak-angular javascript 适配器集成并在 angular 端初始化了 keycloak 配置？
-
将其发布在您的问题中，以及 app.module.ts
-
还有你的 Angular 客户端配置关闭 keycloak 的截图
-
遇到同样的问题（今天）。我在这个客户端旁边运行了另一个应用程序，它运行良好，但是一个单独的 Angular 应用程序（不同版本的 keycloak-angular 请注意）遇到了完全相同的错误。
-
我在较新的 Angular 应用程序中降级为 keycloak-angular 7.3.1 并且错误消失了。我以前有 8.0.1。我最终将在 8.0.1 上进行更多测试，但这暂时让我畅通无阻。可能与我的 keycloak 版本和 Angular 库不兼容。
标签： angular spring spring-boot spring-security keycloak