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

问题描述

我有一个Angular 5应用程序和一个Web API应用程序，两者都托管在Azure中.

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

它们已通过Azure AD在网站级别得到保护，例如不允许匿名访问.

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

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

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.

我现在想调用单独的api，但不确定如何操作.

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

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

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

我尝试使用客户端的本地cookie(不确定是否可以使用)和令牌返回.auth/me来访问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?

推荐答案

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

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}

更新:

这正是我要实现的路线.不过缺少一件事，我不得不将客户端应用程序ID添加到Azure中api应用程序的allowed token audience.

要检索access_token，您需要在Angular Web应用程序中为AAD提供程序设置其他设置，如下所示:

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>"
]

您可以遵循类似的问题的详细信息.

使用EasyAuth服务器流进行日志记录，您将获得access_token，并且可以利用 https://jwt.io/如下解码您的令牌:

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:

将access_token作为承载令牌传递到您的webapi Web应用程序，此时，您无需指定允许的令牌受众.

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.

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

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.

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

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

如果您希望Web API将访问范围公开给Angular应用程序，并将其作为scp属性包含在access_token中，则可以按照配置资源应用程序以公开Web API 部分在此教程中.此外，您还可以遵循应用程序角色

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:

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

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

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