угловой 5 с ключом-угловым концом по ошибке

Question

Я пытаюсь подключить мое приложение angular 5 к серверу keycloak с помощью https://github.com/mauriciovigolo/keycloak-angular.

Но я получаю следующую ошибку при доступе к сайту.

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

Это мое окружение.ts

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
};

Это мой app.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);
        }
    });
}
}

И, наконец, мой app.init.ts

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 docs в корне вашего приложения.

Если вы не хотите создавать файл keycloak.json, вам нужно передать значения из файла среды в метод init KeycloakService, как показано в примере 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);
      }
    });
  };
}

Если у вас есть другие проблемы, библиотека также предлагает слабый канал .

Спасибо!