在 AAD 保护的 Azure Web 应用程序中检索访问令牌答案

【问题标题】：Retrieve Access Token within a AAD secured Azure Web App在 AAD 保护的 Azure Web 应用程序中检索访问令牌
【发布时间】：2017-08-22 15:15:37
【问题描述】：

我有一个托管在 Azure Web 应用程序中的 Angular4 应用程序和一个托管在 Azure API 应用程序中的 .NET 核心 Web API。

API 受 Azure Active Directory 保护。目前我使用 ng2-adal 获取一个访问令牌，我将其注入到标头中以执行我的 API 调用。

现在我尝试删除 ng2-adal 模块并使用 same ClientId（如 API）通过 Authentication / Authorization 功能保护我的 Web 应用程序。当我浏览到我的网站时，我会被重定向到 AAD 登录名，在我成功登录后，我会被重定向到我的网站。现在我不想在我的 Web 应用程序中调用 API（使用相同的 ClientId 保护），但找不到检索令牌的方法。

在这种情况下，有没有办法在我的 Angular 应用程序中检索访问令牌？看起来令牌是在 AppServiceAuthSession Cookie 中加密存储的：

【问题讨论】：

我不确定我是否理解这个场景，但你应该在回复 url docs.microsoft.com/en-us/azure/active-directory/develop/… 中有必要的令牌
@Sentinel 感谢您的帮助。不幸的是，您引用的示例正在使用 adal.js。
我认为它根本没有引用任何库，它只是说令牌在回复 url 中。
无论如何，我在回复 url 中找不到令牌。

标签： angularjs azure azure-active-directory

【解决方案1】：

AppServiceAuthSession 是不同于令牌的 cookie。在这种情况下，您需要修改 Azure 应用的配置，使其获取 Web API 的 access_token。

我们可以使用Resource Explore来修改如下设置：

1 .找到 Angular Web 应用程序

2 。找到config->authsettings（资源是Azure应用的clientId，用来保护你的应用）

"additionalLoginParams": [
  "response_type=code id_token",
  "resource=3fa9607b-63cc-4050-82b7-91e44ff1df38"
],

3。为 Azure 应用程序配置 redirect_uri，如下所示： https://appfei.azurewebsites.net/.auth/login/aad/callback

然后在您登录 Angular 应用程序后，您可以通过端点获取 access_token： https://appfei.azurewebsites.net/.auth/me

然后我们需要使用 Advanced Azure Active Settings 保护 Web API，如下图所示，以使 access_token 可以调用 Web API：

【讨论】：

您知道是否可以将其应用于 AAD B2C（仅适用于使用 B2C 创建的本地帐户的 AAD，没有其他社交提供者）
根据我的理解，Azure AD B2C 扩展了标准的 OAuth 2.0 流程，以做的不仅仅是简单的身份验证和授权。在这种情况下它也应该支持。更多细节可以参考this document。
当我浏览到 URL 时可以获得令牌，但是当我尝试从我的应用服务调用它时，我得到 401 unauthorized？这是在我明显登录之后

【解决方案2】：

我已经为此工作了一周。所以，我想分享一下我是如何得到它的。

我能够使用 AAD 对我的应用进行身份验证。

我的 cookie 存储中有 AppServiceAuthSession。

然后在我的应用程序中，我调用了 auth/me API。

https://yourwebsite.azurewebsites.net/.auth/me

所以，就像：

this.$http
  .get('https://yourwebsite.azurewebsites.net/.auth/me').then(response => {
    console.log(".auth/me", response)
  }, err => {
    console.log("Error: ", err)
  })

我实际上在使用 Vue。调用您的 HTTP 可能会有所不同。就是这样。

我基本上调用了 auth/me API 来检索我需要的信息。

附：你当然需要经过身份验证。

【讨论】：

您如何避免未经授权返回 401？我已经在 c# 中完成了类似的代码，即使在登录并通过 ./me 端点确认我可以看到令牌之后，它也会向我抛出该错误
嗨！您能否添加更多详细信息。有截图就更好了。谢谢。
我想通了，问题是说明有误导性，您不会立即获得身份验证令牌，您必须为它交换一个 id 令牌

【解决方案3】：

找到了这个解决方案：

只需要添加您的应用程序网址身份验证/授权-> 允许的外部重定向 URL

因此 webapi 将自动接受这些 cookie。

ps：确保您的 ajax 请求正在传递这些 cookie。

【讨论】：