Bisher fragt die SPA die API ohne Ausweis. Diese Lektion gibt ihr einen: Die Benutzerin meldet sich bei Entra ID an, MSAL Angular holt ein Token und hängt es an jede Anfrage an /api, die API prüft Bereich und Rolle. Die Anmeldung und die Registrierungen kennen Sie aus K2 6 (Anmelden, App-Rollen Buero und Leitung in 6.3); hier kommt nur die Seite des Browsers dazu. Der Teil der Kladde: core/auth und die API.

Stand der Prüfung. Nicht ausgeführt: jede Anmeldung gegen Entra ID, jedes echte Token, die Rollenprüfung mit einem Token; es gab keinen Mandanten. Ausgeführt (Angular 22.2, @azure/msal-angular 6.3.1, @azure/msal-browser 5.29.0, Node 24.22.3): ng build Exit-Code 0 (Warnung: Anfangsbündel gut 24 kB über dem Budget von 500 kB), ng test --no-watch Exit-Code 0 (Test der Wurzel mit Stellvertretern, dazu der Test aus 0302). API-Probe (.NET 10.0.400, Microsoft.Identity.Web 4.18.0): dotnet build ohne Warnung; ohne Token 401 mit WWW-Authenticate: Bearer (curl). MSAL-Aussagen stammen aus lib/msal-angular/docs im Repository von MSAL.js, aus .d.ts und Quelltext des installierten Pakets und aus Learn. Eine Learn-Anleitung für Angular mit MSAL: offen.

Was im Browser geschieht

Eine SPA ist ein öffentlicher Client: Ihr Paket liegt als Datei beim Besucher, jeder kann es lesen. Learn sagt es für den Ablauf so: Ein client_secret darf in einer SPA nicht benutzt werden, weil er sich auf einer Webseite nicht zuverlässig verwahren lässt; öffentliche Clients lösen den Code ohne Geheimnis und ohne Schlüsselnachweis ein. Der Ablauf:

  1. Die SPA leitet den Browser zu Entra ID, mit client_id, scope, einer code_challenge (PKCE, S256) und redirect_uri.
  2. Die Benutzerin meldet sich dort an; Entra ID leitet mit einem kurzlebigen code zurück (laut Seite etwa eine Minute gültig).
  3. MSAL tauscht den Code gegen Token und beweist mit dem code_verifier, dass es dieselbe Anwendung ist, die gestartet hat.
  4. Das Access Token geht als Authorization: Bearer … an die API.

Für SPAs muss die Weiterleitung als Typ Single-page application registriert sein; sonst scheitert der Tausch im Browser an CORS No 'Access-Control-Allow-Origin' header). Das Refresh Token einer solchen Weiterleitung gilt laut Seite 24 Stunden, danach läuft die Anmeldung erneut durch. Und: Ein Access Token ist für die API bestimmt. Learn rät, es im Client als undurchsichtige Zeichenfolge zu behandeln und nicht zu lesen oder zu prüfen. Das bestimmt den Entwurf unten.