从 Angular 调用 Azure 函数 API Static Web 带有 Azure Active Directory 授权的页面前端

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

Answer 1

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: {},
      }
    ),
  ],