asp.net core - Issue with BrowserAuthError: no_account_error in Angular Frontend App Using MSAL - Stack Overflow

admin管理员组

文章数量:1291197

I have a frontend application developed using Angular 18 that interacts with a backend API application developed using .NET 8 APIs. The backend API app is deployed across three different geos: AME, EMA, and APA, each connecting with Azure SQL databases distributed across these geos to comply with data residence guidelines.

For the EMA region, both the frontend and backend API apps are hosted in different Azure App Services sharing the same App Service Plan. However, for the AME and APA regions, only the backend API is hosted in Azure App Services. In summary, the frontend is only deployed in the EMA region. All the apps (frontend and the three backends) are registered with Azure AD and use the auth code flow with OpenID Connect for authentication.

Here is the sample configuration at the frontend angular index.html file:

<script nonce="xxxxx-yyy-dddd-b5a1-4afe102e5727">
    var globalConfig = {      
        tenant: 'demoapp.onmicrosoft',
        clientId: '<Application (client) ID for frontend>',
        scope: ['Application (client) ID for EMA backend', 'Application (client) ID for AME backend', 'Application (client) ID for APA backend'],
        redirectUri: window.location.href,
        postLogoutRedirectUri: window.location.origin + '/',
        instance: '/'
    };
</script>

The frontend app has two modules segregated via the folder system. Module 1 is part of the new folder and Module 2 is part of the old folder. Module 1 is hosted at the parent level (root site) and Module 2 is hosted as a subsite using the Virtual Directory feature of Azure App Service. Currently, the frontend application is using MSAL ("@azure/msal-angular": "^3.0.23", "@azure/msal-browser": "^2.39.0").

The entire setup was using BrowserCacheLocation.SessionStorage for cacheLocation. Recently, a pentest was conducted as part of the security validation process, and a security concern was raised regarding the use of BrowserCacheLocation.SessionStorage. Based on suggestions, code changes were made to use BrowserCacheLocation.MemoryStorage instead.

After making the code changes and deploying, the application works fine without any issues when it uses both the frontend and backend deployed in the EMA region. However, when trying to use the combination of the frontend in EMA and the backend in AME or APA, I encounter the following error:

BrowserAuthError: no_account_error: No account object provided to acquireTokenSilent and no active account has been set. Please call setActiveAccount or provide an account on the request.
    at BrowserAuthError.AuthError [as constructor] (AuthError.js:31:24)
    at new BrowserAuthError (BrowserAuthError.js:201:28)
    at BrowserAuthError.createNoAccountError (BrowserAuthError.js:340:16)
    at PublicClientApplication.<anonymous> (PublicClientApplication.js:103:44)
    at step (_tslib.js:87:23)
    at Object.next (_tslib.js:68:53)
    at _tslib.js:61:71)
    at new ZoneAwarePromise (zone.js:2702:25)
    at __awaiter (_tslib.js:57:12)
    at PublicClientApplication.acquireTokenSilent (PublicClientApplication.js:90:25)

Can anyone help me here with some code sample which will serve as a reference for my implementation?

本文标签： aspnet coreIssue with BrowserAuthError noaccounterror in Angular Frontend App Using MSALStack Overflow