단일 페이지 애플리케이션: 앱 등록

  • 아티클

Microsoft ID 플랫폼에서 SPA(단일 페이지 애플리케이션)를 등록하려면 다음 단계를 완료합니다. 암시적 허용 흐름을 지원하는 MSAL.js 1.0 및 PKCE를 사용하는 인증 코드 흐름을 지원하는 MSAL.js 2.0의 등록 단계는 서로 다릅니다.

앱 등록 만들기

팁

이 문서의 단계는 시작하는 포털에 따라 약간 다를 수 있습니다.

MSAL.js 1.0 및 2.0 기반 애플리케이션의 경우 둘 다 먼저 다음 단계를 완료하여 초기 앱 등록을 만듭니다.

  1. Microsoft Entra 관리 센터에 로그인합니다.
  2. 여러 테넌트에 액세스할 수 있는 경우 위쪽 메뉴의 설정 아이콘을 사용하여 디렉터리 + 구독 메뉴에서 애플리케이션을 등록하려는 테넌트로 전환합니다.
  3. ID>애플리케이션>앱 등록으로 이동하고 신규 등록을 선택합니다.
  4. 애플리케이션의 이름을 입력합니다. 이 이름은 앱의 사용자에게 표시될 수 있으며 나중에 변경할 수 있습니다.
  5. 애플리케이션에 지원되는 계정 형식을 선택합니다. 리디렉션 URI를 입력하면 안 됩니다. 다른 계정 형식에 대한 설명은 애플리케이션 등록을 참조하세요.
  6. 등록을 선택하여 앱 등록을 만듭니다.

그런 다음, 리디렉션 URI로 앱 등록을 구성하여 Microsoft ID 플랫폼이 보안 토큰과 함께 클라이언트를 리디렉션해야 하는 위치를 지정합니다. 애플리케이션에서 사용 중인 MSAL.js 버전에 해당하는 단계를 사용합니다.

리디렉트 URI: 인증 코드 흐름을 사용하는 MSAL.js 2.0

MSAL.js 2.0 이상을 사용하는 앱의 리디렉션 URI를 추가하려면 다음 단계를 따르세요. MSAL.js 2.0보다 높은 버전에서는 브라우저의 타사 쿠키 제한에 대한 대응으로 PKCE 및 CORS를 사용하여 인증 코드 흐름을 지원합니다. 암시적 허용 흐름은 MSAL.js 2.0보다 높은 버전에서 지원되지 않습니다.

  1. Microsoft Entra 관리 센터에서 이전에 앱 등록 만들기에서 만든 앱 등록을 선택합니다.
  2. 관리에서 인증>플랫폼 추가를 선택합니다.
  3. 웹 애플리케이션에서 단일 페이지 애플리케이션 타일을 선택합니다.
  4. 리디렉션 URI에서 리디렉션 URI를 입력합니다. 암시적 허용 및 하이브리드 흐름에서 확인란을 선택하면 안됩니다.
  5. 구성을 선택하여 리디렉션 URI 추가를 마칩니다.

이제 SPA(단일 페이지 애플리케이션)의 등록을 완료하고 클라이언트가 리디렉션되고 보안 토큰이 전송될 리디렉션 URI를 구성했습니다. 플랫폼 추가 창에서 단일 페이지 애플리케이션 타일을 사용하여 리디렉션 URI를 구성하면 애플리케이션 등록은 PKCE 및 CORS를 사용하여 인증 코드 흐름을 지원하도록 구성됩니다.

추가 지침을 보려면 자습서를 따르세요.

리디렉션 URI: 암시적 흐름을 사용하는 MSAL.js 1.0

MSAL.js 1.3 이하 및 암시적 허용 흐름을 사용하는 단일 페이지 앱에 대한 리디렉션 URI를 추가하려면 다음 단계를 수행합니다. MSAL.js 1.3 이전 버전을 사용하는 애플리케이션은 인증 코드 흐름을 지원하지 않습니다.

  1. Microsoft Entra 관리 센터에서 이전에 앱 등록 만들기에서 만든 앱 등록을 선택합니다.
  2. 관리에서 인증>플랫폼 추가를 선택합니다.
  3. 웹 애플리케이션에서 단일 페이지 애플리케이션 타일을 선택합니다.
  4. 리디렉션 URI에서 리디렉션 URI를 입력합니다.
  5. 암시적 허용 및 하이브리드 흐름 사용:
    • 애플리케이션에서 사용자를 로그인하는 경우 ID 토큰을 선택합니다.
    • 애플리케이션에서 보호된 웹 API를 호출해야 하는 경우에는 액세스 토큰을 선택합니다. 이러한 토큰 형식에 대한 자세한 내용은 ID 토큰 및 액세스 토큰을 참조하세요.
  6. 구성을 선택하여 리디렉션 URI 추가를 마칩니다.

이제 SPA(단일 페이지 애플리케이션)의 등록을 완료하고 클라이언트가 리디렉션되고 보안 토큰이 전송될 리디렉션 URI를 구성했습니다. ID 토큰 및 액세스 토큰 중 하나 또는 둘 다를 선택하여 암시적 허용 흐름을 사용하도록 설정했습니다.

권한 부여 흐름에 대한 참고 사항

기본적으로 단일 페이지 애플리케이션 플랫폼 구성을 사용하여 만든 앱 등록은 인증 코드 흐름을 사용하도록 설정합니다. 이 흐름을 활용하려면 애플리케이션에서 MSAL.js 2.0 이상을 사용해야 합니다.

앞에서 설명한 것처럼 MSAL.js 1.3을 사용하는 단일 페이지 애플리케이션은 암시적 허용 흐름으로 제한됩니다. 현재 OAuth 2.0 모범 사례에서는 SPA에 대한 암시적 흐름이 아닌 인증 코드 흐름을 사용하도록 권장합니다. 또한 수명이 제한된 새로 고침 토큰을 사용하면 애플리케이션이 Safari ITP와 같은 최신 브라우저 쿠키 프라이버시 제한에 맞게 조정됩니다.

앱 등록으로 표시되는 모든 프로덕션 단일 페이지 애플리케이션이 MSAL.js 2.0 및 인증 코드 흐름을 사용하는 경우 Microsoft Entra 관리 센터의 앱 등록 인증 창에서 암시적 허용 설정을 선택 취소합니다. 그러나 암시적 흐름이 사용하도록 설정(선택)된 상태로 두면 MSAL.js 1.x 및 암시적 흐름을 사용하는 애플리케이션은 계속 작동할 수 있습니다.

다음 단계

이전 단계에서 생성한 앱 등록을 사용하도록 앱 코드를 구성합니다. 앱의 코드 구성.