Вызов защищенного веб-API Azure AD из Angular Frontend

В настоящее время я разрабатываю Angular Frontend, который использует MSAL для аутентификации пользователей. Этот интерфейс должен вызывать веб-API (также размещенный в Azure), который защищен Azure Active Directory.

Хотя мне легко удалось работать с Angular и MSAL, получить токен и успешно вызвать Graph / me в качестве теста, я не могу заставить вызов API работать, я всегда получаю 401.

Я использую следующую настройку:

  1. Интерфейс Angular с MSAL
    Я создал приложение в AAD, дал ему права User.Read для MS Graph, скопировал идентификатор в код MSAL и с помощью MSAL Interceptor, вызвав Graph API, было довольно легко следовать документации.
  2. Web-API
    Я создал веб-API с ядром .NET, просто вернув некоторые демонстрационные данные в GET. Я опубликовал API для веб-приложения Azure (https://myappurl.azurewebsites.net/api/test, вызвать его из Angular или Postman не было проблемой
  3. Проверка подлинности
    Используя портал Azure, в настройках веб-приложения я активировал проверку подлинности веб-службы с помощью Azure Active Directory. В качестве необходимого приложения я поставил то же, что использовал на шаге 1 для Frontend.

На этом этапе я больше не мог вызывать свой API, всегда получая 401. Я извлек токен JWT из кода Angular и попробовал позвонить почтальону с заголовками Authorization: Bearer eyJ0xxxxx, все еще 401.

Я подумал, что, «войдя в» свой интерфейс, я смогу использовать токен для идентификации себя и для вызова API, поскольку он использует тот же идентификатор приложения, но почему-то я думаю, что это перепутал. Я просмотрел много документации, но она по большей части устарела, так как регистрация приложений на портале Azure изменилась.

export const protectedResourceMap:[string, string[]][]=[[‘https://graph.microsoft.com/v1.0/me’, [‘user.read’]] ]; MsalModule.forRoot({ clientID: «my-client-id», redirectUri: «https://localhost:4200/profile», postLogoutRedirectUri: «https://localhost:4200/bye», authority: «https://login.microsoftonline.com/my-tenant-id», validateAuthority: true, cacheLocation : «localStorage», navigateToLoginRequestUrl: true, popUp: false, consentScopes: [ «user.read» ], unprotectedResources: [«https://www.microsoft.com/en-us/»], protectedResourceMap: protectedResourceMap, correlationId: ‘1234’, piiLoggingEnabled: true }),

Нужно ли мне добавлять webAPI к защищенным ресурсам в Angular? Нужно ли мне дополнительное приложение для защиты API, а затем разрешить моему Frontend-приложению доступ к бэкэнд-приложению? Чтение всех доступных статей смутило меня еще больше.

Я в такой же ситуации. Помог ли вам предоставленный ответ? У меня есть URL-адрес области действия моего открытого API, но я не знаю, где его указать в моем интерфейсе … Вы добавили его в consentScopes? Или к protectedResourceMap? Помощь будет очень признательна!   —  person Sohryu    schedule 05.04.2020

Источник: ledsshop.ru

Стиль жизни - Здоровье!