Question

我有一个Angular 5应用程序和一个web api应用程序，两者都托管在Azure中。

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

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

我现在想要打电话给单独的api，但不知道如何去做。

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

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

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

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

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

Answer 1

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

根据我的理解，您使用内置App Service Authentication / Authorization进行身份验证，此时您无需更改应用后端的代码。您可能已将请求未经过身份验证时>设置为使用Azure Active Directory登录，而不是允许匿名访问，此时您的应用服务会直接重定向用户用于身份验证记录后，您的客户端可以访问https://{your-angular-app-name}.azurewebsites.net/.auth/me以检索记录的用户信息。要访问您的web api网站，您只需在角客户端发送以下请求：

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提供程序设置其他设置，如下所示：

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

您可以按照类似issue的详细信息进行操作。

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

将access_token作为持票人令牌传递到您的webapi网络应用程序，此时您无需具体确定允许的令牌听众。

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

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

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

<强> UPDATE2：

您可以按照Authorization in a web app using Azure AD application roles & role claims获取详细的教程和代码示例。

Answer 2

通常的方法是使用ADAL.JS（或MSAL.JS与AAD v2端点/ B2C）来获取API的访问令牌。

ADAL.JS使用隐藏的iframe在Azure AD中使用用户的活动会话获取访问令牌。

您可以在此处找到一个示例Angular应用：GitHub。

ADAL.JS配置中一个特别重要的部分是here：

var endpoints = {
    // Map the location of a request to an API to a the identifier of the associated resource
    "https://myapi.azurewebsites.net/": "https://myaadtenant.onmicrosoft.com/MyApi"
};

属性名称/键应该是API的URL。 ADAL-Angular检测从此开始的URL调用，并将正确的访问令牌附加到它们。

该值应该是API的App ID URI。您可以从Azure Active Directory中的API应用程序注册中找到它 - ＆gt;应用注册 - ＆gt;所有应用 - ＆gt;您的API - ＆gt;设置 - ＆gt;属性。

您需要从SPA的应用注册中启用Angular应用上的隐式授权流程。你可以从Manifest找到它。

Azure客户端应用程序访问由AD保护的Azure API

2 个答案: