React中MSAL获取的Access Token签名无效问题求助

环境配置 #

MSAL实例（通过MsalProvider在其他文件中传递） #

const msalInstance = new PublicClientApplication({
    auth: {
        clientId: <B2C-Application-ID>,
        authority: "https://login.microsoftonline.com/<tenant-directory-id>",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false,
    }
});

导入语句 #

import * as msal from "@azure/msal-browser";
import {EventType, InteractionStatus} from "@azure/msal-browser";

import React, {createContext, FC, useState} from "react";
import {useIsAuthenticated, useMsal} from "@azure/msal-react";
import {AuthenticationContextType} from "../@types/authentication";
import {EndSessionRequest} from "@azure/msal-browser/dist/request/EndSessionRequest";
import jwtDecode, {JwtPayload} from "jwt-decode";

变量定义 #

const {instance, accounts, inProgress} = useMsal();
const isAuthenticated = useIsAuthenticated();
const [token, setToken] = useState<string | null>(null);

登录方法 #

function loginRedirect() {
    instance.loginRedirect({
        scopes: ["User.Read"],
        prompt: "select_account"
    });
}

获取令牌方法 #

function getToken(): string | null {
    if (token) {
        const decodedJwt = jwtDecode<JwtPayload>(token);
        if (decodedJwt.exp && decodedJwt.exp * 1000 > Date.now()) {
            return token; // Token is still valid
        }
    }

    // If token is not available or not valid anymore, acquire a new one
    if (instance.getActiveAccount() && inProgress === InteractionStatus.None) {
        const accessTokenRequest = {
            scopes: ["User.Read"],
            account: accounts[0]
        }

        instance.acquireTokenSilent(accessTokenRequest)
            .then(response => {
                console.log(`access token: ${response.accessToken}`);
                console.log(`id token: ${response.idToken}`);
                setToken(response.accessToken);
                return response.accessToken;
            })
            .catch(err => {
                if (err instanceof msal.InteractionRequiredAuthError) {
                    return instance.acquireTokenPopup(loginRequest)
                        .then(response => {
                            setToken(response.accessToken);
                            return response.accessToken;
                        })
                        .catch(err => {
                            console.log(err);
                        })
                } else {
                    console.log(err);
                }
            })
    } else {
        console.error("No account logged in to acquire token");
    }
    return null;
}

问题描述 #

通过MSAL成功获取到ID Token和Access Token（可在控制台日志查看），ID Token能在API和jwt.io上验证通过，但Access Token在两处均验证失败。根据微软文档，本应使用Access Token对API进行验证。

已确认jwt.io能正确从https://sts.windows.net/<tenant-directory-id>/discovery/v2.0/keys获取公钥，但尝试相关解决方案后仍无效，手动复制公钥也无法解决问题。修改scopes还会触发无限登录循环，求可行解决思路。

使用版本 #

"@azure/msal-browser": "^2.28.3",
"@azure/msal-react": "^1.4.7",
"jwt-decode": "^3.1.2",

内容的提问来源于stack exchange，提问作者giklo