GEDOPLAN
Web SecurityWebprogrammierung

Keycloak + Protractor E2E Test

Web SecurityWebprogrammierung
flasks 606612 640

Keycloak ist eine charmante Authentifizierungs-Lösung die sich dank keycloak-angular relativ Problemlos in der eigenen Anwendung verankern lässt. Im Arbeitsalltag stolpert man dann aber in Kombination mit E2E-Tests über das ein oder andere Problem…

flasks 606612 640

Protractor ist cool, kümmert es sich doch normalerweise um all die asyncronen HTTP-Calls und Timer die in unserer Anwendung ablaufen. So wird der Test den wir deklarieren erst dann durchgeführt wenn z.B. die HTTP Abfrage + Rendering auch vollständig durchlaufen ist. Wenn wir Keycloak einsetzen scheitert dieses Vorgehen leider mit einem Timeout:

Failed: Angular could not be found on the page http://localhost:4200/.

If this is not an Angular application, you may need to turn off waiting for Angular.

Recht hat er ja auch irgendwie. Unsere Anwendung wird den User in aller Regel auf die Login-Seite von Keycloak weiter leiten. Was wir nun finden werden sind Ratschläge die Syncronisation zu deaktivieren:

  browser.waitForAngularEnabled(false);

Soweit so gut, nach erfolgreichem Login einfach wieder aktivieren und… nein doch nicht.

Keycloak blockiert bei diesem Vorgehen jegliche weiteren Tests, die somit auf einen Timeout laufen.

Nun könnten wir natürlich die Synchronisation wie oben zu sehen einfach deaktiviert lassen. Das wird uns allerdings nur wenig Glücklich machen, müssen wir doch so an sehr sehr vielen Stellen unnötige Prüfungen und “sleeps” verwenden, da wir nun selber auf die Abarbeitung der Asyncronen Calls reagieren und/oder warten müssen. Im entsprechenden BugTicket finden wir aber die Idee Keycloak einfach außerhalb von Angular zu initialisieren:

https://github.com/mauriciovigolo/keycloak-angular/issues/73#issuecomment-393967726

Um das bei Angular-Start durch zu führen + in unserem Beispiel sogar noch die Konfiguration für Keycloak von externer Quelle zu ziehen könnte das so aussehen:


const keycloakService = new KeycloakService();

@NgModule({
  ...
  providers: [
    {
      provide: KeycloakService,
      useValue: keycloakService,
    },
    {
      provide: APP_INITIALIZER,
      useFactory: onAppInit,
      deps: [KeycloakConfigControllerService],
      multi: true,
    },
  ]
})
export class AppModule implements DoBootstrap {
  constructor(public ngZone: NgZone) {}

  ngDoBootstrap(appRef: ApplicationRef) {
    this.initWithKeycloak().then(() => appRef.bootstrap(AppComponent));
  }

  initWithKeycloak() {
    return new Promise((resolve) => {
      this.ngZone.runOutsideAngular(() => {
        keycloakService
          .init({
          // normal init here
          })
          .then(() => {
            resolve();
          })
      });
    });
  }
}

export function onAppInit(kcConfig: KeycloakConfigControllerService) {
  return () =>
    new Promise<any>((resolve) => {
      kcConfig.getKeycloakConfig().subscribe((r) => {
        Object.assign(config, r);
        resolve();
      });
    });
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

IT-Training - GEDOPLAN
Jakarta EE (Java EE)

JEE Klassen > TypeScript

Ein JEE Backend ist mit wenig Aufwand über eine JSON basierte REST-Schnittstelle zur Verfügung gestellt. An diesem Punkt kann sich…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!