Вызов защищенного веб-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