Azure 客户端应用程序访问由 AD 保护的 Azure api [英] Azure client app accessing Azure api secured by AD

问题描述

我有一个 Angular 5 应用和一个 Web api 应用，它们都托管在 Azure 中.

它们已在网站级别使用 Azure AD 进行保护，例如不允许匿名访问.

浏览 Angular 网站时，它要求我正常登录，我可以访问 .auth/me，它使用本地 cookie 获取令牌/声明信息.

我现在想调用单独的 api，但不知道该怎么做.

两个站点在 Azure AD 中都有一个应用程序，并且我已将客户端设置为具有访问 API"的委派权限.

我尝试使用来自客户端的本地 cookie(不确定这是否可行)和返回的令牌 .auth/me 访问 api，但都不起作用.

在我的客户清单中，我有以下内容:

"resourceAppId": "3cddd33c-2624-4216-b686-7f8fa48f38cf",//api id资源访问":[{"id": "c2712c68-ea93-46d2-9874-61b807b19241",类型":范围"}]

但还没有看到在声明中添加了任何额外的范围，不是吗?

解决方案

根据您的描述，您已经为您的 Angular 应用程序和您的 Web api 应用程序创建了单独的 AAD 应用程序，并为您的 Angular AAD 应用程序配置了委托权限访问 web api AAD 应用程序.

根据我的理解，您使用的是内置

将 access_token 作为不记名令牌传递给您的 webapi Web 应用，此时您无需指定 ALLOWED TOKEN AUDIENCES.

此时，您可以针对您的 Angular Web 应用调用 .auth/refresh 以刷新 access_token，然后您可以使用新的 access_token 访问您的 webapi Web 应用.

<块引用>

我希望角色包含在令牌中，所以可能必须坚持使用 id?

如果您希望您的 Web API 向您的 Angular 应用程序公开访问范围，该范围将作为 scp 属性包含在 access_token 中，您可以按照 配置资源应用程序来公开 Web API本教程中的 部分.此外，您还可以关注 应用程序角色.

更新 2:

您可以遵循 使用 Azure AD 应用程序角色在 Web 应用程序中进行授权&角色声明获取详细教程和代码示例.

I have an Angular 5 app and a web api app, both of which are hosted in Azure.

They have been secured with Azure AD at the website level e.g. no anonymous access is allowed.

When browsing the Angular site, it asks me to log in fine and I can access .auth/me which uses the local cookie to get token/claim information.

I now want to call the separate api but not sure how to go about it.

Both sites have an application in Azure AD, and I've set the client to have delegated permissions of 'Access to API'.

I've tried accessing the api using both the local cookie from the client (not sure if this would work) and the token returned .auth/me but neither work.

In my client manifest I have the following:

"resourceAppId": "3cddd33c-2624-4216-b686-7f8fa48f38cf", // api id
  "resourceAccess": [
    {
      "id": "c2712c68-ea93-46d2-9874-61b807b19241",
      "type": "Scope"
    }
  ]

but haven't seen any additional scopes added to the claims, should it?

解决方案

According to your description, you have both created the separate AAD application for your Angular app and your web api app, and configured the delegated permissions for your Angular AAD app to access the web api AAD app.

Based on my understanding, you are using the build-in App Service Authentication / Authorization for authentication, at this point you could do not need to change code on your app backend. You may have set Action to take when request is not authenticated to Log in with Azure Active Directory instead of allowing anonymous access, at this time your app service would directly redirect the user for authentication. After logged, your client could access https://{your-angular-app-name}.azurewebsites.net/.auth/me for retrieving the logged user info. For accessing your web api website, you could just send the request as follows in your angular client:

GET https://{your-webapi-app-name}.azurewebsites.net/api/values
Header Authorization:Bearer {id_token or access_token of AAD}

UPDATE:

That is exactly the route I'm trying to implement. One thing missing though, I had to add the client application id to the allowed token audience of the api app in Azure.

For retrieving the access_token, you need to set additional settings for the AAD provider in your Angular web app as follows:

"additionalLoginParams": [
  "response_type=code id_token",
  "resource=<AAD-app-id-for-your-webapi-webapp>"
]

Details you could follow this similar issue.

Use the EasyAuth server flow for logging, you would get the access_token, and you could leverage https://jwt.io/ to decode your token as follows:

Pass the access_token as the bearer token to your webapi web app, at this time you do not need to specific the ALLOWED TOKEN AUDIENCES.

At this time, you could invoke .auth/refresh against your Angular web app for refreshing the access_token, then you could use the new access_token to access your webapi web app.

I want roles included in the token so might have to stick with id?

If you want your Web API exposing access scopes to your Angular application which would be contained in the access_token as the scp property, you could follow the Configuring a resource application to expose web APIs section in this tutorial. Moreover, you could also follow Application roles.

UPDATE2:

You could follow Authorization in a web app using Azure AD application roles & role claims for detailed tutorial and code sample.

这篇关于Azure 客户端应用程序访问由 AD 保护的 Azure api的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！