Question

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

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

我正在使用以下设置：

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

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

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

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，然后允许我的前端应用程序访问后端应用程序？通读所有可用文章，使我更加困惑。

Answer 1

在您的azure注册应用中，转到“公开api”，复制作用域网址，并将此值设置为您的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

我正在使用以下设置：

1 个答案: