다음을 통해 공유

Azure Active Directory B2C를 사용하여 Angular 애플리케이션에서 인증 옵션 구성

중요합니다

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

이 문서에서는 Angular SPA(단일 페이지 애플리케이션)에 대한 Azure AD B2C(Azure Active Directory B2C) 인증 환경을 사용자 지정하고 개선하는 방법을 설명합니다.

필수 조건

Angular SPA에서 인증 구성 또는 사용자 고유의 Angular SPA에서 인증 사용 문서 숙지

로그인 및 로그아웃 동작

두 가지 방법으로 MSAL.js 사용하여 사용자를 로그인하도록 단일 페이지 애플리케이션을 구성할 수 있습니다.

  • 팝업 창: 팝업 창에서 인증이 수행되고 애플리케이션 상태가 유지됩니다. 인증하는 동안 사용자가 애플리케이션 페이지에서 벗어나지 않도록 하려면 이 방법을 사용합니다. 그러나 Internet Explorer의 팝업 창에는 알려진 문제가 있습니다.
    • src/app/app.component.ts 클래스에서 loginPopup 메서드를 사용하여 팝업 창으로 로그인합니다.
    • 클래스에서 src/app/app.module.ts 속성을 interactionType로 설정합니다.
    • 팝업 창을 사용하여 로그아웃하려면 src/app/app.component.ts 클래스에서 logoutPopup 메서드를 사용하십시오. 요청의 일부로 logoutPopup를 전달하여, 로그아웃이 완료된 후 주 창을 홈페이지나 로그인 페이지로 리디렉션하도록 mainWindowRedirectUri를 구성할 수 있습니다.
  • 리디렉션: 사용자가 인증 흐름을 완료하기 위해 Azure AD B2C로 리디렉션됩니다. 사용자에게 팝업 창이 비활성화된 브라우저 제약 조건 또는 정책이 있는 경우 이 방법을 사용합니다.
    • 리디렉션을 사용하여 로그인하려면 src/app/app.component.ts 클래스에서 loginRedirect 메서드를 사용하세요.
    • 클래스에서 src/app/app.module.ts 속성을 interactionType로 설정합니다.
    • 리디렉션을 사용하여 로그아웃하려면 클래스에서 src/app/app.component.ts 메서드를 logoutRedirect 사용합니다. 로그아웃 후 리디렉션할 URI를 구성하려면 postLogoutRedirectUri을 설정하십시오. 애플리케이션 등록에서 이 URI를 리디렉션 URI로 추가해야 합니다.

다음 샘플에서는 로그인하고 로그아웃하는 방법을 보여 줍니다.

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

MSAL Angular 라이브러리에는 대화형 로그인(사용자가 로그인 단추를 선택하는 위치), MSAL Guard 및 MSAL 인터셉터의 세 가지 로그인 흐름이 있습니다. MSAL Guard 및 MSAL 인터셉터 구성은 사용자가 유효한 액세스 토큰 없이 보호된 리소스에 액세스하려고 할 때 적용됩니다. 이러한 경우 MSAL 라이브러리는 사용자가 강제로 로그인합니다.

다음 샘플에서는 팝업 창 또는 리디렉션을 사용하여 로그인하도록 MSAL Guard 및 MSAL 인터셉터를 구성하는 방법을 보여 줍니다.

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

로그인 이름 미리 입력

로그인 사용자 경험 중에 앱은 특정 사용자를 대상으로 할 수 있습니다. 앱이 사용자를 대상으로 하는 경우 권한 부여 요청 login_hint 에서 사용자의 로그인 이름을 사용하여 쿼리 매개 변수를 지정할 수 있습니다. Azure AD B2C는 로그인 이름을 자동으로 채우며 사용자는 암호만 제공해야 합니다.

로그인 이름을 미리 입력하려면 다음을 시행합니다.

  1. 사용자 지정 정책을 사용하는 경우 직접 로그인 설정에 설명된 대로 필요한 입력 클레임을 추가합니다.
  2. PopupRequest 새 MSAL 구성 개체를 만들거나 기존 RedirectRequest 개체를 사용합니다.
  3. loginHint 속성을 해당 로그인 힌트로 설정합니다.

다음 코드 조각에서는 로그인 힌트 매개 변수를 전달하는 방법을 보여 줍니다. 특성 값으로 사용합니다 bob@contoso.com .

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

ID 공급자 미리 선택

Facebook, LinkedIn 또는 Google과 같은 소셜 계정을 포함하도록 애플리케이션에 대한 로그인 과정을 구성한 경우 매개 변수를 domain_hint 지정할 수 있습니다. 이 쿼리 매개 변수는 로그인에 사용해야 하는 소셜 ID 공급자에 대한 힌트를 Azure AD B2C에 제공합니다. 예를 들어 애플리케이션이 지정 domain_hint=facebook.com하는 경우 로그인 흐름은 Facebook 로그인 페이지로 직접 이동합니다.

사용자를 외부 ID 공급자로 리디렉션하려면 다음을 수행합니다.

  1. 외부 ID 공급자의 도메인 이름을 확인합니다. 자세한 내용은 소셜 공급자에 대한 로그인 리디렉션을 참조하세요.
  2. PopupRequest 새 MSAL 구성 개체를 만들거나 기존 RedirectRequest 개체를 사용합니다.
  3. domainHint 해당 도메인 힌트를 사용하여 특성을 설정합니다.

다음 코드 조각에서는 도메인 힌트 매개 변수를 전달하는 방법을 보여 줍니다. 특성 값으로 사용합니다 facebook.com .

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

UI 언어 지정

Azure AD B2C의 언어 사용자 지정을 사용하면 사용자 흐름이 고객의 요구에 맞게 다양한 언어를 수용할 수 있습니다. 자세한 내용은 언어 사용자 지정을 참조하세요.

