如何启用多租户授权（AngularJS <-> Azure AD）？答案

【问题标题】：How to enable multitenant authorization (AngularJS <-> Azure AD)?如何启用多租户授权（AngularJS <-> Azure AD）？
【发布时间】：2017-06-11 07:13:43
【问题描述】：

如何使用 Azure AD 调用多租户服务 Web API 的多租户 AngularJS 单页应用程序启用身份验证？

这是我尝试启用的高级流程：

^{多租户 AngularJS 应用程序 [ClientApp] -> 多租户 ASP.NET Web API [ServicesApp]}

我有一个多租户 AngularJS 应用程序，它需要使用 ADAL for JS (OpenID Connect) 登录 Azure AD。该 Web 应用程序在开发人员 Azure AD 中注册为多租户应用程序ClientApp，我将其称为DevAAD。我同意在另一个 Azure AD 中使用此 ClientApp 应用程序，我将其称为 Tenant1。一旦来自Tenant1 目录的用户使用他们的凭据登录到Web 应用程序到login.microsoftonline.com 门户，他们就能够访问Web UI。但是，UI 无法使用 OAuth 2.0 隐式流程代表用户调用 Web API。这是我在 Javascript 代码中看到的错误消息：

AADSTS65001：用户或管理员未同意使用 ID 为“”的应用程序。发送互动对此用户和资源的授权请求。

还有另一个代表后端 Web API 服务的 Azure AD 多租户应用程序称为 ServicesApp，它与 ClientApp UI 应用程序注册在同一 DevAAD 目录中。 ServicesApp 的客户端 ID 和应用 ID URI 是这些服务的有效受众。此ServicesApp 应用程序已被同意在同一Tenant1 目录中。当从具有ServicesApp 权限的本机客户端应用程序调用时，服务使用控制器中System.IdentityModel.Tokens.Jwt 4.0.0 and the [System.Web.Http.Authorize] 属性中提供的OWIN 中间件从Tenant1 目录授权用户。

配置详情：

客户端应用

Azure AD 应用程序清单将 availableToOtherTenants 设置为 true，oauth2AllowImplicitFlow 设置为 true。 ClientApp 有权访问 ServiceApp Azure AD 应用程序。

AngularJS 应用程序具有以下配置：

adalAuthenticationServiceProvider.init(
{
    tenant: 'common',
    clientId: <ClientApp_ClientID>,
    endpoints: { <ServiceEndpoint> : <ServiceApp_ClientID> }
}, $httpProvider);

ServiceApp

ValidateIssuer 在TokenValidationParameters 对象中设置为false 在WindowsAzureActiveDirectoryBearerAuthenticationOptions 配置对象中传递给IAppBuilder.UseWindowsAzureActiveDirectoryBearerAuthentication() "

“ServiceApp”Azure AD 清单中的
knownClientApplications”属性是设置为 [""]

我无法找到任何调用多租户 Web API 的多租户 Web 应用程序示例，特别是使用 AngularJS 构建的单页应用程序。这如何通过 Azure AD 实现？

【问题讨论】：

您提到您“同意使用该应用程序”。这是否意味着您实际上已经通过了我们的同意框架？您的 Web API 是否有任何需要访问的下游 API（例如 Graph API）？您是否在同意屏幕中看到了这些额外权限？
是的，我使用了同意框架，通过构建http://account.activedirectory.windowsazure.com/Consent.aspx?ClientID=clientId 形式的 URL 并使用来自“Tenant1”目录的用户登录，从而授予“Tenant1”对 ClientApp 和 ServiceApp 应用程序的访问权限全局管理员角色。然后我点击“允许访问”，在经典门户的“Tenant1”目录中可以看到ClientApp和ServiceApp都是应用程序。
嗨，Ryan，这似乎是一个遗留过程，我不确定你是否正确地这样做了。见这里Building the link that grants access for external users (Legacy)。请参阅下面的答案，以找到一种更新的方式来生成登录网址并让用户同意该应用。

标签： angularjs asp.net-web-api oauth-2.0 azure-active-directory openid-connect

【解决方案1】：

您应该尝试使用here 描述的模板生成授权代码 URL。

您也可以复制它并用您自己的值替换：

https://login.microsoftonline.com/common/oauth2/authorize?client_id=<appid>&response_type=code&redirect_uri=<replyurl>&resource=<resource>&prompt=admin_consent

请注意，我在网址末尾添加了查询字符串：“prompt=admin_consent”。这是只有公司管理员才能做的事情，它会为整个租户同意你的应用程序，这样以后就不需要其他人同意了。请注意，如果您只想在单个用户级别同意，您可以将其更改为“prompt=consent”，或者如果您不想强制同意提示，则将其全部删除。

如果这有帮助，请告诉我！

【讨论】：