이 문서에서는 Node.js 웹 API에 대한 Azure AD B2C(Azure Active Directory B2C) 인증 환경을 사용하도록 설정, 사용자 지정 및 개선할 수 있는 방법을 설명합니다.
시작하기 전에 다음 문서를 숙지하는 것이 중요합니다.
사용자 지정 도메인을 사용하여 인증 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를 사용하려면 사용자 지정 도메인을 사용하는 것으로 설정의 참고 자료를 따릅니다. 프로젝트 루트 폴더에서 .env 파일을 엽니다. 이 파일에는 Azure AD B2C ID 공급자에 대한 정보가 포함되어 있습니다.
웹앱의 .env 파일에서 다음을 수행합니다.
-
tenant-name.b2clogin.com의 모든 인스턴스를 사용자 지정 도메인으로 바꿉니다. 예를 들어tenant-name.b2clogin.com를login.contoso.com로 바꿉니다. -
tenant-name.onmicrosoft.com의 모든 인스턴스를 테넌트 ID로 바꿉니다. 자세한 내용은 테넌트 ID 사용을 참조하세요.
다음 구성은 변경 전의 앱 설정을 보여 줍니다.
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi
#B2C authority domain
AUTHORITY_DOMAIN=https://contoso.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint
LOGOUT_ENDPOINT=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000
다음 구성은 변경 후의 앱 설정을 보여 줍니다.
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi
#B2C authority domain
AUTHORITY_DOMAIN=https://login.contoso.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint
LOGOUT_ENDPOINT=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000
웹 API의 index.js 파일에서 다음을 수행합니다.
tenant-name.b2clogin.com의 모든 인스턴스를 사용자 지정 도메인으로 바꿉니다. 예를 들어tenant-name.b2clogin.com를login.contoso.com로 바꿉니다.tenant-name.onmicrosoft.com의 모든 인스턴스를 테넌트 ID로 바꿉니다. 자세한 내용은 테넌트 ID 사용을 참조하세요.
다음 구성은 변경 전의 앱 설정을 보여 줍니다.
const options = {
identityMetadata: `https://${config.credentials.tenantName}.b2clogin.com/${config.credentials.tenantName}.onmicrosoft.com/${config.policies.policyName}/${config.metadata.version}/${config.metadata.discovery}`,
clientID: config.credentials.clientID,
......
}
다음 구성은 변경 후의 앱 설정을 보여 줍니다.
const options = {
identityMetadata: `https://login.contoso.com/12345678-0000-0000-0000-000000000000/${config.policies.policyName}/${config.metadata.version}/${config.metadata.discovery}`,
clientID: config.credentials.clientID,
......
}
사용자가 로그인하는 동안, 앱은 특정 사용자를 대상으로 지정할 수 있습니다. 앱이 사용자를 대상으로 하는 경우 권한 부여 요청에 login_hint 쿼리 매개 변수와 사용자의 로그인 이름을 지정할 수 있습니다. Azure AD B2C가 자동으로 로그인 이름을 채우며, 사용자는 암호만 입력하면 됩니다.
로그인 이름을 미리 입력하려면 다음을 수행합니다.
- 사용자 지정 정책을 사용하는 경우 직접 로그인 설정에 설명된 대로 필요한 입력 클레임을 추가합니다.
-
authCodeRequest개체를 찾아 로그인 힌트를 사용하여loginHint특성을 설정합니다.
다음 코드 조각은 로그인 힌트 매개 변수를 전달하는 방법을 보여 줍니다. 특성 값으로 bob@contoso.com을 사용합니다.
authCodeRequest.loginHint = "bob@contoso.com"
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
.then((response) => {
Facebook, LinkedIn 또는 Google 등과 같은 소셜 계정을 포함하도록 애플리케이션에 대한 로그인 과정을 구성한 경우 domain_hint 매개 변수를 지정할 수 있습니다. 이 쿼리 매개 변수는 로그인에 사용해야 하는 소셜 ID 공급자에 대한 힌트를 Azure AD B2C에 제공합니다. 예를 들어, 애플리케이션이 domain_hint=facebook.com을 지정하는 경우, 로그인 흐름을 통해 Facebook 로그인 페이지로 직접 이동됩니다.
외부 ID 공급자로 사용자를 리디렉션하려면 다음을 수행합니다.
- 외부 ID 공급자의 도메인 이름을 확인합니다. 자세한 내용은 소셜 공급자로 로그인 리디렉션을 참조하세요.
-
authCodeRequest개체를 찾아 해당 도메인 힌트를 사용하여domainHint특성을 설정합니다.
다음 코드 조각은 도메인 힌트 매개 변수를 전달하는 방법을 보여 줍니다. facebook.com을 특성 값으로 사용합니다.
authCodeRequest.domainHint = "facebook.com"
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
.then((response) => {
Azure AD B2C의 언어 사용자 지정을 사용하면 사용자 흐름 상에서 고객의 요구 사항에 맞게 다양한 언어를 수용할 수 있습니다. 자세한 내용은 언어 사용자 지정을 참조하세요.
기본 설정 언어를 지정하려면 다음을 수행합니다.
- 언어 사용자 지정을 구성합니다.
-
authCodeRequest개체를 찾아 해당ui_locales추가 매개 변수를 사용하여extraQueryParameters특성을 설정합니다.
다음 코드 조각은 ui_locales 매개 변수를 전달하는 방법을 보여 줍니다. 특성 값으로 es-es를 사용합니다.
authCodeRequest.extraQueryParameters = {"ui_locales" : "es-es"}
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
.then((response) => {
사용자 지정 정책을 사용하면 사용자 지정 쿼리 문자열 매개 변수를 전달할 수 있습니다. 페이지 콘텐츠를 동적으로 변경하려는 경우가 좋은 사용 사례입니다.
사용자 지정 쿼리 문자열 매개 변수를 전달하려면 다음 단계를 수행합니다.
- ContentDefinitionParameters 요소를 구성합니다.
-
authCodeRequest개체를 찾아 해당 추가 매개 변수를 사용하여extraQueryParameters특성을 설정합니다.
다음 코드 조각은 campaignId 사용자 지정 쿼리 문자열 매개 변수를 전달하는 방법을 보여 줍니다. 특성 값으로 germany-promotion을 사용합니다.
authCodeRequest.extraQueryParameters = {"campaignId" : "germany-promotion"}
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
.then((response) => {
신뢰 당사자 애플리케이션은 OAuth2 권한 부여 요청의 일부로 인바운드 JWT(JSON Web Token)를 보낼 수 있습니다. 인바운드 토큰은 사용자 또는 권한 부여 요청에 대한 힌트입니다. Azure AD B2C는 토큰의 유효성을 검사하고 클레임을 추출합니다.
인증 요청에 ID 토큰 힌트를 포함하려면 다음을 수행합니다.
- 사용자 지정 정책에서 ID 토큰 힌트 기술 프로필을 정의합니다.
-
authCodeRequest개체를 찾아 해당id_token_hint추가 매개 변수를 사용하여extraQueryParameters특성을 설정합니다.
다음 코드 조각은 ID 토큰 힌트를 정의하는 방법을 보여 줍니다.
authCodeRequest.extraQueryParameters = {"id_token_hint": idToken}
return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
MSAL 라이브러리는 문제를 진단하는 데 유용한 로그 메시지를 생성합니다. 앱은 로깅을 구성할 수 있습니다. 이 앱은 세부 정보 수준과 개인 데이터와 조직 데이터가 기록되는지 여부에 대한 제어를 사용자 지정할 수도 있습니다.
MSAL 로깅 콜백을 만들고 사용자에게 인증 문제가 있을 때 로그를 제출할 수 있는 방법을 제공하는 것이 좋습니다. MSAL은 다음과 같은 수준의 로깅 세부 정보를 제공합니다.
- 오류: 무언가 잘못되어 오류가 발생했습니다. 이 수준은 디버깅 및 문제 식별에 사용됩니다.
- 경고: 오류 또는 장애가 반드시 발생한 것은 아니지만, 문제를 진단하고 파악하기 위한 정보입니다.
- 정보: MSAL은 디버깅이 아니라 정보 제공을 위해 이벤트를 기록합니다.
- 자세한 정보: 이 값은 기본 수준입니다. MSAL은 라이브러리 동작의 전체 세부 정보를 기록합니다.
기본적으로 MSAL 로거는 개인 또는 조직 데이터를 캡처하지 않습니다. 라이브러리는 개인 및 조직 데이터 로깅을 사용하도록 설정하는 옵션을 제공합니다.
로깅을 구성하려면 index.js에서 다음 키를 구성합니다.
-
logLevel에서는 로깅 수준을 지정할 수 있습니다. 가능한 값은Error,Warning,Info및Verbose입니다. -
piiLoggingEnabled에서는 개인 데이터를 입력할 수 있습니다. 가능한 값은true또는false입니다.
다음 코드 조각은 MSAL 로깅을 구성하는 방법을 보여 줍니다.
const confidentialClientConfig = {
...
system: {
loggerOptions: {
loggerCallback(loglevel, message, containsPii) {
console.log(message);
},
piiLoggingEnabled: false,
logLevel: msal.LogLevel.Verbose,
}
}
};
MSAL.js 구성 옵션에 대해 자세히 알아봅니다.