Call Azure Functions API from Angular Static Web Page Frontend with Azure Active Directory Authorization

Question

Both my Frontend and Backend(Azure Functions) are secured by Azure Active Directory(AAD).

Frontend: I have implemented MSAL in Angular the way its described here: (https://www.pshul.com/2020/02/07/azure-ad-authentication-from-angular-to-azure-functions/). Now, when opening my Angular Webpage, i get redirected to a Microsoft Login, which only accepts correct users and accounts, which seem to work.

Backend: My backend endpoints do not allow requests without a valid id_token from an registered Account. All requests with an invalid token will result in a 401 (Unauthorized) error, which also seems to work.

The problem lies in calling backend functions from my frontend, or rather in getting an id_token: When i have logged in in the frontend like i have described above, i want to store the id_token and have my intercepter send it with every request, so i dont need an additional login every request. In the link I mentioned this seemed to be handled by MSAL and MSALInterceptor, which didnt work for me (it didnt send any bearer token to the backend), so I had my own interceptor grab the token from the localStorage. The problem is, that the token from the localStorage also results in a 401 Error, so it seems to be invalid. When i am not misunderstanding, when logging in, it calls the login and gets an id-token from https://MyAzureWebPage/.auth/me, which it stores in the local storage, but that token doesnt work. When calling https://MyAzureWebPage/.auth/me manually and using that id_token with postman, it works. Does anybody know what im doing wrong or where i can get the correct id_token?

Here is my MSAL configuration, maybe im doing something wrong there:

MsalModule.forRoot({
      auth: {
        clientId: 'myCliendAdd',
        authority: "https://login.microsoftonline.com/myTenantID",
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      },
    },
    {
      popUp: !isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        ['https://MyAzureWebPage/.auth/me', ['user.read']]
      ],
      extraQueryParameters: {}
    }), 
 providers: [
    AuthGuard,
    RoleGuard,
    { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true }

  ],
  bootstrap: [AppComponent],
})

For some reason, the token i get from the msal (example:

    this.broadcastService.subscribe("msal:acquireTokenSuccess", payload => {
      console.log(payload)   
  });

and from the localStorage is different from the token i get when i call https://MyAzureWebPage/.auth/me, which is the only one which seems to work

If you need any further information I will add it here

COuld you please parse the access token via https://jwt.ms? – Jim Xu Nov 12 '20 at 01:05 — Jim Xu, Nov 12 '20 at 01:05

score 0 · Answer 1 · answered Nov 12 '20 at 03:36

If you want to call Azure function projected by Azure AD in angular application, please refer to the following code

Create Azure AD application to protect function
1. Register Azure AD application. After doing that, please copy Application (client) ID and the Directory (tenant) ID
2. Configure Redirect URI. Select Web and type <app-url>/.auth/login/aad/callback.
3. Enable Implicit grant flow
4. Define API scope and copy it
5. Create client secret.
Enable Azure Active Directory in your App Service app
Create Client AD application to access function
1. Register application
2. Enable Implicit grant flow
3. configure API permissions. Let your client application have permissions to access function
Code

MsalModule.forRoot(
      {
        auth: {
          clientId: '232a1406-b27b-4667-b8c2-3a865c42b79c',
          authority:
            'https://login.microsoftonline.com/e4c9ab4e-bd27-40d5-8459-230ba2a757fb',
          redirectUri: 'http://localhost:4200/',
        },
        cache: {
          cacheLocation: 'localStorage',
          storeAuthStateInCookie: isIE, // set to true for IE 11
        },
      },
      {
        popUp: !isIE,
        consentScopes: [
          'user.read',
          'openid',
          'profile',
          '<your function app scope your define>',
        ],
        unprotectedResources: [],
        protectedResourceMap: [
          [
            '<your function app url>',
            [<your function app scope you define>],
          ]
        ],
        extraQueryParameters: {},
      }
    ),
  ],

Call Azure Functions API from Angular Static Web Page Frontend with Azure Active Directory Authorization

1 Answers1