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

이 문서에서는 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 특성을 InteractionType.Popup으로 설정합니다.
  • 팝업 창에서 로그아웃하려면 src/app/app.component.ts 클래스에서 logoutPopup 메서드를 사용합니다. 요청의 일부로 mainWindowRedirectUri를 전달하여 로그아웃이 완료된 후에 홈페이지 또는 로그인 페이지와 같은 다른 페이지로 주 창을 리디렉션하도록 logoutPopup을 구성할 수도 있습니다.
• 리디렉션: 인증 흐름을 완료하기 위해 Azure AD B2C로 리디렉션됩니다. 사용자에게 팝업 창을 사용하지 않게 설정하는 브라우저 제약 조건이나 정책이 있으면 이 방법을 사용합니다.
  • 리디렉션을 사용하여 로그인하려면 src/app/app.component.ts 클래스에서 loginRedirect 메서드를 사용합니다.
  • src/app/app.module.ts 클래스에서 interactionType 특성을 InteractionType.Redirect으로 설정합니다.
  • 리디렉션으로 로그아웃하려면 src/app/app.component.ts 클래스에서 logoutRedirect 메서드를 사용합니다. postLogoutRedirectUri를 설정하여 로그아웃 후 리디렉션해야 하는 URI를 구성합니다. 애플리케이션 등록에 이 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: '/',
  });
}

리디렉션

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

logout() { 
  this.authService.logoutRedirect({
    postLogoutRedirectUri: 'http://localhost:4200'
  });
}

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

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

팝업

// 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]
    ])
  })

리디렉션

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

로그인 이름 미리 채우기

사용자가 로그인하는 동안, 앱은 특정 사용자를 대상으로 지정할 수 있습니다. 앱이 사용자를 대상으로 하는 경우 권한 부여 요청에 login_hint 쿼리 매개 변수와 사용자의 로그인 이름을 지정할 수 있습니다. Azure AD B2C가 자동으로 로그인 이름을 채우며, 사용자는 암호만 입력하면 됩니다.

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

1. 사용자 지정 정책을 사용하는 경우, 직접 로그인 설정에 설명된 대로 필요한 입력 클레임을 추가합니다.
2. 기존 PopupRequest 또는 RedirectRequest MSAL 구성 개체를 만들거나 사용합니다.
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"
    }
  },

리디렉션

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

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

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    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 또는 RedirectRequest MSAL 구성 개체를 만들거나 사용합니다.
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"
    }
  },

리디렉션

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

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

authRequestConfig.domainHint = "facebook.com";

this.authService.loginRedirect(authRequestConfig);

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

UI 언어 지정

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

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

1. 언어 사용자 지정을 구성합니다.
2. extraQueryParameters 특성이 있는 기존 PopupRequest 또는 RedirectRequest MSAL 구성 개체를 만들거나 사용합니다.
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"}
    }
  },

리디렉션

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

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

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

this.authService.loginRedirect(authRequestConfig);

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

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

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

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

1. ContentDefinitionParameters 요소를 구성합니다.
2. extraQueryParameters 특성이 있는 기존 PopupRequest 또는 RedirectRequest MSAL 구성 개체를 만들거나 사용합니다.
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"}
    }
  },

리디렉션

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

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

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

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"campaignId" : "germany-promotion"}
    }
  },

ID 토큰 힌트 전달

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

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

1. 사용자 지정 정책에서 ID 토큰 힌트의 기술 프로필을 정의합니다.
2. extraQueryParameters 특성이 있는 기존 PopupRequest 또는 RedirectRequest MSAL 구성 개체를 만들거나 사용합니다.
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}
    }
  },

리디렉션

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

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

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

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    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
      }
  }
  ...
}

다음 단계

• 자세한 정보: MSAL.js 구성 옵션.