Angular MSAL AD 401 не авторизован в Angular приложении, но в Почтальоне - 200 нормально - ASP. NET Core Web API

Question

Добрый день,

Я пытаюсь получить данные из моего ASP. NET Core Web API, используя Angular MSAL, но у меня ошибка в приложении angular там написано 401 Unauthorized Error.

Я попытался получить access_token во вкладке приложения браузера и использовать его на Postman, и технически это работает. Я просто понятия не имел, почему в моем приложении angular выдается ошибка Unauthorized 401.

Вот мой app.module.js

export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']]
];

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

imports: [
// msal angular
     MsalModule.forRoot({
        auth: {
            clientId: 'MYCLIENTID-FROMAD',
            authority: "https://login.microsoftonline.com/common/",
            validateAuthority: true,
            redirectUri: "http://localhost:4200/",
            postLogoutRedirectUri: "http://localhost:4200/",
            navigateToLoginRequestUrl: true,
        },
        cache: {
            cacheLocation : "localStorage",
            storeAuthStateInCookie: true, // set to true for IE 11
        },
        framework: {
            unprotectedResources: ["https://www.microsoft.com/en-us/"],
            protectedResourceMap: new Map(protectedResourceMap)
        },
      }, {
        popUp: !isIE,
        extraQueryParameters: {}
    })
],
providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: MsalInterceptor,
        multi: true
      }
   ],

Вот мой ASP. NET Core Хост веб-API: http://localhost:5000

Где он реализует [Authorize] в некоторых своих Controllers. Я думаю, что есть проблема в моем бэкэнде, так как все работает, используя мой access_token из моего локального хранилища, когда я тестировал его, используя Postman с заголовком авторизации Bearer access_token.

Вкладка приложения браузера после успешного входа в систему

Заранее спасибо.

Answer 1

Главное, на мой взгляд, вам не хватает конфигурации защищенной карты ресурсов. В настоящее время он определяет только MS Graph API. Вы также должны добавить свой собственный API:

export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']],
  ['http://localhost:5000', ['your-api-client-id/user_impersonation']]
];

Замените your-api-client-id идентификатором клиента / идентификатором приложения для вашего API. Вы также можете использовать URI идентификатора приложения для API. Последняя часть - это область действия, замените user_impersonation на область, определенную вами для API (это можно сделать через Expose API в Azure Portal).

Теперь, когда он видит HTTP-запрос к http://localhost:5000, он узнает, как получить для него токен и прикрепить его к запросу.