React MSAL 访问令牌具有无效签名

Question

设置

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 和访问权限）（请参阅控制台日志）。 The ID token is being validated successfully (on my API and jwt.io ) but my access token is not (neither on my API nor jwt.io). 参考这个微软文档，我应该使用访问令牌来验证 API。

据我所见， jwt.io 确实从https://sts.windows.net/<tenant-directory-id>/discovery/v2.0/keys 这意味着这个解决方案要么已经过时，要么不能解决我的问题。 到 go 确定我也尝试复制和粘贴公钥，这也不起作用。

我还发现这个解决方案对我也不起作用。 更改scopes会导致无休止的登录循环。

版本：

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

Answer 1

1. Scope

要请求 B2C 访问令牌，您必须指定有效的 scope。 这些也在 Azure 中设置（Azure AD B2C -> 应用程序注册 -> your application -> 管理 -> API 权限）。 在那里你必须指定一个 scope。 在获取令牌时，您必须像这样指定这些范围：

const accessTokenRequest = {
  scopes: ["https://<tenant-name>.onmicrosoft.com/<app-id>/<scope>"],
}

await instance.acquireTokenSilent(accessTokenRequest)
  .then(response => {
    setIdToken(response.idToken);
    setAccessToken(response.accessToken);
  })
  .catch(async err => {
    if (err instanceof msal.InteractionRequiredAuthError) {
      await instance.acquireTokenPopup(accessTokenRequest)
        .then(response => {
          setIdToken(response.idToken);
          setAccessToken(response.accessToken);
        })
        .catch(err => {
          console.log(err);
        })
    } else {
      console.log(err);
    }
  })

tenant-name ，您可以在应用程序 ID URI 中找到它
app-id是您的应用程序（客户端）ID
your-scope可能类似于Subscriptions.Read

scope 的完整示例可能是：
https://mydemo.onmicrosoft.com/12345678-0000-0000-0000-000000000000/Subscriptions.Read

2. 令牌版本无效

在本文之后， sts url 用于 v1 端点。 文件声称：

使用的端点 v1.0 或 v2.0 由客户端选择，仅影响 id_tokens 的版本。 accesstokenAcceptedVersion的可能值为 1、2 或 null。 如果值为null，则该参数默认为1，对应v1.0端点。

这意味着使用的端点（在我的例子中是 v2.0）只影响 id-token，这使它成功验证。 访问令牌仍然是 v1，因此没有经过验证的签名。

解决方案

要更改版本，需要在 Manifest accessTokenAcceptedVersion设置为 2。 它位于 portal.azure.com -> Azure AD B2C -> 应用程序注册 -> your application -> 管理 -> 清单：

{
  ...
  "accessTokenAcceptedVersion": 2,
  ...
}

保存更改并等待。 对我来说，等待更改应用需要几个小时。 而且我还必须应用解决方案1. Scope 。 之后，新令牌的iss应该是https://login.microsoftonline.com/<tenant-directory-id>/v2.0而不是sts -uri