角度 5，钥匙斗篷角端错误

Question

我正在尝试在 https://github.com/mauriciovigolo/keycloak-angular 的帮助下将我的angular 5应用程序连接到Keycloak服务器。

但是我在访问网站时收到以下错误。

ERROR An error happened during Keycloak initialization. core.js:1449
defaultErrorLogger core.js:1449
ErrorHandler.prototype.handleError core.js:1510
_callAndReportToErrorHandler/</< core.js:5693:54
ZoneDelegate.prototype.invoke zone.js:392
Zone.prototype.run zone.js:142
NgZone.prototype.runOutsideAngular core.js:4708:47
_callAndReportToErrorHandler/< core.js:5693
ZoneDelegate.prototype.invoke zone.js:392
onInvoke core.js:4760
ZoneDelegate.prototype.invoke zone.js:391
Zone.prototype.run zone.js:142
scheduleResolveOrReject/< zone.js:873
ZoneDelegate.prototype.invokeTask zone.js:425
onInvokeTask core.js:4751
ZoneDelegate.prototype.invokeTask zone.js:424
Zone.prototype.runTask zone.js:192
drainMicroTaskQueue zone.js:602
ZoneTask.invokeTask zone.js:503
invokeTask zone.js:1540
globalZoneAwareCallback zone.js:1566

Unhandled Promise rejection: An error happened during Keycloak initialization. ; Zone: <root> ; Task: Promise.then ; Value: An error happened during Keycloak initialization. undefined zone.js:690
api.onUnhandledError zone.js:690
handleUnhandledRejection zone.js:717
_loop_1 zone.js:707
api.microtaskDrainDone zone.js:711
drainMicroTaskQueue zone.js:610
ZoneTask.invokeTask zone.js:503
invokeTask zone.js:1540
globalZoneAwareCallback zone.js:1566

那是我的环境。

import { KeycloakConfig } from 'keycloak-angular';
const keycloakConfig: KeycloakConfig = {
url: 'https://devel.localhost:8443/auth',
realm: 'MAP',
clientId: 'webapp'
}
export const environment = {
production: false,
keycloak: keycloakConfig
};

那是我的应用程序.authguard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { KeycloakService, KeycloakAuthGuard } from 'keycloak-angular';
@Injectable()
export class AppAuthGuard extends KeycloakAuthGuard {
constructor(protected router: Router, protected keycloakAngular: KeycloakService) {
super(router, keycloakAngular);
}
isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
return new Promise(async (resolve, reject) => {
if (!this.authenticated) {
this.keycloakAngular.login();
return;
}
const requiredRoles = route.data.roles;
if (!requiredRoles || requiredRoles.length === 0) {
return resolve(true);
} else {
if (!this.roles || this.roles.length === 0 ) {
resolve(false);
}
let granted: boolean = false;
for (const requiredRole  of requiredRoles) {
if (this.roles.indexOf(requiredRole) > -1) {
granted = true;
break;
}
}
resolve(granted);
}
});
}
}

最后是我的应用程序

import { KeycloakService } from 'keycloak-angular';
export function initializer(keycloak: KeycloakService): () => Promise<any> {
return (): Promise<any> => {
return new Promise(async (resolve, reject) => {
try {
await keycloak.init();
resolve();
} catch (error) {
reject(error);
}
});
};
}

我找不到设置中的问题。我按照图书馆的 github 页面上提供的解释进行操作。

Answer 1

似乎keycloak-js没有找到你的配置。在初始值设定项函数中，没有配置参数。如果您创建一个 keycloak.json 配置文件，如应用程序根目录下的 keycloak-js 适配器文档所示，它将完美工作。

如果不想创建 keycloak.json 文件，则必须将环境文件中的值传递给 KeycloakService 的 init 方法，如 keycloak-heroes 示例中所示。

例如：

import { KeycloakService } from 'keycloak-angular';
import { environment } from '../../environments/environment';
export function initializer(keycloak: KeycloakService): () => Promise<any> {
return (): Promise<any> => {
return new Promise(async (resolve, reject) => {
try {
await keycloak.init({
config: environment.keycloak,
initOptions: {
onLoad: 'login-required',
checkLoginIframe: false
},
bearerExcludedUrls: []
});
resolve();
} catch (error) {
reject(error);
}
});
};
}

如果您有任何其他问题，该库还提供松弛频道。

谢谢！