Блог

Как мой интерфейс, так и серверная часть (функции Azure) защищены Azure Active Directory (AAD).

Интерфейс: я реализовал MSAL в Angular так, как описано здесь: (https://www.pshul.com/2020/02/07/azure-ad-authentication-from-angular-to-azure-functions /). Теперь, при открытии моей веб-страницы Angular, я перенаправляюсь на логин Microsoft, который принимает только правильных пользователей и учетные записи, которые, похоже, работают.

Серверная часть: мои серверные конечные точки не разрешают запросы без действительного id_token из зарегистрированной учетной записи. Все запросы с недопустимым токеном приведут к ошибке 401 (несанкционированной), которая также, похоже, работает.

Проблема заключается в вызове внутренних функций из моего интерфейса, или, скорее, в получении id_token: когда я вошел в интерфейс, как я описал выше, я хочу сохранить id_token, и мой перехватчик отправляет его с каждым запросом, поэтому мне не нужен дополнительный вход в систему при каждом запросе. В упомянутой мной ссылке это, похоже, обрабатывалось MSAL и MSALInterceptor, что у меня не сработало (он не отправил какой-либо токен-носитель на серверную часть), поэтому у меня был собственный перехватчик, который захватил токен из локального хранилища. Проблема в том, что токен из localStorage также приводит к ошибке 401, поэтому он кажется недопустимым. Когда я не ошибаюсь, при входе в систему он вызывает login и получает id-токен из https://MyAzureWebPage/.auth/me , который он хранит в локальном хранилище, но этот токен не работает. При вызове https://MyAzureWebPage/.auth/me вручную и используя этот id_token с postman, это работает. Кто-нибудь знает, что я делаю неправильно или где я могу получить правильный id_token?

Вот моя конфигурация MSAL, возможно, я делаю что-то не так:

 MsalModule.forRoot({
      auth: {
        clientId: 'myCliendAdd',
        authority: "https://login.microsoftonline.com/myTenantID",
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      },
    },
    {
      popUp: !isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        ['https://MyAzureWebPage/.auth/me', ['user.read']]
      ],
      extraQueryParameters: {}
    }), 
 providers: [
    AuthGuard,
    RoleGuard,
    { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true }

  ],
  bootstrap: [AppComponent],
})
  

По какой-то причине токен, который я получаю из msal (пример:

     this.broadcastService.subscribe("msal:acquireTokenSuccess", payload => {
      console.log(payload)   
  });
  

и из локального хранилища отличается от токена, который я получаю при вызове https://MyAzureWebPage/.auth/me , который является единственным, который, кажется, работает

Если вам нужна дополнительная информация, я добавлю ее здесь

Если вы хотите вызвать функцию Azure, спроектированную Azure AD в приложении angular, пожалуйста, обратитесь к следующему коду

• Создайте приложение Azure AD для защиты функции

  1. Зарегистрируйте приложение Azure AD. После этого скопируйте приложение (клиент) Идентификатор и идентификатор каталога (клиента)

  2. Настройте перенаправление URI. Выберите Web и введите <app-url>/.auth/login/aad/callback .

  3. Включить неявный поток предоставления

  4. Определите область API и скопируйте ее

  5. Создайте секрет клиента.

• Включите Azure Active Directory в вашем приложении App Service

• Создайте клиентское приложение AD для доступа к функции

  1. Регистрация приложения
  2. Включить неявный поток предоставления
  3. настройте разрешения API. Пусть ваше клиентское приложение имеет разрешения на доступ к функции

• Код

 MsalModule.forRoot(
      {
        auth: {
          clientId: '232a1406-b27b-4667-b8c2-3a865c42b79c',
          authority:
            'https://login.microsoftonline.com/e4c9ab4e-bd27-40d5-8459-230ba2a757fb',
          redirectUri: 'http://localhost:4200/',
        },
        cache: {
          cacheLocation: 'localStorage',
          storeAuthStateInCookie: isIE, // set to true for IE 11
        },
      },
      {
        popUp: !isIE,
        consentScopes: [
          'user.read',
          'openid',
          'profile',
          '<your function app scope your define>',
        ],
        unprotectedResources: [],
        protectedResourceMap: [
          [
            '<your function app url>',
            [<your function app scope you define>],
          ]
        ],
        extraQueryParameters: {},
      }
    ),
  ],