Konfigurowanie zwrotnego serwera proxy dla aplikacji jednostronicowej, która wywołuje natywny interfejs API uwierzytelniania przy użyciu aplikacji funkcji platformy Azure (wersja zapoznawcza)

Dotyczy: Dzierżawy zewnętrzne (dowiedz się więcej)

W tym artykule dowiesz się, jak skonfigurować zwrotny serwer proxy za pomocą aplikacji Azure Functions do zarządzania nagłówkami CORS w środowisku testowym dla jednostronicowej aplikacji (SPA), która korzysta z natywnego interfejsu API uwierzytelniania.

Natywny interfejs API uwierzytelniania nie obsługuje współużytkowania zasobów między źródłami (CORS). W związku z tym jednostronicowa aplikacja korzystająca z tego interfejsu API do uwierzytelniania użytkowników nie może skutecznie wysyłać żądań z kodu JavaScript frontend. Aby rozwiązać ten problem, należy dodać serwer proxy między SPA i natywnym interfejsem API uwierzytelniania. Ten serwer proxy wprowadza odpowiednie nagłówki CORS do odpowiedzi.

To rozwiązanie jest przeznaczone do celów testowych i powinno NIE być używane w środowisku produkcyjnym. Jeśli szukasz rozwiązania do użycia w środowisku produkcyjnym, zaleciliśmy użycie rozwiązania Azure Front Door. Przeczytaj instrukcje w Używanie usługi Azure Front Door jako zwrotnego serwera proxy do zarządzania nagłówkami CORS dla SPA w środowisku produkcyjnym.

Warunki wstępne

• Subskrypcja platformy Azure. Utwórz bezpłatne konto.
• Zarejestruj Microsoft.App dostawcę zasobów, zobacz Jak zarejestrować dostawcę zasobów. Ten krok należy wykonać tylko raz dla każdej nowo utworzonej subskrypcji.
• Zainstaluj interfejs wiersza polecenia dla deweloperów platformy Azure (azd).
• Przykładowy SPA, do którego można uzyskać dostęp za pośrednictwem adresu URL, takiego jak http://www.contoso.com:
  • Możesz użyć aplikacji React opisanej w Szybki start: logowanie użytkowników do przykładowego protokołu React SPA przy użyciu natywnego interfejsu API uwierzytelniania. Nie należy jednak konfigurować ani uruchamiać serwera proxy, ponieważ w tym przewodniku opisano konfigurację.
  • Po uruchomieniu aplikacji zarejestruj adres URL aplikacji do późniejszego użycia w tym przewodniku.

Tworzenie reverse proxy w aplikacji funkcji Azure przy użyciu szablonu Azure Developer CLI (azd)

1. Aby zainicjować szablon azd, uruchom następujące polecenie:

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

   Po wyświetleniu monitu wprowadź nazwę środowiska azd. Ta nazwa jest używana jako prefiks dla grupy zasobów, dlatego powinna być unikatowa w ramach subskrypcji platformy Azure.

2. Aby zalogować się do platformy Azure, uruchom następujące polecenie:

   azd auth login
   

3. Aby skompilować, aprowizować i wdrożyć zasoby aplikacji, uruchom następujące polecenie:

   azd up
   

   Po wyświetleniu monitu wprowadź następujące informacje, aby ukończyć tworzenie zasobów:

   • Azure Location: lokalizacja platformy Azure, w której są wdrażane zasoby.
   • Azure Subscription: Subskrypcja platformy Azure, w której są wdrażane zasoby.
   • corsAllowedOrigin: domena źródła zezwala na żądania CORS z formatu SCHEME://DOMAIN:PORT, na przykład http://localhost:3000.
   • tenantSubdomain: Domena podrzędna dzierżawy zewnętrznej, którą obsługujemy przez serwer proxy. Jeśli na przykład domena podstawowa najemcy jest contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz poddomeny dzierżawy, dowiedz się, jak przeczytać szczegóły dzierżawy.

Testowanie przykładowego SPA za pomocą zwrotnego serwera proxy

1. W przykładowym SPA otwórz plik API\React\ReactAuthSimple\src\config.ts , a następnie zastąp:

   • wartość BASE_API_URL, http://localhost:3001/api, z https://Enter_App_Function_Name_Here.azurewebsites.net.
   • zamień symbol zastępczy Enter_App_Function_Name_Here na nazwę swojej aplikacji funkcji. W razie potrzeby uruchom ponownie przykładowe SPA.

2. Przejdź do przykładowego adresu URL SPA, a następnie przetestuj przepływy rejestracji, logowania i resetowania hasła. Aplikacja SPA powinna działać poprawnie, ponieważ serwer proxy zwrotny prawidłowo zarządza nagłówkami CORS.

Powiązana zawartość

• Użyj usługi Azure Front Door jako zwrotnego serwera proxy w środowisku produkcyjnym dla SPA, który używa natywnego uwierzytelniania.