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

Применяется: Внешние клиенты (дополнительные сведения)

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

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

В рабочей среде мы рекомендуем использовать Azure Front Door с подпиской standard/Premium в качестве обратного прокси-сервера.

Необходимые условия

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

Настройка Azure Front Door в качестве обратного прокси-сервера

1. Ознакомьтесь с тем, как использовать Azure Front Door с CORS, прочитав статью об использовании Azure Front Door standard/Premium с CORS.
2. Используйте инструкции, описанные в разделе "Включение пользовательских доменов URL-адресов для приложений во внешних клиентах", чтобы добавить пользовательский домен в вашего внешнего клиента.
   • Для создания Azure Front Door используйте шаблон azd.
3. В примере SPA откройте файл API\React\ReactAuthSimple\src\config.ts, а затем замените значение BASE_API_URL, http://localhost:3001/api, https://Enter_Custom_Domain_URL/Enter_the_Tenant_ID_Here. Замените заполнитель:
   1. Enter_Custom_Domain_URL url-адрес личного домена, например contoso.com.
   2. Enter_the_Tenant_ID_Here с вашим идентификатором клиента. Если у вас нет идентификатора арендатора, вы можете узнать, как прочитать сведения об арендаторе.
4. При необходимости повторно запустите образец SPA.

Создание Azure Front Door в качестве обратного прокси-сервера с помощью шаблона azure Developer CLI (azd)

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

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

   При появлении запроса введите имя для среды 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. Если у вас нет поддомена арендатора, узнайте, как узнать сведения о вашем арендаторе.
   • customDomain: полный URL-адрес личного домена, настроенного во внешнем идентификаторе, например login.example.com.

Рекомендации по использованию Azure Front Door в качестве обратного прокси-сервера

При настройке Azure Front Door в качестве обратного прокси-сервера рекомендуется использовать следующие рекомендации для управления заголовками CORS в рабочей среде:

Ограничение источников

При настройке Azure Front Door разрешен только URL-адрес домена SPA, например https://www.contoso.comв качестве источника. Избегайте конфигураций, разрешающих все источники, такие как *, что может привести к уязвимостям системы безопасности.

Использование простых запросов

Встроенные запросы аутентификации уже соответствуют всем условиям простых запросов:

• Использует Http Method: POST.
• Использует Content-Type: application/x-www-form-urlencoded.
• Запрос не требует настраиваемых заголовков.
• Запрос не включает объект ReadableStream в запросе.
• Запрос не требует использования XMLHttpRequest.

Связанное содержимое

• Дополнительные сведения о совместном использовании ресурсов (CORS) между источниками.
• справочник по API нативной аутентификации.