• 10. September 2017

angular-oauth2-oidc 2.1 released

Over the last weeks, I've worked on version 2.1 of my OpenId Connect (OIDC) certified library angular-oauth2-oidc which allows for implementing Authentication in Angular using external Identity Providers that support OAuth 2 or OIDC.

Here are the added features:

  • New Config API (the original one is still supported). This allows putting the whole configuration in an own file:

     // auth.config.ts
     
     import { AuthConfig } from 'angular-oauth2-oidc';
     
     export const authConfig: AuthConfig = {
     
       // Url of the Identity Provider
       issuer: 'https://steyer-identity-server.azurewebsites.net/identity',
     
       // URL of the SPA to redirect the user to after login
       redirectUri: window.location.origin + '/index.html',
     
       // The SPA's id. The SPA is registerd with this id at the auth-server
       clientId: 'spa-demo',
     
       // set the scope for the permissions the client should request
       // The first three are defined by OIDC. The 4th is a usecase-specific one
       scope: 'openid profile email voucher',
     }

    After defining the configuration object, you can pass it to the libraries configure method:

     import { OAuthService } from 'angular-oauth2-oidc';
     import { JwksValidationHandler } from 'angular-oauth2-oidc';
     import { authConfig } from './auth.config';
     import { Component } from '@angular/core';
     
     @Component({
         selector: 'flight-app',
         templateUrl: './app.component.html'
     })
     export class AppComponent {
     
         constructor(private oauthService: OAuthService) {
           this.configureWithNewConfigApi();
         }
     
         private configureWithNewConfigApi() {
           this.oauthService.configure(authConfig);
           this.oauthService.tokenValidationHandler = new JwksValidationHandler();
           this.oauthService.loadDiscoveryDocumentAndTryLogin();
         }
     }
  • New convenience methods in OAuthService to streamline default tasks:

    • setupAutomaticSilentRefresh()
    • loadDiscoveryDocumentAndTryLogin()
  • Single Sign out through Session Status Change Notification according to the OpenID Connect Session Management specs. This means, you can be notified when the user logs out using at the login provider:

    Single Sign out via Session Checks

    To use this feature, your Identity Provider needs to support it. You also have to activate it in the configuration:

     import { AuthConfig } from 'angular-oauth2-oidc';
     
     export const authConfig: AuthConfig = {
       [...]  
       sessionChecksEnabled: true,
       sessionCheckIntervall: 3 * 1000
     }

    The optional configuration option sessionCheckIntervall which defaults to 3000 msec defines the interval that is used to check whether the user has logged out at the identity provider.

  • Possibility to define the ValidationHandler, the Config as well as the OAuthStorage via DI

     [...],
     providers: [
         {provide: AuthConfig, useValue: authConfig },
         { provide: OAuthStorage, useClass: DemoStorage },
         { provide: ValidationHandler, useClass: JwksValidationHandler },
     ],
     [...]
  • Better structured documentation:

    Documentation

 

 
Hier können Sie eine Anfrage für eine unverbindliche Schulung ode Beratung bzw. einen Workshop erstellen.
 
Unverbindliche Anfrage
 
 

Schulungen

Angular Schulung: Strukturierte Einführung

Lernen Sie in dieser interaktiven Schulung anhand einer Beispielanwendung den Einsatz von Angular für Ihre erfolgreichen Projekte kennen. Sie durchdringen die Hintergründe und bauen von der ersten Minute an auf Best Practices auf.

Details

Advanced Angular: Enterprise-Anwendungen und Architektur

In dieser Schulung erfahren Sie alles für die Entwicklung großer Anwendungen mit Angular: Mono-Repos, Micro-Apps, State Management, Performance und mehr

Details

Angular: Strukturierte Einführung

Seit der Ankündigung von Angular (2+) fragen sich Entwicklungs-Teams, welche Migrationspfade für AngularJS-1.x-Anwendungen vorliegen werden. Das im Lieferumfang von Angular enthaltene ngUpgrade bietet eine Antwort darauf. Es erlaubt einen Parallelbetrieb von AngularJS 1.x und Angular (2+) und stellt somit die Grundlage für eine schrittweise Migration dar.

Details

Progressive Web-Apps mit Angular

Progressive Web Apps bieten den Komfort nativer Anwendungen, indem sie auf moderne Browser APIs, wie Service Worker, setzen. Sie sind installierbar sowie offlinefähig und nutzen Hintergrundprozesse für Datensynchronisation und Push-Notifications. Diese Schulung zeigt anhand eines durchgehenden Beispiels was sich genau hinter diesem neuen Konzept verbirgt, wie solche Anwendungen mit Angular entwickelt werden und wie Sie in Ihren Projekten von den dahinterstehenden Ideen profitieren.

Details

Reaktive Architekturen mit Angular und Redux

Dieses interaktive Seminar vermittelt, wie Sie reaktive Anwendungen mit Angular entwickeln können.

Details

TypeScript

TypeScript gibt Ihnen alle Möglichkeiten der neuen JavaScript-Standards und zusätzlich ein statisches Typsystem, das dabei hilft, Fehler möglichst früh zu erkennen. Außerdem ist TypeScript die Grundlage für Angular. In diesem interaktiven Seminar lernen Sie diese mächtige Sprache anhand einer Fallstudie kennen.

Details

Weitere Schulungen ...