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

  • 아티클

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

인증 옵션 개요

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

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

인증 코드 흐름(PKCE 사용)

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

이 방법을 사용하는 것이 좋습니다. 수명이 제한된 새로 고침 토큰을 사용하면 애플리케이션이 Safari ITP와 같은 최신 브라우저 쿠키 프라이버시 제한에 맞게 조정됩니다.

이 흐름을 활용하려면 애플리케이션에서 이를 지원하는 인증 라이브러리(예: MSAL.js)를 사용하면 됩니다.

Single-page applications-auth

암시적 권한 부여 흐름

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

Single-page applications-implicit

이 인증 흐름에는 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에는 다음 제한 사항이 적용됩니다.

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

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

  9. 등록을 선택합니다.

암시적 흐름 사용

SPA 앱에서 암시적 허용 흐름과 함께 MSAL.js 1.3 이전 버전을 사용하거나 사용자 흐름 또는 사용자 지정 정책을 테스트하기 위해 https://jwt.ms/ 앱을 구성하는 경우 앱 등록에서 암시적 권한 부여 흐름을 사용하도록 설정해야 합니다.

  1. 왼쪽 메뉴의 관리 아래에서 인증을 선택합니다.

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

  3. 저장을 선택합니다.

앱에서 MSAL.js 2.0 이상을 사용하는 경우 MSAL.js 2.0+에서 PKCE를 통한 인증 코드 흐름을 지원하므로 암시적 흐름 부여를 사용하도록 설정하지 마세요.

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

암시적 흐름을 사용하는 기존 애플리케이션이 있는 경우 MSAL.js 2.0+와 같이 이를 지원하는 프레임워크를 사용하여 인증 코드 흐름을 사용하도록 마이그레이션하는 것이 좋습니다.

앱 등록이 나타내는 모든 프로덕션 SPA가 인증 코드 흐름을 사용하기 시작하면 다음과 같이 암시적 허용 흐름 설정을 사용하지 않도록 설정합니다.

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

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

다음 단계

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