问Azure B2C引发访问令牌验证失败。无效听众

EN

import React from 'react';
import {
  AuthenticatedTemplate,
  UnauthenticatedTemplate,
  useMsal,
} from '@azure/msal-react';
import { loginRequest } from '../authConfig';

import { AuthCodeMSALBrowserAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/authCodeMsalBrowser';
import { InteractionType } from '@azure/msal-browser';
import { Client } from '@microsoft/microsoft-graph-client';

const Home = () => {
  const { instance } = useMsal();
  const { accounts } = useMsal();
  let graphClient = undefined;

  const scopes = [
    'openid',
    'offline_access',
    'https://my-tanent.onmicrosoft.com/my-app/user.read',
  ];

  const authProvider = new AuthCodeMSALBrowserAuthenticationProvider(instance, {
    account: accounts[0],
    scopes,
    interactionType: InteractionType.Popup,
  });

  function ensureClient() {
    graphClient = Client.initWithMiddleware({
      authProvider: authProvider,
    });

    return graphClient;
  }

  async function getUser() {
    ensureClient();

    // Return the /me API endpoint result as a User object
    const user = await graphClient
      .api('/me')
      // Only retrieve the specific fields needed
      .select('displayName,mail,mailboxSettings,userPrincipalName')
      .get();

    console.log(user);
  }

//just to check the token
  const getAccessToken = async () => {
    try {
      const token = await instance.acquireTokenSilent({
        scopes,
      });

      console.log(token);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>
      <UnauthenticatedTemplate>
        <h3 className="h3">Login</h3>
        <button onClick={() => instance.loginPopup(loginRequest)}>Login</button>
      </UnauthenticatedTemplate>

      <AuthenticatedTemplate>
        <div className="App">
          <header className="App-header">
            <p>Hello {accounts[0]?.name}!</p>

            <button
              onClick={() =>
                instance.logoutRedirect({ postLogoutRedirectUri: '/' })
              }
            >
              Logout
            </button>

            <button onClick={() => getUser()}>Get User</button>

            <button onClick={() => getAccessToken()}>AcquireTokenSilent</button>
          </header>
        </div>
      </AuthenticatedTemplate>
    </>
  );
};

 "exp": 1660120614,
  "nbf": 1660117014,
  "aud": "my-client-id",
  "sub": "df5a1676-74bb-46b6-9116-a5fa125941da",
  "name": "Parteek",
  "postalCode": "246401",
  "tfp": "B2C_1_susi",
  "nonce": "9f13aefb-1a6e-4818-a39e-4f1369ca67d8",
  "scp": "user.read",
  "azp": "93dee6ed-1f87-4f0f-bedb-fd3f1a03b0ed",
  "ver": "1.0",
  "iat": 1660117014

 const scopes = [
    'openid',
    'offline_access',
    'https://graph.microsoft.com/.default',
  ];