无法获取 Angular SPA 以使用 Azure Active Directory 对 ASP.NET MVC WebAPI 进行身份验证

Question

我在 Angular 2 和 ASP.NET MVC WebAPI 中创建了一个单页应用程序，它们都需要 Azure Active Directory 身份验证。这两个应用程序都在 Azure 门户中注册，并启用了 OAuth2。 SPA也有访问Web的权限API

在 SPA 中，我使用了 adaljs，它按预期工作。 ASP.NET Web API 配置为使用 Windows Azure Active Directory Bearer Authentication，据我所知它也有效。

当 SPA 从 Web API 请求数据时，它会在 header 中发送承载授权令牌，但请求被拒绝（状态 401 UNAUTHORIZED）。

我在 github 中创建了一个示例项目：https://github.com/ranthonissen/angular2-adaljs-webapi, and described the steps I followed in more detail here: https://dotronald.be/creating-an-angular-single-page-application-with-azure-active-directory-and-adal-js-that-uses-an-asp-net-webapi/

我缺少什么才能使此设置正常工作？

Answer 1

根据代码，您使用 clientId 而不是第二个应用的 app id URI 获取访问令牌。

要解决此问题，我们可以在 SPA 中添加 resource id 参数，如下所示：

secret.service.ts

import { Injectable } from '@angular/core';
@Injectable()
export class SecretService {
    public get adalConfig(): any {
        return {
            tenant: 'adnewfei.onmicrosoft.com',
            clientId: 'aac92cf9-32ab-4004-aeab-1046389dff79',
            redirectUri: window.location.origin + '/',
            postLogoutRedirectUri: window.location.origin + '/',
            resourceId:"https://ADNewFei.onmicrosoft.com/webAPIFei"
        };
    }
}

resourceId 的值是您在网络 API 上注册的应用程序的 App ID URI。它应该与您在 Web API 项目的 web.config 中配置的值相匹配，如下所示：

  <appSettings>
    <add key="ida:ClientId" value="29fc9b4c-4d77-4ffa-b4af-674d6b0584f7" />
    <add key="ida:Tenant" value="adnewfei.onmicrosoft.com" />
    <add key="ida:Audience" value="https://ADNewFei.onmicrosoft.com/webAPIFei" />
    <add key="ida:Password" value="xxxxxx" />
  </appSettings>

无法获取 Angular SPA 以使用 Azure Active Directory 对 ASP.NET MVC WebAPI 进行身份验证

Cannot get an Angular SPA to authenticate an ASP.NET MVC WebAPI with Azure Active Directory

asp.net-web-api

angularjs

azure-active-directory

adal