Невозможно вернуть аутентифицированную информацию об учетной записи (с использованием MSAL)

Question

Введение: я пытаюсь настроить реагирующую аутентификацию с помощью Azure B2C на основе https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/2-call-api-b2c / SPA / src

Цель: я хочу, чтобы пользователи могли входить в систему и регистрироваться в приложении (реагировать), используя свои личные адреса электронной почты (как потребители) Gmail, Yahoo и т. Д.

Проблема: однако, когда пользователь регистрируется, я не могу прочитать данные учетной записи пользователя. Пользователь успешно регистрируется, следуя пользовательским потокам, я даже могу редактировать профиль пользователя, используя пользовательские потоки. Однако я не могу получить информацию об учетной записи пользователя.

Изображение, показывающее приложение React , в консоли выводит graph.js:18 GET https://graph.microsoft.com/beta/me 401 (Unauthorized)

authConfig.js

       /*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";
import { b2cPolicies } from "./policies";

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
 */
export const msalConfig = {
  auth: {
    clientId: "3f7f0b29-dcd8-45ab-a478-0893bfb74e8e", // This is the ONLY mandatory field; everything else is optional.
    authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
    knownAuthorities: [b2cPolicies.authorityDomain], // You must identify your tenant's domain as a known authority.
    redirectUri: "http://localhost:3000", // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
  },
  cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
    },
  },
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit:
 * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
  scopes: [
    "openid",
    "email",
    "profile",
    "https://sebcdemo.onmicrosoft.com/api/mail.send",
  ],
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
  graphMeEndpoint: "https://graph.microsoft.com/beta/me",
};

policy.js

      /**
 * Enter here the user flows and custom policies for your B2C application
 * To learn more about user flows, visit: https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview
 * To learn more about custom policies, visit: https://docs.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-overview
 */
export const b2cPolicies = {
  names: {
    signUpSignIn: "B2C_1_b2c-signup-signin",
    editProfile: "B2C_1_edit_profile_v2",
  },
  authorities: {
    signUpSignIn: {
      authority:
        "https://sebcdemo.b2clogin.com/sebcdemo.onmicrosoft.com/B2C_1_b2c-signup-signin",
    },
    editProfile: {
      authority:
        "https://sebcdemo.b2clogin.com/sebcdemo.onmicrosoft.com/B2C_1_edit_profile_v2",
    },
  },
  authorityDomain: "sebcdemo.b2clogin.com",
};

graph.js

      import { graphConfig } from "./authConfig";

/**
 * Attaches a given access token to a MS Graph API call. Returns information about the user
 * @param accessToken 
 */
export async function callMsGraph(accessToken) {
    const headers = new Headers();
    const bearer = `Bearer ${accessToken}`;

    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers
    };

    return fetch(graphConfig.graphMeEndpoint, options)
        .then(response => response.json())
        .catch(error => console.log(error));
}

App.js

      import React, { useState } from "react";
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { loginRequest } from "./authConfig";
import { PageLayout } from "./components/PageLayout";
import { ProfileData } from "./components/ProfileData";
import { callMsGraph } from "./graph";
import Button from "react-bootstrap/Button";
import "./styles/App.css";

/**
 * Renders information about the signed-in user or a button to retrieve data about the user
 */
const ProfileContent = () => {
    const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState(null);

    function RequestProfileData() {
        
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance.acquireTokenSilent({
            ...loginRequest,
            account: accounts[0]
        }).then((response) => {
            callMsGraph(response.accessToken).then(response => {
                console.log(
                    "Response: ", response
                );
                console.log("Account: ",accounts[0]);
                setGraphData(response)
            });
        });
    }

    return (
        <>
            <h5 className="card-title">Welcome {accounts[0].name}</h5>
            {graphData ? 
                <ProfileData graphData={graphData} />
                :
                <Button variant="secondary" onClick={RequestProfileData}>Request Profile Information</Button>
            }
        </>
    );
};

/**
 * If a user is authenticated the ProfileContent component above is rendered. Otherwise a message indicating a user is not authenticated is rendered.
 */
const MainContent = () => {    
    return (
        <div className="App">
            <AuthenticatedTemplate>
                <ProfileContent />
            </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <h5 className="card-title">Please sign-in to see your profile information.</h5>
            </UnauthenticatedTemplate>
        </div>
    );
};

export default function App() {
    return (
        <PageLayout>
            <MainContent />
        </PageLayout>
    );
}

App.js выводит:

console.log("Response: ", response);

Ответ:
ошибка: код: «InvalidAuthenticationToken» innerError: {date: «2021-08-04T06: 19: 07», идентификатор-запроса: «8e0ef8bf-f7db-4220-9a66-689ca3b06683», идентификатор-запроса-клиента: «8e0ef8bf-f7db-4220-9a66-689ca3b06683"} сообщение:" Ошибка синтаксического анализа CompactToken с кодом ошибки: 80049217"

console.log("Account: ",accounts[0]);

Учетная запись: среда: «seb2cdemo.b2clogin.com» homeAccountId: «5ddb5502-c1f1-44d1-a33d-4aefa924350f-b2c_1_b2c-signup-signin.e2ba8437-a274-4842-b694-4764f100677ce: id: n16372802: exp15372: id: 16imb372802: 16imb372801 , версия: "1.0", iss: "https://seb2cdemo.b2clogin.com/e2ba8437-a274-4842-b694-4764f10077ce/v2.0/", sub: "5ddb5502-c1f1-44d1-a33d-4aefa924350f", …} LocalAccountId: "5ddb5502-c1f1-44d1-a33d-4aefa924350f"name: undefinedtenantId: ""username: ""