다음을 통해 공유


사용자 로그인을 통해 단일 페이지 애플리케이션 보호

다음 가이드는 콘텐츠 서버에서 호스트되거나 최소한의 웹 서버 종속성이 있는 애플리케이션과 관련이 있습니다. 이 애플리케이션은 Microsoft Entra 사용자에게만 보호되는 보안 리소스를 제공합니다. 시나리오의 목표는 웹 애플리케이션이 Microsoft Entra ID에 인증하고 사용자를 대신하여 Azure Maps REST API를 호출할 수 있도록 하는 것입니다.

Azure Portal에서 Azure Maps 계정 인증 세부 정보를 보려면 다음을 수행합니다.

  1. Azure Portal에 로그인합니다.

  2. Azure Portal 메뉴로 이동합니다. 모든 리소스를 선택한 다음, Azure Maps 계정을 선택합니다.

  3. 왼쪽 창의 설정에서 인증을 선택합니다.

    Screenshot showing your Azure Maps authentication options in the Azure portal.

Azure Maps 계정을 만들 때 세 가지 값이 생성됩니다. 해당 값은 Azure Maps의 두 가지 인증 유형을 지원하는 데 사용됩니다.

  • Microsoft Entra 인증: Client ID는 REST API 요청에 사용되는 계정을 나타냅니다. Client ID 값은 애플리케이션 구성에 저장되어야 하며, Microsoft Entra 인증을 사용하는 Azure Maps HTTP 요청을 만들기 전에 검색되어야 합니다.
  • 공유 키 인증: Primary KeySecondary Key가 공유 키 인증의 구독 키로 사용됩니다. 공유 키 인증은 각 요청과 함께 Azure Maps 계정에서 생성된 키를 Azure Maps에 전달합니다. 키를 정기적으로 다시 생성하는 것이 좋습니다. 다시 생성하는 동안 현재 연결을 유지하기 위해 두 개의 키가 제공됩니다. 하나의 키를 다시 생성하는 동안 다른 키를 사용할 수 있습니다. 키를 다시 생성하는 경우 이 계정에 액세스하는 모든 애플리케이션이 새 키를 사용하도록 업데이트해야 합니다. 자세한 내용은 Azure Maps 인증을 참조하세요.

Microsoft Entra ID에서 애플리케이션 등록 만들기

사용자가 로그인할 수 있도록 Microsoft Entra ID에 웹 애플리케이션을 만듭니다. 웹 애플리케이션은 Azure Maps REST API에 대한 사용자 액세스를 위임합니다.

  1. Azure Portal의 Azure 서비스 목록에서 Microsoft Entra ID>앱 등록>새 등록을 선택합니다.

    A screenshot showing application registration in Microsoft Entra ID.

  2. 이름을 입력하고 지원 계정 유형을 선택한 다음 Microsoft Entra ID가 토큰을 발급하는 URL과 맵 컨트롤이 호스트되는 URL을 나타내는 리디렉션 URI를 제공합니다. 자세한 샘플은 Azure Maps Microsoft Entra ID 샘플을 참조하세요. 그런 다음 등록을 선택합니다.

  3. 위임된 API 권한을 Azure Maps에 할당하려면 애플리케이션으로 이동합니다. 그런 다음, 앱 등록아래에서 API 권한>권한 추가를 선택합니다. 내 조직에서 사용하는 API에서 Azure Maps를 검색하고 선택합니다.

    Screenshot showing a list of APIs my organization uses.

  4. Azure Maps에 액세스 옆의 확인란을 선택한 다음 권한 추가를 선택합니다.

    Screenshot showing the request app API permissions screen.

  5. oauth2AllowImplicitFlow 사용 이를 사용하려면 앱 등록의 매니페스트 섹션에서 oauth2AllowImplicitFlowtrue로 설정합니다.

  6. 웹 SDK에서 사용할 앱 등록에서 Microsoft Entra 앱 ID와 Microsoft Entra 테넌트 ID를 복사합니다. Microsoft Entra 앱 등록 세부 정보와 Azure Map 계정의 x-ms-client-id를 웹 SDK에 추가합니다.

        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js" />
        <script>
            var map = new atlas.Map("map", {
                center: [-122.33, 47.64],
                zoom: 12,
                language: "en-US",
                authOptions: {
                    authType: "aad",
                    clientId: "<insert>",  // azure map account client id
                    aadAppId: "<insert>",  // azure ad app registration id
                    aadTenant: "<insert>", // azure ad tenant id
                    aadInstance: "https://login.microsoftonline.com/"
                }
            });
        </script>   
    
  7. 사용자 또는 그룹에 대해 Azure RBAC(Azure 역할 기반 액세스 제어)를 구성합니다. Azure RBAC를 사용하도록 설정하려면 다음 섹션을 참조하세요.

사용자에게 Azure Maps에 대한 역할 기반 액세스 권한 부여

Microsoft Entra 그룹 또는 보안 주체를 하나 이상의 Azure Maps 역할 정의에 할당하여 Azure RBAC(Azure 역할 기반 액세스 제어)를 부여할 수 있습니다.

Azure Maps에 대한 사용 가능한 Azure 역할 정의를 보려면 기본 제공 Azure Maps 역할 정의 보기를 참조하세요.

만든 관리 ID 또는 서비스 주체에 사용 가능한 Azure Maps 역할을 할당하는 방법에 대한 자세한 단계는 Azure Portal을 사용하여 Azure 역할 할당을 참조하세요.

Azure Maps 앱 및 대규모 사용자의 리소스 액세스를 효율적으로 관리하려면 Microsoft Entra 그룹을 참조하세요.

Important

사용자가 애플리케이션에 인증할 수 있으려면 먼저 Microsoft Entra ID에서 사용자를 만들어야 합니다. 자세한 내용은 Microsoft Entra ID를 사용한 사용자 추가 및 삭제를 참조하세요.

사용자를 위해 대규모 디렉터리를 효과적으로 관리하는 방법에 대해 알아보려면 Microsoft Entra ID를 참조하세요.

Warning

Azure Maps 기본 제공 역할 정의는 많은 Azure Maps REST API에 강력한 액세스 권한을 부여합니다. API 액세스를 최소한으로 제한하려면 사용자 지정 역할 정의 만들기를 참조하고 시스템 할당 ID를 사용자 지정 역할 정의에 할당합니다. 이렇게 하면 애플리케이션에서 Azure Maps에 액세스하는 데 필요한 최소 권한을 사용할 수 있습니다.

다음 단계

단일 페이지 애플리케이션 시나리오에 대한 추가 해석:

Azure Maps 계정에 대한 API 사용 현황 메트릭을 확인하는 방법을 알아봅니다.

Microsoft Entra ID를 Azure Maps와 통합하는 방법을 보여 주는 샘플을 살펴봅니다.