从 Angular 前端调用受 Azure AD 保护的 Web API

关键词：

【中文标题】从 Angular 前端调用受 Azure AD 保护的 Web API【英文标题】：Calling an Azure AD secured Web API from Angular Frontend 【发布时间】：2019-12-03 10:59:36 【问题描述】：

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

虽然我很容易设法使用 Angular 和 MSAL，获得了一个令牌并成功调用 Graph/me 作为测试，但我无法让 API 调用正常工作，我总是收到 401。

我正在使用以下设置：

带 MSAL 的 Angular 前端 我在 AAD 中创建了一个应用程序，为它授予 MS Graph 的 User.Read 权限，将 ID 复制到 MSAL 代码中，并且按照文档使用 MSAL 拦截器调用 Graph API 非常容易。 Web-API 我在 .NET 核心中创建了一个 web-api，只是在 GET 中返回了一些演示数据。我将 API 发布到 azure Web 应用程序（https://myappurl.azurewebsites.net/api/test，从 Angular 或 Postman 调用它没有问题 授权 使用 Azure 门户，在 App Web 设置中，我使用 Azure Active Directory 激活了 Web 服务身份验证。作为所需的应用程序，我将在第 1 步中使用的同一个应用程序用于前端。

此时我无法再调用我的 API，总是收到 401。 我从 Angular 代码中解析出 JWT 令牌，并尝试使用 Authorization: Bearer eyJ0xxxxx headers, still 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，然后允许我的前端应用程序访问后端应用程序？阅读所有可用的文章让我更加困惑。

【问题讨论】：

我也有同样的情况。提供的答案对您有帮助吗？我有我公开的 api 的范围 url，但我不知道在我的前端哪里指定它......你把它添加到 consentScopes 了吗？或protectedResourceMap？非常感谢您的帮助！ 【参考方案1】：

在您的 azure 注册应用程序中，转到“公开 api”，复制范围 url 并将此值设置为您 loginRequest 中的范围

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


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

【讨论】：

如何从 angular localhost:4200 调用 spring security azure AD localhost:8080。天蓝色调用中的错误

】如何从angularlocalhost:4200调用springsecurityazureADlocalhost:8080。天蓝色调用中的错误【英文标题】：HowtocallspringsecurityazureADlocalhost:8080fromangularlocalhost:4200.Errorinazurecall【发布时间】：2020-10-1112:22:52【问题描述】：包com.example.demo;impor 查看详情

从 PowerApp（或逻辑应用）调用受 AAD 保护的 Azure 函数

】从PowerApp（或逻辑应用）调用受AAD保护的Azure函数【英文标题】：CallAADProtectedAzureFunctionfromPowerApp(orLogicApp)【发布时间】：2021-08-0401:38:27【问题描述】：我有一个设置为使用AAD身份验证（最新（非经典）方法）的Azure函数，当我... 查看详情

从 Azure AD 发出 JWT 令牌中的角色

...2021-04-1009:16:39【问题描述】：我正在尝试使用以下说明在Angular应用程序中发出角色。https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-angular我成功验证了用户，从帐户声明中获 查看详情

使用刷新令牌 adal azure AD 静默更新访问令牌

...alazureAD【发布时间】：2018-12-2012:33:08【问题描述】：环境Angular5前端使用Adal-Angular进行AzureAD身份验证当前情景用户身份验证成功并获取访问/刷新令牌一段时间后，访问令牌过期。在后续请求中，用户被重定向回Azure登录页面，然... 查看详情

通过传递 Azure B2C JWT Bearer 令牌从 Angular 调用 .NET CORE Web API 安全端点

】通过传递AzureB2CJWTBearer令牌从Angular调用.NETCOREWebAPI安全端点【英文标题】：Call.NETCOREWebAPISecureEnd-pointfromAngularbypassingAzureB2CJWTBearertoken【发布时间】：2020-10-2822:45:45【问题描述】：我需要通过提供AzureB2CJWTBearer令牌从Angular9应用程... 查看详情

使用 id_token 对受广告保护的应用进行身份验证

...户配置的azure广告身份验证进行保护。前端应用服务是用Angular编写的。我遵循的认证方法如下。加载Angular应用程序。向.auth/me发送获取请求，该请求返回给我的i 查看详情

从 Heroku Angular 前端调用 Heroku springboot 后端时，Rest 调用返回 403

】从HerokuAngular前端调用Herokuspringboot后端时，Rest调用返回403【英文标题】：Restcallsreturn403whencallingfromHerokuAngularfrontendtoherokuspringbootbackend【发布时间】：2020-04-2020:57:01【问题描述】：我已经在Heroku上解压了一个简单的CRUDSpringboot后... 查看详情

