Настройка обратного прокси-сервера для одностраничного приложения, которое вызывает собственный API проверки подлинности с помощью приложения-функции Azure (предварительная версия)

Применимо: Арендаторы рабочей силы Внешние арендаторы (узнать больше)

В этой статье вы узнаете, как настроить обратный прокси с помощью Azure Functions для управления заголовками CORS в тестовой среде для одностраничного приложения (SPA), использующего собственный API для проверки подлинности.

API нативной аутентификации не поддерживает общий доступ к ресурсам с разных источников (CORS). Поэтому одностраничное приложение (SPA), использующее этот API для проверки подлинности пользователей, не может выполнять успешные запросы из интерфейса кода JavaScript. Чтобы устранить эту проблему, необходимо добавить прокси-сервер между SPA и собственным API проверки подлинности. Этот прокси-сервер внедряет соответствующие заголовки CORS в ответ.

Это решение предназначено для тестирования и должно НЕ использоваться в рабочей среде. Если вы ищете решение для использования в рабочей среде, мы рекомендуем использовать решение Azure Front Door, см. инструкции в Использование Azure Front Door в качестве обратного прокси-сервера для управления заголовками CORS для SPA в рабочей.

Предпосылки

• Подписка Azure. Создайте учетную запись бесплатно .
• Регистрация Microsoft.App поставщика ресурсов см. в разделе "Регистрация поставщика ресурсов". Этот шаг необходимо выполнить только один раз для каждой созданной подписки.
• Установите интерфейс командной строки разработчика Azure (azd).
• Пример SPA, к которому можно получить доступ через URL-адрес, например http://www.contoso.com:
  • Вы можете использовать React-приложение, описанное в руководстве «Быстрый старт: Вход пользователей в пример React SPA с использованием собственного API проверки подлинности». Однако не настраивайте или не запускайте прокси-сервер, так как в этом руководстве рассматривается настройка.
  • После запуска приложения запишите URL-адрес приложения для дальнейшего использования в этом руководстве.

Создание обратного прокси-сервера в приложении-функции Azure с помощью шаблона Azure Developer CLI (azd)

1. Чтобы инициализировать шаблон azd, выполните следующую команду:

   azd init --template https://github.com/azure-samples/ms-identity-extid-cors-proxy-function
   

   При появлении запроса введите имя для среды azd. Это имя используется в качестве префикса для группы ресурсов, поэтому оно должно быть уникальным в подписке Azure.

2. Чтобы войти в Azure, выполните следующую команду:

   azd auth login
   

3. Чтобы создать, подготовить и развернуть ресурсы приложения, выполните следующую команду:

   azd up
   

   При появлении запроса введите следующие сведения, чтобы завершить создание ресурса:

   • Azure Location: местоположение Azure, в котором развертываются ваши ресурсы.
   • Azure Subscription: подписка Azure, где размещены ваши ресурсы.
   • corsAllowedOrigin: домен источника для разрешения запросов CORS в формате SCHEME://DOMAIN:PORT, например http://localhost:3000.
   • tenantSubdomain: поддомен внешнего арендатора, который мы проксируем. Например, если основной домен клиента — это contoso.onmicrosoft.com, используйте contoso. Если у вас нет поддомена арендатора, узнайте, как узнать сведения о вашем арендаторе.

Тестирование примера SPA с помощью обратного прокси-сервера

1. В примере SPA откройте файл API\React\React\ReactAuthSimple\src\config.ts , а затем замените:

   • значение BASE_API_URL, http://localhost:3001/api, с https://Enter_App_Function_Name_Here.azurewebsites.net.
   • используйте Enter_App_Function_Name_Here как заполнитель для имени вашего функционального приложения. При необходимости повторно запустите образец SPA.

2. Перейдите по примеру URL-адреса SPA, а затем проверьте потоки регистрации, входа и сброса пароля. Приложение SPA должно работать правильно, так как обратный прокси-сервер правильно управляет заголовками CORS.

Связанный контент

• использовать Azure Front Door в качестве обратного прокси-сервера в рабочей среде для SPA, использующего собственную проверку подлинности.