Используйте MSAL Angular для доступа к защищенной функции Azure

Question

Этот вопрос основан на примере кода, предоставленного Microsoft:
https://docs.microsoft.com/en-us/samples/azure-samples/active-directory-javascript-singlepageapp-angular/active-directory-javascript-singlepageapp-angular/

app.module.ts настроен, и приложение может успешно войти в систему через Azure B2 C экран входа в систему.

Существует также функция Azure, которая просто возвращает объект JSON с одним строковым свойством "text" через запрос HTTP GET. Функция была настроена для аутентификации с использованием Azure B2 C. Это было подтверждено посещением URL-адреса функции в браузере, входом через экран входа B2 C и возвращением объекта JSON из функции.

Компонент, вызывающий защищенный API выглядит следующим образом:

import { Component, OnInit } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { HttpClient } from '@angular/common/http';

const FUNCTION_ENDPOINT = 'function-url-here';

export interface MyInterface {
  text: string;
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  value: MyInterface;

  constructor(private authService: MsalService, private http: HttpClient) { }

  ngOnInit() {
    this.getValue();
  }

  getValue() {
    this.http.get<MyInterface>(FUNCTION_ENDPOINT).toPromise()
      .then(value => {
          this.value = value;
      });
  }

}

Когда функция аутентификации отключена, JSON из функции возвращается в приложение Angular. Когда функция аутентификации включена, в консоль браузера выводится следующая ошибка:

Доступ к XMLHttpRequest по адресу https://mytenant.b2clogin.com/mytenant.onmicrosoft.com/oauth2/v2.0/authorize?response_type=id_token&redirect_uri=https%3A%2F%functionname.azurewebsites.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=SAMPLE-STRING&scope=openid+profile+email&response_mode=form_post&p=b2c_1_signupsignin1&nonce=SAMPLE-STRING&state=redir%3D%252Fapi%252FHttpTrigger2%253Fcode%SAMPLE-STRING (перенаправлен с https://functionname.azurewebsites.net/api/HttpTrigger2?code=SAMPLE-STRING ') из источника' null 'был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '.

Вторая ошибка:

core. js: 4002 Ошибка ERROR: Uncaught (в обещании): HttpErrorResponse: {"headers": {"normalizedNames": {}, "lazyUpdate": null, "headers": { }}, "status": 0, "statusText": "Неизвестная ошибка", "url": "https://functionname.azurewebsites.net/api/HttpTrigger2?code=SAMPLE-STRING", "ok": false, "name": "HttpErrorResponse", "message ":" Http-сообщение об ошибке для https://functionname.azurewebsites.net/api/HttpTrigger2?code=SAMPLE-STRING: 0 Неизвестная ошибка "," error ": {" isTrusted ": true}}

В предупреждении также консоль:

Блокировка перекрестного чтения (CORB) заблокировала ответ перекрестного источника https://mytenant.b2clogin.com/mytenant.onmicrosoft.com/oauth2/v2.0/authorize?response_type=id_token&redirect_uri=https%3A%2F%2Ffunctionname.azurewebsites.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=SAMPLE-STRING&scope=openid+profile+email&response_mode=form_post&p=b2c_1_signupsignin1&nonce=SAMPLE-STRING&state=redir%3D%252Fapi%252FHttpTrigger2%253Fcode%SAMPLE-STRING с текстом типа MIME / html. Подробнее см. https://www.chromestatus.com/feature/5629709824032768.

URL-адрес приложения Angular: http://localhost: 4200 / . Вот конфигурация CORS для функции Azure:

Что может сделать, чтобы приложение Angular могло выполнять аутентифицированные запросы для функции Azure?

Answer 1

AAD и AAD B2 C не поддерживают CORS, как указано в документации MSDN. Это означает, что когда ваше приложение Angular вызывает API-функцию без токена и, таким образом, перенаправляется на конечную точку AAD B2 C для проверки подлинности, возникает нерешаемая проблема. Уловка с так называемым «неявным потоком» состоит в том, чтобы предотвратить это, гарантируя, что вы сначала получили токен при прямом вызове из приложения Angular в конечную точку B2 C. И поскольку регистрация приложения, для которой назначен этот токен, имеет разрешение на доступ к API функции, токен может быть неявно создан и перенаправлен в API функции, который затем принимает его. И тогда не происходит никакого перенаправления, и, следовательно, также не возникает проблем с CORS.

Часто - по крайней мере из моего опыта - проблема с CORS, с которой вы сталкиваетесь, немного вводит в заблуждение, поскольку она скрывает реальную проблему, которая может быть 1) пользователь не является проверен на всех (токен полностью отсутствует) или 2) токен для вызова API не создается неявным образом и не вводится в вызов HTTP. Я предлагаю следующие проверки:

1. MsalModule правильно настроен (примечание: MsalModule.forRoot(<config>) не поддерживает динамические c конфигурации)
2. маркер пользователя доступен в SessionStorage или LocalStorage без ошибок
3. Неявный поток настроен правильно с:
   • MsalInterceptor зарегистрирован как поставщик
   • protectedResourceMap настроен для URL функции

Недавно я создал и задокументировал эталонное решение с функцией Angular & Azure, подключенной к AAD B2 C. Источник и файл readme вы найдете здесь: https://github.com/garaio/DevCamp-AzureServerless/tree/master/Solutions/D04-AAD-B2C-multi-tenancy#client -app-deploy .

Answer 2

Токен доступа можно получить, обратившись к этому документу . Не забудьте обновить protectedResourceMap до вашего значения. Для B2 C это должно быть что-то вроде

protectedResourceMap: {"https://tonyb2ctest.onmicrosoft.com/test", ["user_impersonation"]}

Затем вы можете вызвать функцию api с токеном доступа.