Ошибка аутентификации при вызове Azure API
Я использую приложение реагирования для вызова Azure API. Вот как это настроено:
import { BrowserAuthError, PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider, useMsal, AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react';
import { msalConfig } from './authConfig';
const pca = new PublicClientApplication(msalConfig);
const { instance, accounts } = useMsal();
const loginRequest = {
scopes: ["User.Read"],
};
const response = await instance.acquireTokenPopup(loginRequest);
const accessToken = response.accessToken;
const fetchResponse = await fetch('https://management.azure.com/subscriptions/<subid>/resourceGroups/<rg>/providers/Microsoft.Network/frontDoors/<afd>?api-version=2021-06-01', {
headers: {
Authorization: `Bearer ${accessToken}`,
},
});
const data = await fetchResponse.json();
Это то, что у меня есть в authConfig
const msalConfig = {
auth: {
clientId: <clientId>,
authority: `https://login.microsoftonline.com/<tenantId>`,
redirectUri: window.location.origin,
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false,
},
};
Я настроил следующие разрешения в приложении, а также создал субъект-службу и предоставил ему доступ участника к подписке. Я могу получить токен, используя этот код, но использование этого токена приводит к
{
"error": {
"code": "AuthenticationFailed",
"message": "Authentication failed."
}
}
Я пропустил какой-то шаг здесь?
При добавлении разрешений API управления службами Azure меня запрашивают одобрение администратора.
Это настройки корпоративных приложений:
🤔 А знаете ли вы, что...
React - это библиотека JavaScript, разработанная компанией Facebook.
Ответ:
Первоначально я создал приложение 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;
Поскольку у меня нет входной двери, я получил пустой вывод:
