使用 react-aad-msal 缺少范围从 React SPA 调用 Web api

Question

我正在从 React SPA 网络应用调用受保护的网络 api。 spa 和 web api 都已在 AzureAD 中注册，并且各自通过 "Expose API" 和 "API permissions".

相互注册

客户端通过身份验证后，然后在调用 Web api 之前，调用 (await this.props.provider.getAccessToken()) 以获取访问令牌。身份验证提供程序配置为：

export const authProvider = new MsalAuthProvider(
    {
        auth: {
            authority: "https://login.microsoftonline.com/common",
            clientId: "xxxx-xxxx-xxxxx",
            postLogoutRedirectUri: window.location.origin,
            redirectUri: window.location.origin,
            validateAuthority: true,
            navigateToLoginRequestUrl: false
        },
        system: {
            logger: logger as any
        },
        cache: {
            cacheLocation: "sessionStorage",
            storeAuthStateInCookie: false
        }
    },
    {
        scopes: ["openid", "user.read", "api://xxxx-xxxxx-xxxxx/user_impersonation"]
    },
    {
        loginType: LoginType.Redirect,
        tokenRefreshUri: window.location.origin + "/auth.html"
    }
);

其中 "api://xxxx-xxxxx-xxxxx/user_impersonation" 是网络 api 范围请求。针对 Web api 的授权失败并显示 401，因为在检查时返回的访问令牌缺少声明中的 Web api 范围。

Answer 1

一个 AAD 访问令牌仅对一个 API 有效，因此请确保在请求令牌时，只指定 API 的范围。然后，AAD 将为您的应用程序提供 API 的令牌。在身份验证请求中指定多个 API 的范围应该没问题，但是当您请求令牌时，只指定一个 API.

的范围

在范围数组中，您有 user.read 用于 MS Graph API。

使用 react-aad-msal 缺少范围从 React SPA 调用 Web api

Calling web api from react SPA using react-aad-msal missing scope

reactjs

azure-active-directory

webapi

react-aad-msal