Auf der Suche nach einer Möglichkeit eine einfache Web-Applikation zu erstellen um Benutzer in Azure-AD anzumelden, bin ich auf der Microsoft-Seite auf ein Tutorial mit Angular und MSAL gestoßen. Nachdem ich Angular nur namentlich kannte und ich von MSAL bisher nur gelesen hatte, konnte ich dabei einiges lernen:

• Angular kann einfach über nodejs getestet werden. Für einen Test kann dabei ein Entwicklungsserver auf localhost gestartet werden.
• Angular besteht für den produktiven Einsatz  aus einer statischen HTML-Datei: index.html, Javascript und CSS-Files. 
• Die Anmeldung an Azure erfolgt über Javascript direkt aus dem Browser: über einen direkten Aufruf aus Javascript auf die Microsoft-API (CORS). 

Tutorial 

Für den Test habe ich mich an folgende Anleitung gehalten: 

docs.microsoft.com/de-at/azure/active-directory/develop/tutorial-v2-angular-auth-code

Das Beispiel ähnelt dem SPA Quickstart-Beispiel der Azure Enterprise-Application: github.com/Azure-Samples/ms-identity-javascript-angular-spa

Entwicklungsumgebung

Getestet habe ich das Tutorial auf meinem Ubuntu-Rechner:

sudo apt-get install -y nodejs
ng new msal-angular-tutorial --routing=true --style=css --strict=false  
cd msal-angular-tutorial     
npm install @angular/material @angular/cdk 
npm install @azure/msal-browser @azure/msal-angular
ng generate component home 
ng generate component profile
npm install
npm start

produktiver Einsatz: Deployment

Jetzt läuft die Sache auf meinem Rechner, aber wie geht's weiter? Wie bekomme ich die Seite auf einen öffentlichen Webserver. Die Antwort habe ich auf der Angular-Seite gefunden: angular.io/start/start-deployment.

Der Befehl "ng build" erzeugt statische Files, welche auf einem beliebigen Server gehostet werden können. Zum Testen habe ich einen simplen Docker-Container mit einem Apache-Webserver gestartet und den Inhalt von /dist/msal-angular-tutorial veröffentlicht:

docker run -p 4200:80 -v /daten/temp/azure/msal-angular-tutorial/dist/msal-angular-tutorial/:/usr/local/apache2/htdocs/ httpd:2.4

AH00558: httpd: Could not reliably determine the server's fully qualified domain name, using 172.17.0.3. Set the 'ServerName' directive globally to suppress this message
AH00558: httpd: Could not reliably determine the server's fully qualified domain name, using 172.17.0.3. Set the 'ServerName' directive globally to suppress this message
[Tue Jun 15 16:07:30.869463 2021] [mpm_event:notice] [pid 1:tid 140660530336896] AH00489: Apache/2.4.48 (Unix) configured -- resuming normal operations
[Tue Jun 15 16:07:30.869791 2021] [core:notice] [pid 1:tid 140660530336896] AH00094: Command line: 'httpd -D FOREGROUND'
172.17.0.1 - - [15/Jun/2021:16:07:31 +0000] "GET / HTTP/1.1" 304 -
172.17.0.1 - - [15/Jun/2021:16:07:31 +0000] "GET /styles.31d6cfe0d16ae931b73c.css HTTP/1.1" 304 -
172.17.0.1 - - [15/Jun/2021:16:07:31 +0000] "GET /runtime.657c568085d063dc0fbf.js HTTP/1.1" 304 -
172.17.0.1 - - [15/Jun/2021:16:07:31 +0000] "GET /polyfills.f5a07fe06b4ca902d180.js HTTP/1.1" 304 -
172.17.0.1 - - [15/Jun/2021:16:07:31 +0000] "GET /main.0bdfba19a2587b0b61ab.js HTTP/1.1" 304 -
172.17.0.1 - - [15/Jun/2021:16:07:32 +0000] "GET /favicon.ico HTTP/1.1" 200 948
172.17.0.1 - - [15/Jun/2021:16:09:30 +0000] "GET / HTTP/1.1" 304 -
172.17.0.1 - - [15/Jun/2021:16:09:30 +0000] "GET /favicon.ico HTTP/1.1" 200 948
172.17.0.1 - - [15/Jun/2021:16:10:21 +0000] "-" 408 -
172.17.0.1 - - [15/Jun/2021:16:10:40 +0000] "GET /sockjs-node/info?t=1623773440305 HTTP/1.1" 404 196
172.17.0.1 - - [15/Jun/2021:16:10:42 +0000] "GET /sockjs-node/info?t=1623773442307 HTTP/1.1" 404 196

Anmeldung

Ein Blick in den Netzwerkreiter der Chrome-Devtools (F12) verrät einiges über die Funktionsweise:

Als erstes lädt der Browser die statischen Files: Domain localhost.

Beim Aufruf des Login-Buttons wird der Browser auf die Anmeldeseite von Microsoft umgeleitet und nach erfolgreicher Anmeldung können wir in der Test-App den Benutzernamen und die Mail-Adresse über msal auslesen:

Fazit

Das Beispiel liefert einen groben Überblick über den Anmeldevorgang einer Angular-App mit MSAL. Nachdem eine Angular-App über statische Files veröffentlicht werden kann, wird für den Betrieb einer Seite auf dieser Basis fürs erste keine serverseitige Logik benötigt. Klar ändert sich das schnell, wenn mehr als die Anmeldefunktion benötigt wird, dann fehlt hier schnell mal eine eigene API mit einer Datenbank, dennoch bietet der Ansatz in Bezug auf die Skalierbarkeit schon mal einen guten Startpunkt.