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

Anbieter zum Thema

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.

Erfolgreiche User-Anmeldung durch Verwendung der MSAL.
Erfolgreiche User-Anmeldung durch Verwendung der MSAL.
(Bild: Drilling / Microsoft)

Eine SPA soll die MSAL verwenden, um Benutzer zu authentifizieren.
Eine SPA soll die MSAL verwenden, um Benutzer zu authentifizieren.
(Bild: Microsoft)

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.

Das Installieren von nvm per curl-Request.
Das Installieren von nvm per curl-Request.
(Bild: Drilling / Microsoft)

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 …

sudo apt-get install curl

… und …

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

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

Node.js wurde erfolgreich installiert.
Node.js wurde erfolgreich installiert.
(Bild: Drilling / Microsoft)

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

nvm install –lts

Der Befehl …

lvm ls

… listet dann alle installierten Versionen auf; und mit …

node --version

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

Visual Studio Code für WSL einrichten

Das Hinzufügen der Extension „Remote-WSL“ in der Windows-Version von VS-Code.
Das Hinzufügen der Extension „Remote-WSL“ in der Windows-Version von VS-Code.
(Bild: Drilling / Microsoft)

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.

Mit diesem „Trick“ nutzen Sie VS Code grafisch in einer WSL-Sitzung unter Linux.
Mit diesem „Trick“ nutzen Sie VS Code grafisch in einer WSL-Sitzung unter Linux.
(Bild: Drilling / Microsoft)

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

code .

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

Erweiterungen speziell für WSL.
Erweiterungen speziell für WSL.
(Bild: Drilling / Microsoft)

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“.

Das Node-Extension Pack für WSL.
Das Node-Extension Pack für WSL.
(Bild: Drilling / Microsoft)

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:

git clone https://github.com/Azure-Samples/ms-identity-javascript-tutorial.git

Alle Projektabhängigkeiten sind erfolgreich erfüllt.
Alle Projektabhängigkeiten sind erfolgreich erfüllt.
(Bild: Drilling / Microsoft)

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

npm install

… 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“.

Das Vervollständigen einer App-Registrierung samt Umleitungs-URL.
Das Vervollständigen einer App-Registrierung samt Umleitungs-URL.
(Bild: Drilling / Microsoft)

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“.

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Softwareentwicklung und DevOps

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung.

Aufklappen für Details zu Ihrer Einwilligung

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.

Das Anpassen des Demo-JS-Quellcodes mit den Registrierungsinformationen.
Das Anpassen des Demo-JS-Quellcodes mit den Registrierungsinformationen.
(Bild: Drilling / Microsoft)

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.

Die Einwilligung in der angeforderten App-Berechtigungen.
Die Einwilligung in der angeforderten App-Berechtigungen.
(Bild: Drilling / Microsoft)

Danach müssen wir die Beispielanwendung nur noch mit …

npm start

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

http://localhost:3000

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

Erfolgreiche User-Anmeldung durch Verwendung der MSAL.
Erfolgreiche User-Anmeldung durch Verwendung der MSAL.
(Bild: Drilling / Microsoft)

(ID:48555500)