네이티브 인증(미리 보기)을 사용하는 단일 페이지 앱의 프로덕션 환경에서 Azure Front Door를 역방향 프록시로 사용

적용: 회색 X 기호가 있는 흰색 원 작업 테넌트는 녹색 원 안에 흰색 체크 표시 기호가 있는 외부 테넌트(자세히 알아보기)

이 문서에서는 네이티브 인증 API사용하는 SPA(단일 페이지 앱)의 역방향 프록시로 Azure Front Door를 사용하는 방법을 알아봅니다.

네이티브 인증 API는 CORS(원본 간 리소스 공유)를 지원하지 않습니다. 따라서 사용자 인증에 이 API를 사용하는 SPA(단일 페이지 앱)는 프런트 엔드 JavaScript 코드에서 성공적인 요청을 수행할 수 없습니다. 이 문제를 해결하려면 SPA와 네이티브 인증 API 사이에 프록시 서버를 추가합니다. 프록시 서버는 적절한 CORS 헤더를 응답에 삽입합니다.

프로덕션 환경에서는 표준/프리미엄 구독 역방향 프록시로 Azure Front Door를 사용하는 것이 좋습니다.

필수 구성 요소

• Azure 구독. 무료로 계정을만드세요.
• URL을 통해 액세스할 수 있는 샘플 SPA(예: http://www.contoso.com:
  • 빠른 시작에 설명된 React 앱을 사용할 수 있습니다. 네이티브 인증 API사용하여 사용자를 샘플 React SPA에 로그인합니다. 그러나 이 가이드에서는 해당 설정에 대해 설명하므로 프록시 서버를 구성하거나 실행하지 마세요.
  • 앱을 실행한 후 이 가이드에서 나중에 사용할 수 있는 앱 URL을 기록합니다. 프로덕션 환경에서 이 URL에는 사용자 지정 도메인 URL(예: http://www.contoso.com)으로 사용하려는 도메인이 포함됩니다.
• Azure 개발자 CLI(azd)를 설치합니다.

Azure Front Door를 역방향 프록시로 설정

1. CORS에서 Azure Front Door 표준/프리미엄 사용 문서를 참조하여 CORS에서 Azure Front Door를 사용하는 방법을 숙지합니다.
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을(를) 사용하여 contoso.com과 같은 사용자 지정 도메인 URL을 설정하세요.
   2. 디렉터리(테넌트) ID를 활용하여 Enter_the_Tenant_ID_Here을 사용하십시오. 테넌트 ID가 없는 경우, 테넌트 세부 정보를읽는 방법을 알아보세요.
4. 필요한 경우 샘플 SPA를 다시 실행합니다.

Azure 개발자 CLI(azd) 템플릿을 사용하여 Azure Front Door를 역방향 프록시로 만들기

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: SCHEME://DOMAIN:PORT 형식의 CORS 요청을 허용하는 원본 도메인입니다. 예를 들면 다음과 같습니다. http://localhost:3000.
   • tenantSubdomain: 프록시하는 외부 테넌트의 하위 도메인입니다. 예를 들어, 테넌트 기본 도메인이 contoso.onmicrosoft.com인 경우 contoso를 사용합니다. 테넌트 하위 도메인이 없는 경우 테넌트 세부 정보를 읽는 방법을 알아봅니다.
   • customDomain: 외부 ID 내에 구성된 사용자 지정 도메인의 전체 URL(예: login.example.com)입니다.

Azure Front Door를 역방향 프록시로 사용하기 위한 지침

프로덕션 환경에서 CORS 헤더를 관리하기 위해 Azure Front Door를 역방향 프록시로 설정할 때 다음 지침을 사용하는 것이 좋습니다.

원본 제한

Azure Front Door를 구성하는 경우 https://www.contoso.com같은 SPA 도메인 URL만 원본으로 허용합니다. 보안 취약성을 초래할 수 있는 * 같은 모든 원본을 허용하는 구성을 사용하지 않습니다.

간단한 요청 사용

네이티브 인증 요청은 간단한 요청의 모든 조건을 이미 충족합니다.

• Http Method: POST사용합니다.
• Content-Type: application/x-www-form-urlencoded사용합니다.
• 요청에는 사용자 지정 헤더가 필요하지 않습니다.
• 요청에 ReadableStream 개체가 포함되지 않습니다.
• 요청에는 XMLHttpRequest사용이 필요하지 않습니다.

관련 콘텐츠

• 원본 간 리소스 공유(CORS)에 대해 자세히 알아보세요.
• 네이티브 인증 API 참조.