Вызов защищенного веб-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-приложению доступ к бэкэнд-приложению? Чтение всех доступных статей смутило меня еще больше.

См. также:  Traefik как Kubernetes Ingress в Azure - назначение статического IP-адреса службе Traefik

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

Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. Sohryu

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

    var loginRequest = {
                       scopes: ["api://aa059cdd-1f53-4707-82a8-fdf7bd6c2859/Test"] 
                   };
    
    
    msalInstance.loginPopup(loginRequest)
    .then(response => {
        // handle response
    })
    .catch(err => {
        // handle error
    });
    
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: