typescript - Autenticazione MSAL non funzionante in Angular 17.0.5

Sto implementando l'autenticazione MSAL in Angular 17.0.5 e non riesco ad autenticarmi utilizzando le credenziali AD e mi dà un errore 401 Non autorizzato. Lo stesso codice funzionava in Angular 11.2.12.

Queste sono le dipendenze dell'applicazione

Node: 18.16.0
Package Manager: npm 9.5.1
"@angular/animations": "^17.0.0",
"@angular/cdk": "^17.0.2",
"@angular/common": "^17.0.0",
"@angular/compiler": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/forms": "^17.0.0",
"@angular/material": "^17.0.2",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/router": "^17.0.0",
"@azure/msal-browser": "^3.0.0-alpha.2",
"minimatch": "^9.0.3",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.2"

1. Ho provato a cambiare la versione di msal da ^3.6.0 a ^3.0.0-alpha.2.
2. Aggiunto system: { allowNativeBroker: false }.

all'interno di PublicClientApplication in MSALInstanceFactory.

Risposta n. 1

Sono in grado di usare MSAL con Angular 17. Vedi sotto le versioni di Angular e MSAL insieme ad altri pacchetti in package.json

"@angular/animations": "^17.0.5",
    "@angular/cdk": "^17.0.1",
    "@angular/common": "^17.0.5",
    "@angular/compiler": "^17.0.5",
    "@angular/core": "^17.0.5",
    "@angular/flex-layout": "^14.0.0-beta.41",
    "@angular/forms": "^17.0.5",
    "@angular/localize": "^17.0.5",
    "@angular/material": "^17.0.1",
    "@angular/platform-browser": "^17.0.5",
    "@angular/platform-browser-dynamic": "^17.0.5",
    "@angular/router": "^17.0.5",
    "@azure/msal-angular": "^3.0.11",
    "@azure/msal-browser": "^3.7.1",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "bootstrap": "^5.3.2",
    "crypto-js": "^4.2.0",
    "exceljs": "^4.4.0",
    "file-saver": "^2.0.5",
    "hammerjs": "^2.0.8",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.2"

Assicurati inoltre di inizializzare utilizzando la seguente riga nel corpo del costruttore del tuo servizio dove utilizzi MSAL

this.msalService.initialize();

Risposta n. 2

"@azure/msal-browser" non è ancora compatibile con Angular 17. Per utilizzare le librerie @azure è necessario eseguire il downgrade di Angular alla versione 16.

https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/6719