Microsoft Authentication Library in der Praxis Single Page App mit MSAL.js-Authentifizierung

Da wir uns bereits mit den Grundlagen der Microsoft Identity Platform auseinandergesetzt haben, widmen wir uns nun einem Praxisbeispiel. Dieses zeigt, wie eine Javascript-basierte Singe Page App die Microsoft Authentication Library „MSAL.js“ verwendet, um User gegen einen Azure-Active-Directory-Mandanten zu authentifizieren.

Ganz nebenbei veranschaulicht der Beitrag im Übrigen auch noch einmal die verschiedenen Authentifizierungskonzepte wie z. B. ID-Tokens, OIDC-Bereiche, Single Sign-On und die Kontoauswahl. In folgendem Szenario nutzt die Client-Anwendung MSAL.js zum Anmelden von Benutzern und Abrufen von ID-Token vom Azure AD. Das ID-Token beweist, dass sich der Benutzer erfolgreich beim Mandanten „seiner“ Organisation angemeldet hat.

Um das Beispiel nachvollziehen zu können gilt es zunächst einmal, die entsprechenden Voraussetzungen zu schaffen. Wir benötigen einen modernen, HTML5-fähigen Browser wie Edge, Chrome oder Brave. Ferner benötigen wir Node.js, Visual Studio Code als Editor, vorzugsweise mit installierter Azure-Tools-Erweiterung, sowie einen AzureAD-Mandanten mit mindestens einem Benutzer darin.

Die Node.js-Installation unter Ubuntu erfordert zunächst das Installieren des Versionsmanagers nvm. Das ist mit …

… und …

… schnell erledigt. In der Abbildung führen wir Ubuntu in einer WSL-Umgebung unter Windows aus.

Danach installieren wir das aktuelle stabile LTS-Release von Node.js mit …

Der Befehl …

… listet dann alle installierten Versionen auf; und mit …

… lässt sich prüfen, ob und in welcher Version Node.js installiert ist.

Visual Studio Code für WSL einrichten

Anschließend empfiehlt es sich, VS Code und die Remote-WSL-Erweiterung für Windows zu installieren. Zwar ist VS Code auch für Linux verfügbar; da das Windows-Subsystem für Linux aber keine GUI-Apps unterstützt, müsste VS Code ohnehin unter Windows installiert werden. Die Integration von VS Code in die Befehlszeile von Linux ist jedoch durch Verwenden der Erweiterung „Remote-WSL“ problemlos möglich.

Wie erwähnt, sollte man daher auf jeden Fall die Erweiterung Remote-WSL in VS Code für Windows integrieren. Erst das ermöglicht die Verwendung von WSL als integrierte Entwicklungsumgebung, wobei die Verarbeitung der Kompatibilität und der Pfadzuordnung automatisch passiert. Remote WSL lässt sich als Extension sehr einfach installieren.

Anschließend können Sie einfach innerhalb ihres WSL-Fensters eine neue VS Code-Sitzung unter Linux starten:

Das Ergebnis sollte dann so aussehen wie im vorangestellten Bild, man achte auf den grünen Abschnitt links unten „WSL:Ubuntu“.

Auch wenn VS Code zahlreiche integrierte Funktionen zur Node.JS-Entwicklung mitbringt, bietet der Marktplatz noch einige weitere Erweiterungen, die sich für die Arbeit mit Node.Js anbieten. Navigieren Sie in der WSL-VS-Code-Sitzung zu Ihren Erweiterungen, finden Sie hier jetzt drei Abschnitte neben „LOCAL -INSTALLIERT“ und „EMPFOHLEN“ gibt es hier auch „WSL: Ubuntu INSTALLIERT“.

Hier können wir z. B nach dem „Node“ suchen“ und beispielsweise noch das „Node Extensions Pack“ installieren. Eine weitere empfehlenswerte Erweiterung zur Node-Entwicklung, wenn auch für dieses Beispiel nicht erforderlich, wäre z. B. der JavaScript-Debugger für die Client-Entwicklung.

Einrichten der Demo-App

Der Quellcode für dieses Beispiel findet sich übrigens im Azure-Samples-GitHub-Repository von Microsoft. Am einfachsten ist es, wenn Sie das gesamte Repository auf Ihren Arbeitsrechner (innerhalb der WSL-Sitzung) klonen:

Wechseln Sie dort ins Verzeichnis „ms-identity-javascript-tutorial“ und dort ins Unterverzeichnis „1-Authentication/1-sign-in“, um dann mit …

… die Projektabhängigkeiten erfüllen zu können.

Azure AD App-Registration

Im nächsten Schritt müssen wir die Anwendung im Azure AD registrieren. Wie das grundsätzlich vonstattengeht, haben wir bereits in unserem Artikel zur Microsoft Identity Platform (Link) gezeigt. Die App-Registrierung lässt sich z. B. manuell über das Azure-Portal vornehmen. Navigieren Sie dazu zum Blade „App-Registrierungen“ im Azure AD und klicken dort auf „Neue Registrierung“. Geben Sie dann auf der angezeigten Seite „Anwendung registrieren“ die Registrierungsinformationen der Anwendung ein, wie z. B. einen aussagekräftigen Anwendungsnamen, der Benutzerinnen und Benutzern der App angezeigt wird. Wir nehmen „ms-identity-js-example“.

Wählen Sie bei „Unterstützte Kontotypen“ die Option „Nur Konten in diesem Organisationsverzeichnis (nur "xxxxx.xx" – einzelner Mandant)“ aus. Wählen Sie dann im Abschnitt Umleitungs-URI (optional) im Kombinationsfeld „Single-Page-Anwendung (SPA)“ aus und geben Sie die folgende Umleitungs-URI ein: http://localhost:3000/. Klicken Sie dann auf „Registrieren“.

Wichtig ist es, sich nach erfolgreicher Registrierung die „Application (client) ID zu merken. Diese wird jetzt zum Konfigurieren der Anwendung für das Verwenden der App-Registrierung benötigt.

Dazu müssen Sie das Projekt in Ihrer IDE (hier Visual Studio oder Visual Studio Code) öffnen, um den Code zu konfigurieren. Wir öffnen die Datei „App\authConfig.js“ und suchen zuerst den Schlüssel „Enter_the_Application_Id_Here“ und geben hier den Wert der Client-ID ein. Anschließend gilt es, den Schlüssel „Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here“ durch den Wert der Tenant-ID zu ersetzen. Beide finden sich (auch) auf der Übersichtsseite zur App-Registrierung. Fehlt noch der Schlüssel „Enter_the_Redirect_Uri_Here“, der ebenfalls mit dem Wert aus der Anwendungsregistrierung ersetzt wird. Nach dem speichern des Codes sollte das Ergebnis etwa so aussehen, wie im Bild vorne.

Danach müssen wir die Beispielanwendung nur noch mit …

… ausführen und können dann die Demo-Web-App über …

… im Browser aufrufen. Klickt der Nutzer nun auf Sign-in, muss er den angeforderten Berechtigungen zustimmen (Consent).

(ID:48555500)