Authentication in Angular 2 with OAuth2, OIDC and Guards for the newest new Router [English Version]

This post shows how an application can use canActivate to keep an unauthenticated or unauthorized user away from specific routes. This isn't really about security, cause in browser-based applications security has to be implemented at server-side. Rather it's about usability cause it gives the application the possibility to ask the user to login in such cases. The whole source code of this sample can be found here. Besides Guards it also uses the security standards OAuth 2 and OpenId Connect (OIDC) to decouple the authentication and authorization from the application. [Mehr]

Authentifizierung in Angular 2 mit OAuth2, OIDC, dem neuen Router und Guards

Dieser Beitrag zeigt, wie eine Anwendung mit canActivateunberechtigte Benutzer von bestimmten Routen fernhalten kann. Dies dient weniger der Sicherheit, zumal Sicherheit bei Browser-basierten SPAs immer im Backend zu realisieren ist. Vielmehr dient dies der Benutzerfreundlichkeit, da hierdurch die Anwendung den Benutzer im Fall des Falls zur Anmeldung auffordern kann. Der gesamte Quellcode des hier präsentierten Beispiels findet sich hier. Es nutzt neben dem Guard-Konzept auch die Security-Standards OAuth 2 und OpenId Connect (OIDC), um die Authentifizierung und Autorisierung von der Anwendung zu entkoppeln und Single-Sign-On zu ermöglichen. [Mehr]

Influencing Routing with Guards using the new Angular-2-Router

Using Guards, Angular-2-Applications can get informed about changes to the current route by the new Angular-2-Router that is available since June 2016. These Guards are just services and replace the lifecycle-hooks of the BETA-router. Their methods that are defined by interfaces are called by the router when it activates or deactivates a component. The returned value defines whether the router is allowed to perform the requested route-change. Valid values are true, false and Observable. The latter one allows to postpone the decision so that the application can delegate to a service or talk to the user before making up its decision. [Mehr]

Mit Guards ins Routing des Angular-2-Routers eingreifen

Mit Guards können sich Angular-2-Anwendungen über Routenwechsel des neuen, seit Juni 2016 zur Verfügung stehenden Angular-2-Routers (Version 3) informieren lassen. Dabei handelt es sich lediglich um Services, welche die Lifecycle-Hooks des "BETA-Routers" ablösen. Ihre über Interfaces vorgegebenen Methoden ruft der Router beim Deaktivieren einer Komponente bzw. beim Aktivieren einer neuen Komponente auf. Der zurückgelieferte Wert bestimmt, ob der Router den angeforderten Routenwechsel tatsächlich durchführen darf. Hierzu kommen true, false oder ein Observable zum Einsatz. Letzteres erlaubt das Hinauszögern der Entscheidung, um zum Beispiel eine Web API zu konsultieren oder Rücksprache mit dem Benutzer zu halten. [Mehr]

Writing custom form controls for Angular 2 [EN]

If you want your components to work with declarative (template-driven) and imperative forms, you have to implement the interface ControlValueAccessor. The methods defined by this interface permit Angular 2 to read and set the state of the control in question. [Mehr]

Eigene Formular-Steuerelemente für Angular 2 schreiben

Sollen eigene Angular 2-Komponenten mit deklarativen (template-driven) und imperativen Formularen zusammenspielen, ist das Interface ControlValueAccessor zu implementieren. Die von diesem Interface definierten Methoden erlauben ein Abgleichen der Komponente mit dem Objektgraphen, über den Angular 2 ein Formular beschreibt. [Mehr]

Schulung und Beratung

Angular 2

Datenbindung, Formulare, Validierung, Routing, HTTP, Komponenten, ...

Details

Migration auf Angular 2

Bestehende Projekte auf Angular 2 migrieren, ngUpgrade, ...

Details

Progressive Web-Apps mit Angular 2

InHouse-Schulung und/oder Beratung maßgeschneidert für Ihre Lernziele

Details

Architektur-Workshop

Interaktiver Prototyp-Workshop für Ihre Anwendung

Details

Entity Framework (EF)

Datenzugriff mit Entity Framework, Mapping-Szenarien, CRUD, Transaktionen, Migrations, Stored Procedures, Vererbung, Neuerungen in Version 7

Details

Angular 2: Deep Dive

Erweiterte Aspekte von Angular 2

Details

ASP.NET WebAPI

Web APIs mit ASP.NET, HTTP, REST, Security, Formatter, Tracing, OData, Streaming

Details

Web APIs mit ASP.NET MVC 6

Web APIs mit ASP.NET, HTTP, REST, Security, Formatter, Tracing, OData, Streaming

Details

Moderne Security-Szenarien für Web APIs

OAuth 2, OpenId Connect, JWT, Spielarten und Flows, ...

Details

Weitere Schulungen ...