비대화형 로그인을 사용하여 단일 페이지 웹 애플리케이션을 보호하는 방법

사용자가 Microsoft Entra ID에 로그인할 수 없는 경우에도 Microsoft Entra ID를 사용하여 단일 페이지 웹 애플리케이션을 보호합니다.

이 비대화형 인증 흐름을 만들기 위해 먼저 Microsoft Entra ID에서 액세스 토큰을 획득하는 것을 담당하는 Azure Function 보안 웹 서비스를 생성합니다. 이 웹 서비스는 단일 페이지 웹 애플리케이션에서만 단독으로 사용할 수 있습니다.

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

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

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

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

   

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

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

Azure Function 만들기

Microsoft Entra ID에 대한 인증을 담당하는 보안 웹 서비스 애플리케이션을 생성합니다.

1. Azure Portal에서 함수 만들기 자세한 내용은 Azure Functions 시작을 참조하세요.

2. 단일 페이지 웹 애플리케이션에서 액세스할 수 있도록 Azure 함수에서 CORS 정책을 구성합니다. CORS 정책은 브라우저 클라이언트를 허용된 웹 애플리케이션 원본으로 보호합니다. 자세한 내용은 CORS 기능 추가를 참조하세요.

3. Azure 함수에 시스템 할당 ID를 추가하여 Microsoft Entra ID에서 인증을 받는 서비스 사용자를 만들 수 있습니다.

4. 시스템 할당 ID에 대한 역할 기반 액세스를 Azure Maps 계정에 부여합니다. 자세한 내용은 역할 기반 액세스 권한 부여를 참조하세요.

5. 지원되는 메커니즘 중 하나 또는 REST 프로토콜과 함께 시스템 할당 ID를 사용하여 Azure Maps 액세스 토큰을 가져오기 위해 Azure 함수용 코드를 씁니다. 자세한 내용은 Azure 리소스 토큰 가져오기를 참조하세요

   예제 REST 프로토콜은 다음과 같습니다.

   GET /MSI/token?resource=https://atlas.microsoft.com/&api-version=2019-08-01 HTTP/1.1
   Host: localhost:4141
   

   다음은 응답 예제입니다.

   HTTP/1.1 200 OK
   Content-Type: application/json
   
   {
       "access_token": "eyJ0eXAi…",
       "expires_on": "1586984735",
       "resource": "https://atlas.microsoft.com/",
       "token_type": "Bearer",
       "client_id": "..."
   }
   

6. Azure 함수 HttpTrigger에 대한 보안 구성.

   1. 함수 액세스 키 만들기
   2. 프로덕션 환경에서 Azure 함수에 대한 HTTP 엔드포인트를 보호합니다.

7. 웹 애플리케이션 Azure Maps Web SDK를 구성합니다.

   //URL to custom endpoint to fetch Access token
   var url = 'https://{App-Name}.azurewebsites.net/api/{Function-Name}?code={API-Key}';
   
   var map = new atlas.Map('myMap', {
               center: [-122.33, 47.6],
               zoom: 12,
               language: 'en-US',
               view: "Auto",
           authOptions: {
               authType: "anonymous",
               clientId: "<insert>", // azure map account client id
               getToken: function(resolve, reject, map) {
                   fetch(url).then(function(response) {
                       return response.text();
                   }).then(function(token) {
                       resolve(token);
                   });
               }
           }
       });
   
       // use the following events to debug, you can remove them at any time.
       map.events.add("tokenacquired", function () {
           console.log("token acquired");
       });
       map.events.add("error", function (err) {
           console.log(JSON.stringify(err.error));
       });
   

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

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

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

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

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

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

다음 단계

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

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

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