기본 설정 언어를 설정하려면 다음을 수행합니다.

  1. 언어 사용자 지정을 구성합니다.
  2. PopupRequest 또는 RedirectRequest MSAL 구성 개체를 extraQueryParameters 특성으로 만들거나 사용합니다.
  3. ui_locales 매개 변수를 해당 언어 코드와 함께 extraQueryParameters 특성에 추가합니다.

다음 코드 조각에서는 도메인 힌트 매개 변수를 전달하는 방법을 보여 줍니다. 특성 값으로 사용합니다 es-es .

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

사용자 지정 쿼리 문자열 매개 변수 전달

사용자 지정 정책을 사용하면 사용자 지정 쿼리 문자열 매개 변수를 전달할 수 있습니다. 좋은 사용 사례 예제는 페이지 콘텐츠를 동적으로 변경하려는 경우입니다.

사용자 지정 쿼리 문자열 매개 변수를 전달하려면 다음을 수행합니다.

  1. ContentDefinitionParameters 요소를 구성합니다.
  2. PopupRequest 또는 RedirectRequest MSAL 구성 개체를 extraQueryParameters 특성으로 만들거나 사용합니다.
  3. 사용자 지정 쿼리 문자열 매개 변수(예: campaignId.)를 추가합니다. 매개 변수 값을 설정합니다.

다음 코드 조각에서는 사용자 지정 쿼리 문자열 매개 변수를 전달하는 방법을 보여 줍니다. 특성 값으로 사용합니다 germany-promotion .

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

ID 토큰 힌트 전달

신뢰 당사자 애플리케이션은 OAuth2 권한 부여 요청의 일부로 인바운드 JWT(JSON Web Token)를 보낼 수 있습니다. 인바운드 토큰은 사용자 또는 권한 부여 요청에 대한 힌트입니다. Azure AD B2C는 토큰의 유효성을 검사한 다음 클레임을 추출합니다.

인증 요청에 ID 토큰 힌트를 포함하려면 다음을 수행합니다.

  1. 사용자 지정 정책에서 ID 토큰 힌트의 기술 프로필을 정의합니다.
  2. PopupRequest 또는 RedirectRequest MSAL 구성 개체를 extraQueryParameters 특성으로 만들거나 사용합니다.
  3. ID 토큰을 id_token_hint 저장하는 해당 변수를 사용하여 매개 변수를 추가합니다.

다음 코드 조각은 ID 토큰 힌트를 정의하는 방법을 보여 줍니다.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

사용자 지정 도메인 사용

사용자 지정 도메인을 사용하여 인증 URL을 완전히 브랜드화할 수 있습니다. 사용자 관점에서 사용자는 Azure AD B2C b2clogin.com 도메인 이름으로 리디렉션되지 않고 인증 프로세스 중에 도메인에 남아 있습니다.

URL에서 "b2c"에 대한 모든 참조를 제거하려면 인증 요청 URL의 B2C 테넌트 이름(contoso.onmicrosoft.com)을 테넌트 ID GUID로 바꿀 수도 있습니다. 예를 들어, https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/를 https://account.contosobank.co.uk/<tenant ID GUID>/로 변경할 수 있습니다.

인증 URL에서 테넌트 ID에 사용자 지정 도메인을 사용하려면 사용자 지정 도메인 사용의 지침을 따릅니다. src/app/auth-config.ts MSAL 구성 개체를 열고, authorities 및 knownAuthorities를 사용자의 지정 도메인 이름과 테넌트 ID로 변경합니다.

다음 JavaScript는 변경 전에 MSAL 구성 개체를 보여줍니다.

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

다음 JavaScript는 변경 후 MSAL 구성 개체를 보여줍니다.

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.___domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.___domain.com"],
      ...
    },
  ...
}

로그 설정

MSAL 라이브러리는 문제를 진단하는 데 도움이 되는 로그 메시지를 생성합니다. 앱은 로깅을 구성할 수 있습니다. 또한 앱은 세부 수준 및 개인 및 조직 데이터가 기록되는지 여부에 대한 사용자 지정 제어를 제공할 수 있습니다.

MSAL 로깅 콜백을 만들고 사용자가 인증 문제가 있을 때 로그를 제출할 수 있는 방법을 제공하는 것이 좋습니다. MSAL은 다음과 같은 수준의 로깅 세부 정보를 제공합니다.

  • 오류: 문제가 발생하여 오류가 발생했습니다. 이 수준은 문제를 디버깅하고 식별하는 데 사용됩니다.
  • 경고: 오류 또는 오류가 반드시 발생한 것은 아니지만 이 정보는 진단 및 문제 파악을 위한 것입니다.
  • 정보: MSAL은 정보 제공을 위한 것이며 반드시 디버깅을 위한 것은 아닌 이벤트를 기록합니다.
  • 자세한 정보: 기본 수준입니다. MSAL은 라이브러리 동작의 전체 세부 정보를 기록합니다.

기본적으로 MSAL 로거는 개인 또는 조직 데이터를 캡처하지 않습니다. 라이브러리는 귀하가 그렇게 선택하시면 개인 및 조직 데이터의 로깅을 사용하도록 설정하는 옵션을 제공합니다.

Angular 로깅을 구성하려면 src/app/auth-config.ts 다음 키를 구성합니다.

  • loggerCallback 는 로거 콜백 함수입니다.
  • logLevel 로깅 수준을 지정할 수 있습니다. 가능한 값: Error, Warning, Info및 Verbose.
  • piiLoggingEnabled 에서는 개인 데이터를 입력할 수 있습니다. 가능한 값은 true 또는 false입니다.

다음 코드 조각은 MSAL 로깅을 구성하는 방법을 보여 줍니다.

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

다음 단계