从Angular前端调用受Azure AD保护的Web API [英] Calling an Azure AD secured Web API from Angular Frontend

问题描述

我目前正在开发一个Angular前端，该前端使用MSAL来验证用户身份.该前端应调用由Azure Active Directory保护的Web-API(也托管在Azure中).

I am currently developing an Angular Frontend, which uses MSAL to authenticate users. This Frontend should call a Web-API (also hosted in Azure), which is secured by Azure Active Directory.

虽然我可以轻松地与Angular和MSAL一起使用，获取令牌并成功调用Graph/me作为测试，但我却无法使API调用正常工作，但我始终会收到401.

While I easily managed to work with Angular and MSAL, getting a Token and successfully calling Graph/me as test, I cannot get the API call to work, I'm always receiving 401's.

1. 带有MSAL的角形前端
   我在AAD中创建了一个应用程序，为它提供了对MS Graph的User.Read权限，将ID复制到了MSAL代码中，并且使用MSAL Interceptor调用Graph API非常简单.
2. Web-API
   我使用.NET核心创建了一个Web-api，只是在GET中返回了一些演示数据.我将API发布到了一个Azure Web应用程序( https://myappurl.azurewebsites.net/api/test ，从Angular或Postman调用它没问题
3. 验证
   使用Azure门户，在App Web设置中，我使用Azure Active Directory激活了Web服务身份验证.作为必需的应用程序，我将在步骤1中使用的相同的前端程序放在了前端.

1. Angular frontend with MSAL
   I created an Application in AAD, gave it User.Read permissions for MS Graph, copied the ID into the MSAL code and using the MSAL Interceptor calling Graph API was pretty easy following the documentation.
2. Web-API
   I created a web-api with in .NET core, simply returning some demo data in the GET. I published the API to an azure Web Application (https://myappurl.azurewebsites.net/api/test, calling it from Angular or Postman was no Problem
3. Auth
   Using the Azure Portal, in the App Web settings, I activated web service authentication with Azure Active Directory. As the required application, I put the same one I used in step 1 for the Frontend.

在这一点上，我无法再调用我的API，总是收到401的API. 我从Angular代码中解析了JWT令牌，并尝试使用Authorization调用邮递员:Bearer eyJ0xxxxx标头，仍然为401.

At this point I was not able to call my API any more, always receiving 401's. I parsed the JWT Token out of the Angular code and tried postman calling with Authorization: Bearer eyJ0xxxxx headers, still 401.

我认为，通过登录"我的前端，我也应该能够使用令牌来标识自己的API调用，因为它使用了相同的app-id，但是我想还是把它弄混了.我看了很多文档，但是由于Azure门户中的应用程序注册发生了更改，因此大多数文档已经过时了.

I thought, that by "logging into" my frontend I should be able to use the token to identify myself for the API call aswell, since it uses the same app-id, but somehow I think I got it mixed up. I looked at a lot of documentation, but it's mostly outdated since the App registration changes in Azure Portal.

export const protectedResourceMap:[string, string[]][]=[['https://graph.microsoft.com/v1.0/me', ['user.read']] ];
MsalModule.forRoot({
      clientID: "my-client-id",
      redirectUri: "http://localhost:4200/profile",
      postLogoutRedirectUri: "http://localhost:4200/bye",
      authority: "https://login.microsoftonline.com/my-tenant-id",
      validateAuthority: true,
      cacheLocation : "localStorage",
      navigateToLoginRequestUrl: true,
      popUp: false,
      consentScopes: [ "user.read" ],
      unprotectedResources: ["https://www.microsoft.com/en-us/"],
      protectedResourceMap: protectedResourceMap,
      correlationId: '1234',
      piiLoggingEnabled: true
    }),

我需要将webAPI添加到Angular中受保护的资源中吗?我是否需要一个额外的应用程序来保护API，然后允许我的前端应用程序访问后端应用程序?通读所有可用文章，使我更加困惑.

Do I need to add the webAPI to the protected ressources in Angular? Do I need an extra Application to secure the API and then allow my Frontend App to access the backend app? Reading through all the available articles confused me even more.

推荐答案

在您的azure注册应用中，转到公开api"，复制范围网址，并将此值设置为您的loginRequest中的范围

In your azure registration app go to "expose an api", copy the scope url and set this value as a scope in your loginRequest

var loginRequest = {
                   scopes: ["api://aa059cdd-1f53-4707-82a8-fdf7bd6c2859/Test"] 
               };


msalInstance.loginPopup(loginRequest)
.then(response => {
    // handle response
})
.catch(err => {
    // handle error
});

这篇关于从Angular前端调用受Azure AD保护的Web API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！