Azure Active Directory B2C에서 단일 페이지 애플리케이션 등록

중요합니다

2025년 5월 1일부터 새 고객을 위해 Azure AD B2C를 더 이상 구매할 수 없습니다. FAQ에서 자세히 알아보세요.

애플리케이션이 Azure AD B2C(Azure Active Directory B2C)와 상호 작용하려면 먼저 관리하는 테넌트에 등록해야 합니다. 이 가이드에서는 Azure Portal을 사용하여 단일 페이지 애플리케이션("SPA")을 등록하는 방법을 보여 줍니다.

인증 옵션 개요

많은 최신 웹 애플리케이션은 클라이언트 쪽 단일 페이지 애플리케이션("SPA")으로 빌드됩니다. 개발자는 JavaScript 또는 SPA 프레임워크(예: Angular, Vue 및 React)를 사용하여 작성합니다. 이러한 애플리케이션은 웹 브라우저에서 실행되며 기존 서버 쪽 웹 애플리케이션과 다른 인증 특성을 갖습니다.

Azure AD B2C는 단일 페이지 애플리케이션이 사용자를 로그인하고 토큰을 가져와 백 엔드 서비스 또는 웹 API에 액세스할 수 있도록 하는 두 가지 옵션을 제공합니다.

권한 부여 코드 흐름(PKCE 사용)

OAuth 2.0 권한 부여 코드 흐름(PKCE 포함)을 사용하면 애플리케이션이 인증된 사용자 및 보호된 API를 호출하는 데 필요한 액세스 토큰을 나타내기 위해 ID 토큰에 대한 권한 부여 코드를 교환할 수 있습니다. 또한 해당 사용자와의 상호 작용 없이 사용자를 대신하여 리소스에 대한 장기 액세스를 제공하는 새로 고침 토큰을 반환합니다.

권장 되는 방법입니다 . 수명이 제한된 새로 고침 토큰을 사용하면 애플리케이션이 Safari ITP와 같은 최신 브라우저 쿠키 개인 정보 제한 사항에 적응할 수 있습니다.

이 흐름을 활용하기 위해 애플리케이션은 MSAL.js같이 지원하는 인증 라이브러리를 사용할 수 있습니다.

암시적 권한 부여 흐름

MSAL.js 1.x와 같은 일부 라이브러리는 암시적 허용 흐름만 지원하거나 암시적 흐름을 사용하도록 애플리케이션이 구현됩니다. 이러한 경우 Azure AD B2C는 OAuth 2.0 암시적 흐름을 지원합니다. 암시적 권한 부여 흐름을 사용하면 애플리케이션이 권한 부여 엔드포인트에서 ID 및 액세스 토큰을 가져올 수 있습니다. 권한 부여 코드 흐름과 달리 암시적 권한 부여 흐름은 새로 고침 토큰을 반환하지 않습니다.

이 인증 흐름에는 Electron 및 React-Native와 같은 플랫폼 간 JavaScript 프레임워크를 사용하는 애플리케이션 시나리오가 포함되지 않습니다. 이러한 시나리오에는 네이티브 플랫폼과의 상호 작용을 위한 추가 기능이 필요합니다.

필수 조건

• Azure 구독이 없는 경우, 시작하기 전에 무료 계정을 만드십시오.

• Azure AD B2C 테넌트가 없는 경우 지금 만듭니다. 기존 Azure AD B2C 테넌트를 사용할 수 있습니다.

SPA 애플리케이션 등록

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

2. 여러 테넌트에 액세스할 수 있는 경우 상단 메뉴의 설정 아이콘을 선택하여 디렉터리 + 구독 메뉴에서 Azure AD B2C 테넌트로 전환합니다.

3. Azure Portal에서 Azure AD B2C를 검색하고 선택합니다.

4. 앱 등록을 선택하고, 새 등록을 선택합니다.

5. 애플리케이션의 이름을 입력합니다. 예를 들어 spaapp1입니다.

6. 지원되는 계정 유형에서 ID 공급자 또는 조직 디렉터리에서 계정을 선택합니다(사용자 흐름으로 사용자를 인증하기 위해).

