使用Azure AD MSAL进行React/.Net核心身份验证

我有一个React前端，它使用最新版本的React aad msal与Azure AD进行身份验证，这部分工作正常。我现在试图实现的是，通过从前端发送一个承载令牌，将我的.NET核心API保护到同一个Azure广告。我有这个设置和授权的前端工程罚款。我可以在最新版本的react aad msal中获取访问令牌，但当我将其发送到API时，我总是收到“无效令牌”错误。我不确定我是否使用了正确的作用域，或者访问令牌是否不是要发送的正确类型的令牌？代码如下：

API:

React应用程序：

ReactDOM.render(
<AzureAD provider={authProvider} reduxStore={basicReduxStore}>
    {({login, logout, authenticationState}) => {
        if (authenticationState === AuthenticationState.Authenticated) {

我可以验证令牌是否在标头中，如下所示：

授权
持有人EYJ0EXAIIOIJKV1QILCHUB25…8Wt1C6ni32UZUwV-53hp53jxHG38w

但是收到这个错误：

---

承载错误=“无效的令牌”，错误描述=“签名无效”

您正在获取MS Graph的访问令牌。您的Web API不是Graph，因此预计它将拒绝令牌

相反，您要做的是为您的web api创建一个作用域（在Azure Portal>您的api>中公开api）。然后在客户端应用程序的API权限菜单选项卡上配置它。然后将其添加到scopes集合中：

export const authParams = {
scopes: [
    'https://graph.microsoft.com/User.ReadBasic.All',
    'https://graph.microsoft.com/profile',
    'https://graph.microsoft.com/User.Read',
    'https://myWebApiUri/MyScope',
]
};

这个答案可能有用：

config = {
    auth: {
        authority: 'https://login.microsoftonline.com/<mytenantidhere>',
        clientId: <clientidhere>,
        redirectUri: 'http://localhost:3000'
    },
    cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: true
    }
};

export const msalConfig = config;
export const authParams = {
scopes: [
    'https://graph.microsoft.com/User.ReadBasic.All',
    'https://graph.microsoft.com/profile',
    'https://graph.microsoft.com/User.Read'
]
};

const token = await authProvider.getAccessToken();
    context.token = token;

    axios
        .get('Employees/getCurrentEmployee', {
            headers: {
                'Authorization': "Bearer " + token.accessToken
            }
        })
        .then(response => {
            context.user = response.data;
        });

export const authParams = {
scopes: [
    'https://graph.microsoft.com/User.ReadBasic.All',
    'https://graph.microsoft.com/profile',
    'https://graph.microsoft.com/User.Read',
    'https://myWebApiUri/MyScope',
]
};