带有 adal.js 和外部 Web api 的单页应用程序（带有 AAD 身份验证）答案

【问题标题】：Single Page Application with adal.js and external web api (with AAD authentication)带有 adal.js 和外部 Web api 的单页应用程序（带有 AAD 身份验证）
【发布时间】：2025-12-16 12:10:02
【问题描述】：

我有一个带有基于 adal-js 身份验证的 ASP.NET SPA，以及一个带有 Azure Active Directory 身份验证的 ASP.NET Web Api 网站

这两个网站都托管在 Azure 上，例如使用不同的主机名

https://foo.azurewebsites.com/ 和 https://fooapi.azurewebsites.com/

Web Api 网站认证配置为

public partial class Startup
{
    public void ConfigureAuth(IAppBuilder app)
    {
        app.UseWindowsAzureActiveDirectoryBearerAuthentication(
            new WindowsAzureActiveDirectoryBearerAuthenticationOptions
            {
                TokenValidationParameters = new TokenValidationParameters() { ValidAudience = ConfigurationManager.AppSettings["ida:Audience"] },
                Tenant = ConfigurationManager.AppSettings["ida:Tenant"]
            });
    }
}

主 SPA adal.js 初始化为：

var config = {
    instance: "https://login.microsoftonline.com/",
    tenant: "mytenant",
    clientId: "client id of foo registration",
    postLogoutRedirectUri: "https://foo.azurewebsites.com/",
    cacheLocation: "localStorage"
};
authContext = new AuthenticationContext(config);

// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();
var errorMessage = authContext.getLoginError();

if (isCallback && !authContext.getLoginError()) {
    window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}

// Check if View Requires Authentication
if (!authContext.getCachedUser()) {
    authContext.config.redirectUri = window.location.href;
    authContext.login();
    return;
}

foo 和 fooapi 的租户相同，客户端 ID 不同（每个应用注册一个）。

foo web 应用程序中的身份验证流程执行成功，但对 fooapi 的每个 http 请求都返回 401 未授权。

如何让 fooapi 分享 foo 的成功认证？

感谢您的任何提示

【问题讨论】：

标签： asp.net azure asp.net-web-api azure-active-directory

【解决方案1】：

您可以在 AAD 中使用隐式授权流程，以便在进行 API 调用时在 auth 标头中接收和发送 ID 令牌。有关详细信息和示例代码，请参见下面的链接。

https://azure.microsoft.com/en-gb/documentation/articles/active-directory-authentication-scenarios/#single-page-application-spa

https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp

【讨论】：

【解决方案2】：

您如何获取 Web API 的访问令牌？

为确保请求成功，您需要使用您在 Web API 中配置的资源获取令牌。您可以从here 传递令牌以检查aud 声明是否等于值ida:Audience。

还要确保令牌是从您在 Web API 项目中配置的租户发出的，因为您没有忽略租户验证。

【讨论】：

【解决方案3】：

Please configure your web point into endpoints and add it to initialization.



 var endpoints = {`enter code here`
        "https://yourhost/api": "b6a68585-5287-45b2-ba82-383ba1f60932",
    };
adalAuthenticationServiceProvider.init(
        {
            // Config to specify endpoints and similar for your app
            tenant: "52d4b072-9470-49fb-8721-bc3a1c9912a1", // Optional by default, it sends common
            clientId: "e9a5a8b6-8af7-4719-9821-0deef255f68e", // Required
            //localLoginUrl: "/login",  // optional
            //redirectUri : "your site", optional
            endpoints: endpoints  // If you need to send CORS api requests.
        },
        $httpProvider   // pass http provider to inject request interceptor to attach tokens
        );

【讨论】：