7. 리디렉션 URI에서 SPA(단일 페이지 애플리케이션)를 선택한 다음 URL 텍스트 상자에 입력 https://jwt.ms 합니다.

   리디렉션 URI는 권한 부여 서버(이 경우 Azure AD B2C)가 사용자와의 상호 작용을 완료한 후 사용자를 보내는 엔드포인트입니다. 또한 리디렉션 URI 엔드포인트는 성공적인 권한 부여 시 액세스 토큰 또는 권한 부여 코드를 받습니다. 프로덕션 애플리케이션에서는 일반적으로 https://contoso.com/auth-response와 같이 앱이 실행되는 공개적으로 액세스할 수 있는 엔드포인트입니다. 이 가이드와 같은 테스트를 위해 토큰의 디코딩된 콘텐츠를 표시하는 Microsoft 소유 웹 애플리케이션으로 설정할 https://jwt.ms수 있습니다(토큰의 콘텐츠는 브라우저에서 나가지 않습니다). 앱을 개발하는 동안 애플리케이션이 로컬에서 수신 대기하는 엔드포인트를 추가할 수 있습니다(예: http://localhost:5000.). 언제든지 등록된 애플리케이션에서 리디렉션 URI를 추가하고 수정할 수 있습니다.

   리디렉션 URI에는 다음 제한 사항이 적용됩니다.

   • 회신 URL은 https을 사용하지 않는 경우 localhost 스키마로 시작해야 합니다.
   • 회신 URL은 대/소문자를 구분합니다. 해당 사례는 실행 중인 애플리케이션의 URL 경로에 대한 대/소문자와 일치해야 합니다. 예를 들어, 애플리케이션이 경로의 일부로 .../abc/response-oidc을 포함하는 경우, 회신 URL에 .../ABC/response-oidc을 지정하지 마세요. 웹 브라우저는 경로를 대/소문자 구분하여 처리하므로 .../abc/response-oidc와 연결된 쿠키는 대/소문자가 일치하지 않는 .../ABC/response-oidc URL로 리디렉션되는 경우 제외될 수 있습니다.

8. 사용 권한아래에서, openid 및 offline_access 권한에 대한 관리자 동의 부여를 선택한 후 확인란을 선택합니다.

9. 등록을 선택합니다.

암시적 허용 흐름 활성화

MSAL.js 버전 1.3 이하 버전을 사용하거나 앱 등록을 사용하여 테스트 목적으로 사용자 흐름을 테스트하는 경우 두 가지 이유로 암시적 허용 흐름을 사용하도록 설정할 수 있습니다.

다음 단계를 사용하여 앱에 암시적 허용 흐름을 사용하도록 설정합니다.

1. 만든 앱 등록을 선택합니다.

2. 관리에서 인증을 선택합니다.

3. 암시적 허용 및 하이브리드 흐름에서 액세스 토큰(암시적 흐름에 사용) 및 D 토큰(암시적 및 하이브리드 흐름에 사용) 확인란을 모두 선택합니다.

4. 저장을 선택합니다.

비고

앱에서 MSAL.js 2.0 이상을 사용하는 경우 MSAL.js 2.0 이상에서 OAuth 2.0 권한 부여 코드 흐름(PKCE 포함)을 지원하므로 암시적 권한 부여 흐름을 사용하도록 설정하지 마세요. 사용자 흐름을 테스트하기 위해 암시적 부여를 사용하도록 설정하는 경우 프로덕션 환경에 앱을 배포하기 전에 암시적 허용 흐름 설정을 사용하지 않도록 설정해야 합니다.

암시적 승인 흐름에서 마이그레이션

암시적 흐름을 사용하는 기존 애플리케이션이 있는 경우 PKCE를 지원하는 프레임워크(예: MSAL.js 2.0 이상)를 사용하여 PKCE에서 권한 부여 코드 흐름을 사용하도록 마이그레이션하는 것이 좋습니다.

앱 등록으로 표시되는 모든 프로덕션 SPA가 권한 부여 코드 흐름을 사용하기 시작하면 다음과 같이 암시적 권한 부여 흐름 설정을 사용하지 않도록 설정합니다.

1. 왼쪽 메뉴의 관리 아래에서 인증을 선택합니다.
2. 암시적 권한 부여에서 액세스 토큰 및 ID 토큰 확인란을 모두 선택 취소합니다.
3. 저장을 선택합니다.

암시적 흐름을 사용하도록 설정된 상태로 두면 암시적 흐름을 사용하는 애플리케이션이 계속 작동할 수 있습니다(선택됨).

다음 단계

Azure Active Directory B2C에서 사용자 흐름을 만드는 방법을 알아봅니다.