使用react-aad-msal missing scope从react SPA调用web api

Question

我正在从react SPA web应用程序调用受保护的web 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“是web api作用域请求。对web api的授权失败，错误为401，因为在检查时，返回的访问令牌缺少声明中的web api作用域。

Answer 1

AAD访问令牌只对一个API有效，因此请确保在请求令牌时，只指定API的作用域。然后AAD会为你的API给你的应用程序一个令牌。在身份验证请求中为多个API指定作用域应该是可以的，但是当您请求令牌时，请仅为一个API指定作用域。

在作用域数组中，有用于MS Graph API的user.read。