使用 react-aad-msal 缺少范围从 react SPA 调用 web api答案

【问题标题】：Calling web api from react SPA using react-aad-msal missing scope使用 react-aad-msal 缺少范围从 react SPA 调用 web api
【发布时间】：2020-04-02 05:52:26
【问题描述】：

我正在从 react SPA web 应用程序调用受保护的 web api。 spa 和 web api 都已在 AzureAD 中注册，并通过“公开 API”和“API 权限”相互注册。

在客户端通过身份验证之后，在调用 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”是 Web api 范围请求。对 web api 的授权失败并出现 401，因为在检查时返回的访问令牌缺少声明中的 web api 范围。

【问题讨论】：

标签： reactjs azure-active-directory webapi react-aad-msal

【解决方案1】：

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

在 scopes 数组中，你有 user.read 用于 MS Graph API。

【讨论】：

做到了...实际上是在使用 angular-msal 中的示例，他们还在那里添加了多个 webapi 范围（ms 图形和自定义 web api），它似乎工作 - 也许它只拾取最后一个也添加了，即自定义 web api。但它正在工作。不过我这里不需要ms图，所以去掉了。