Вызов защищенного веб-API Azure AD из Angular Frontend [authentication, azure, api, asp.net-core-webapi, msal]

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

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

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

Интерфейс Angular с MSAL
Я создал приложение в AAD, дал ему права User.Read для MS Graph, скопировал идентификатор в код MSAL и с помощью MSAL Interceptor, вызвав Graph API, было довольно легко следовать документации.
Web-API
Я создал веб-API с ядром .NET, просто вернув некоторые демонстрационные данные в GET. Я опубликовал API для веб-приложения Azure (https://myappurl.azurewebsites.net/api/test, вызвать его из Angular или Postman не было проблемой
Проверка подлинности
Используя портал 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-приложению доступ к бэкэнд-приложению? Чтение всех доступных статей смутило меня еще больше.

См. также: проблемы с разрешениями организации Azure DevOps - ошибка 401

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

Post Views: 133

Комментарии: 1

Sohryu 25.07.2019 в 00:00
В вашем приложении регистрации 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
});
```
Ответить

Добавить комментарий