© best_vector/Shutterstock.com
Windows Developer
Teil 2: Mit der MSAL eine Single Page App in Azure AD B2C integrieren

Authentication Library für JavaScript

Azure AD B2C bietet eine relativ komfortable Möglichkeit, Authentifizierung und Autorisierung zu integrieren. Aber wie geht man bei einer Single Page App konkret vor? Die Microsoft Authentication Library for JavaScript nimmt uns dabei viel Arbeit ab - legt aber auch einige Fallstricke aus.

Thomas Mahringer


ArtikelserieTeil 1: Applikation mit dem Azure Active Directory B2C absichernTeil 2: Mit der MSAL eine Single Page App in Azure AD B2C integrieren

Im letzten Artikel dieser Reihe ging es vor allem um Authentifizierungsmöglichkeiten allgemein und um Azure AD B2C im Speziellen. Wir legten im Azure Portal ein AD B2C an und registrierten sowohl eine Frontend Single Page App als auch einen Backend Service. Außerdem definierten wir Benutzer-Flows für das Anmelden und/oder Registrieren eines Benutzers und für den Passwortreset. Damit wäre alles vorbereitet, um endlich mit den eigentlichen Apps zu beginnen.

MSAL und die App-Struktur

Die Microsoft Authentication Library for JavaScript ist ein GitHub-Projekt [1], das die in Teil 1 dieser Artikelserie beschriebenen Authentifizierungsabläufe über ein JavaScript-API zur Verfügung stellt. TypeScript Typings sind dafür ebenfalls vorhanden. Wir brauchen uns daher – theoretisch – nicht mit HTTP-Aufrufen, Redirects, Pop-ups, iframes und URL-Hash-Parsing auseinanderzusetzen. MSAL liegt seit Kurzem in einer finalen Version (1.x) vor und sollte damit auch in produktiven Apps einsetzbar sein. Die Installation erfolgt z. B. über npm (falls ein Bundling-Tool wie webpack verwendet wird, das npm-require unterstützt) oder einfach über ein -Tag in der HTML-Datei. Unser Beispielsystem (Abb. 1) besteht aus einem Single Page Frontend und einem Backend, die jeweils mit dem Azure AD kommunizieren. Das Frontend authentifiziert sich mittels eines Pop-up-Fensters bei AD B2C, erhält von letzterem Tokens (ID-Token, Access-Token, Details dazu später) und sendet Requests an das Backend. Mit jedem Request wird das von Azure AD erhaltene Access-Token mitgesendet. Das Backend überprüft zusammen mit dem Azure AD die Gültigkeit des Tokens und gewährt entsprechend Zugriff auf seine Ressourcen. Azure AD B2C ist in diesem Fall Identity Provider, Benutzer-DB sowie Applikations-Registry.

Abb. 1: Vereinfachte Struktur der App

Aufbau unserer Single-Page, „index.html“

Um bei unserem Beispiel den Fokus auf die AD-Abläufe zu legen, verwenden wir im wahrsten Sinne des Wortes eine Single-Page, eine einzige HTML-Datei. Sie enthält das UI und den gesamten Code. Das macht es einfacher, die einzelnen Schritte aber auch die Stolpersteine herauszuarbeiten. Mit einer echten Single Page App funktioniert es ganz ähnlich, mit der Ausnahme, dass in der index.html zusätzliche JS Bundles geladen werden. Um das Request-Handling zu vereinfachen, verwenden wir in diesem Bei...

Windows Developer
Teil 2: Mit der MSAL eine Single Page App in Azure AD B2C integrieren

Authentication Library für JavaScript

Azure AD B2C bietet eine relativ komfortable Möglichkeit, Authentifizierung und Autorisierung zu integrieren. Aber wie geht man bei einer Single Page App konkret vor? Die Microsoft Authentication Library for JavaScript nimmt uns dabei viel Arbeit ab - legt aber auch einige Fallstricke aus.

Thomas Mahringer


ArtikelserieTeil 1: Applikation mit dem Azure Active Directory B2C absichernTeil 2: Mit der MSAL eine Single Page App in Azure AD B2C integrieren

Im letzten Artikel dieser Reihe ging es vor allem um Authentifizierungsmöglichkeiten allgemein und um Azure AD B2C im Speziellen. Wir legten im Azure Portal ein AD B2C an und registrierten sowohl eine Frontend Single Page App als auch einen Backend Service. Außerdem definierten wir Benutzer-Flows für das Anmelden und/oder Registrieren eines Benutzers und für den Passwortreset. Damit wäre alles vorbereitet, um endlich mit den eigentlichen Apps zu beginnen.

MSAL und die App-Struktur

Die Microsoft Authentication Library for JavaScript ist ein GitHub-Projekt [1], das die in Teil 1 dieser Artikelserie beschriebenen Authentifizierungsabläufe über ein JavaScript-API zur Verfügung stellt. TypeScript Typings sind dafür ebenfalls vorhanden. Wir brauchen uns daher – theoretisch – nicht mit HTTP-Aufrufen, Redirects, Pop-ups, iframes und URL-Hash-Parsing auseinanderzusetzen. MSAL liegt seit Kurzem in einer finalen Version (1.x) vor und sollte damit auch in produktiven Apps einsetzbar sein. Die Installation erfolgt z. B. über npm (falls ein Bundling-Tool wie webpack verwendet wird, das npm-require unterstützt) oder einfach über ein -Tag in der HTML-Datei. Unser Beispielsystem (Abb. 1) besteht aus einem Single Page Frontend und einem Backend, die jeweils mit dem Azure AD kommunizieren. Das Frontend authentifiziert sich mittels eines Pop-up-Fensters bei AD B2C, erhält von letzterem Tokens (ID-Token, Access-Token, Details dazu später) und sendet Requests an das Backend. Mit jedem Request wird das von Azure AD erhaltene Access-Token mitgesendet. Das Backend überprüft zusammen mit dem Azure AD die Gültigkeit des Tokens und gewährt entsprechend Zugriff auf seine Ressourcen. Azure AD B2C ist in diesem Fall Identity Provider, Benutzer-DB sowie Applikations-Registry.

Abb. 1: Vereinfachte Struktur der App

Aufbau unserer Single-Page, „index.html“

Um bei unserem Beispiel den Fokus auf die AD-Abläufe zu legen, verwenden wir im wahrsten Sinne des Wortes eine Single-Page, eine einzige HTML-Datei. Sie enthält das UI und den gesamten Code. Das macht es einfacher, die einzelnen Schritte aber auch die Stolpersteine herauszuarbeiten. Mit einer echten Single Page App funktioniert es ganz ähnlich, mit der Ausnahme, dass in der index.html zusätzliche JS Bundles geladen werden. Um das Request-Handling zu vereinfachen, verwenden wir in diesem Bei...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang