Ошибка аутентификации при вызове Azure API

Первоначально я создал приложение Microsoft Entra ID и добавил разрешения API, как показано ниже:

Я добавил роль участника в Service Principal, поскольку вы:

Когда я попытался получить доступ к API, я получил ту же ошибку, что и вы:

Ошибка обычно возникает, если приложению Microsoft Entra ID не предоставлены необходимые разрешения API.

Чтобы устранить эту ошибку, вам необходимо добавить делегированное разрешение API Azure Service Management, как показано ниже:

И в коде передайте область действия как https://management.azure.com/user_impersonation например

scopes: ["https://management.azure.com/user_impersonation"]

Я могу успешно получить результаты API, как показано ниже:

const pca = new PublicClientApplication(msalConfig);

function FetchDataComponent() {
    const { instance, accounts } = useMsal();
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    const loginRequest = {
        scopes: ["https://management.azure.com/user_impersonation"],
    };

    const fetchData = async () => {
        try {
            const response = await instance.acquireTokenPopup(loginRequest);
            const accessToken = response.accessToken;
            const fetchResponse = await fetch('https://management.azure.com/subscriptions/xxx/resourceGroups/ruk/providers/Microsoft.Network/frontDoors?api-version=2019-05-01', {
                headers: {
                    Authorization: `Bearer ${accessToken}`,
                },
            });

            if (!fetchResponse.ok) {
                throw new Error(`HTTP error! status: ${fetchResponse.status}`);
            }

            const data = await fetchResponse.json();
            setData(data);
        } catch (err) {
            setError(err.message);
        }
    };

    return (
        <div>
            <button onClick = {fetchData}>Fetch Data</button>
            {error && <p>Error: {error}</p>}
            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
        </div>
    );
}

function App() {
    return (
        <MsalProvider instance = {pca}>
            <AuthenticatedTemplate>
                <FetchDataComponent />
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <p>Please sign in to see the data.</p>
            </UnauthenticatedTemplate>
        </MsalProvider>
    );
}

export default App;

Поскольку у меня нет входной двери, я получил пустой вывод: