다음을 통해 공유

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

  • 아티클

Microsoft ID 플랫폼에서 SPA(단일 페이지 애플리케이션)를 등록하려면 다음 단계를 완료합니다. 등록 단계는 암시적 권한 부여 흐름을 지원하는 MSAL.js 1.0과 PKCE(Key for Code Exchange)를 사용하여 권한 부여 코드 흐름을 지원하는 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 이하 및 암시적 권한 부여 흐름을 사용하는 SPA에 대한 리디렉션 URI를 추가합니다. MSAL.js 1.3 이하를 사용하는 애플리케이션은 권한 부여 코드 흐름을 지원하지 않습니다.

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

이제 SPA가 리디렉션 URI에 등록됩니다. ID 토큰과 액세스 토큰 중 하나 또는 둘 다를 선택하면 애플리케이션 등록에서 암시적 권한 부여 흐름을 지원합니다.

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

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

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

앱 등록으로 표시되는 모든 프로덕션 SPA가 MSAL.js 2.0 및 권한 부여 코드 흐름을 사용하는 경우 Microsoft Entra 관리 센터의 앱 등록 인증 창에서 암시적 권한 부여 설정을 검사. 여전히 MSAL.js 1.x를 사용하는 SPA가 있는 경우 암시적 흐름을 사용하도록 설정(검사)으로 둡니다.

다음 단계

앱의 코드 구성에서 만든 앱 등록을 사용하도록 앱의 코드를 구성합니다.