从 Angular 访问受 Google IAP 保护的 API

】从Angular访问受GoogleIAP保护的API【英文标题】：AccessGoogleIAPprotectedAPIfromAngular【发布时间】：2020-05-2204:42:21【问题描述】：我的应用程序有2个模块SpringBoot后端APIAngular前端（SPA应用程序）两者都部署在Google应用引擎(GAE)中。我使... 查看详情

使用 Angular 8 中的 MSAL 库获取 Microsoft Azure AD 组名称列表

】使用Angular8中的MSAL库获取MicrosoftAzureAD组名称列表【英文标题】：GetlistofMicrosoftAzureADgroupnamesusingMSALlibraryinAngular8【发布时间】：2021-04-1801:01:14【问题描述】：我正在开发一个Angular8应用程序，它试图检索登录用户可用的所有Micro... 查看详情

从Angular前端到Spring后端的POST调用期间出现CORS策略错误[重复]

】从Angular前端到Spring后端的POST调用期间出现CORS策略错误[重复]【英文标题】：CORSPolicyerrorduringPOSTCallfromAngularfrontendtoSpringbackend[duplicate]【发布时间】：2021-06-2006:29:55【问题描述】：我试图在我的Angular前端和Java/Spring中的REST端点... 查看详情

用于多个 WebApi 端点的 Azure AD 不记名令牌？

...发布时间】：2018-09-2114:16:44【问题描述】：我们正在使用Angular、.NetWebApi和Azure构建多个应用程序。我们一直在做的是通过隐式oAuth2/OIDC授权流通过AzureAD保护应用程序。一切运行良好，但到目前为止我们的架构很简单。IE\'前端 查看详情

使用 MSAL Angular 包装器在 Ionic 4 中处理来自 Azure AD 的回调

】使用MSALAngular包装器在Ionic4中处理来自AzureAD的回调【英文标题】：HandlingcallbackfromAzureADinIonic4withMSALAngularwrapper【发布时间】：2019-12-2610:23:48【问题描述】：我们正在使用Angular7构建一个Ionic4应用，并且我们希望针对AzureADv2端点... 查看详情

如何在 Azure Ad 中实现代流？

】如何在AzureAd中实现代流？【英文标题】：HowtoimplementOnbehalfofflowinAzureAd?【发布时间】：2021-06-1323:21:16【问题描述】：网络核心应用程序。我在azuread中注册了三个应用程序。ReactSPA应用程序WebAPI网关应用程序受保护的API应用程序... 查看详情

为 Web API 实施 Azure AD 身份验证，可以在有和没有用户上下文的情况下从多个客户端调用？

...验证，可以在有和没有用户上下文的情况下从多个客户端调用？【英文标题】：ImplementAzureADauthenticationforWebAPIwhichcanbecalledfrommultipleclientswithandwithoutusercontext?【发布时间】：2021-10-2607:32:36【问题描述】：Net核心应用程序和单页应... 查看详情

在 Web API 上验证 Azure AD 令牌的问题

...:17【问题描述】：我有2个网络应用程序。站点A既是前端(Angular)，又是用.NET核心编写的WebAPI。站点B是用.NET核心编写的WebAPI。两个站点中的WebAPI相同。认证是一样的。测试1：当我要求站点A使用其自己的API来获 查看详情

从 Angular 前端到 json-server 的 GET 调用访问被 CORS 策略阻止的 XMLHttpRequest

】从Angular前端到json-server的GET调用访问被CORS策略阻止的XMLHttpRequest【英文标题】：GETcallfromAngularfrontendtojson-serverAccesstoXMLHttpRequestblockedbyCORSpolicy【发布时间】：2019-06-0607:13:39【问题描述】：我在我的本地主机上有一个角度前端客... 查看详情

Azure AD for Angular + ASP.net web api - Msal Angular HTTP 拦截器不为 POST 方法附加令牌

】AzureADforAngular+ASP.netwebapi-MsalAngularHTTP拦截器不为POST方法附加令牌【英文标题】：AzureADforAngular+ASP.netwebapi-MsalAngularHTTPinterceptordoesnotattachtokenForPOSTmethod【发布时间】：2021-12-1100:14:09【问题描述】：我正在使用AzureAD进行身份验证（... 查看详情

是否可以通过 Visual Studio 将 Azure AD 与 MFA 连接起来进行实体框架调用？

...否可以通过VisualStudio将AzureAD与MFA连接起来进行实体框架调用？【英文标题】：IsitpossibletoconnectusingAzureADwithMFAforEntityFrameworkcallsviaVisualStudio?【发布时间】：2019-01-0815:35:41【问题描述】：我正在尝试从VS包管理器控制台连接到SQLAzure... 查看详情