Azure AD B2C를 사용하여 단일 페이지 애플리케이션에서 인증 옵션 구성

아티클
01/11/2024

이 문서에서는 SPA(단일 페이지 애플리케이션)에 대한 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를 사용하려면 사용자 지정 도메인 사용의 지침을 따릅니다. MSAL(Microsoft 인증 라이브러리) 구성 개체를 찾고 사용자 지정 도메인 이름 및 테넌트 ID를 사용하도록 인증 기관 및 knownAuthorities를 변경합니다.

다음 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"],
      ...
    },
  ...
}

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

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

사용자 지정 정책을 사용하는 경우 직접 로그인 설정에 설명된 대로 필요한 입력 클레임을 추가합니다.
개체를 만들어 login_hint에 저장하고, 이 개체를 MSAL loginPopup() 메서드에 전달합니다.
```
let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);
```

ID 공급자 사전 선택

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

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

외부 ID 공급자의 도메인 이름을 확인합니다. 자세한 내용은 소셜 공급자로 로그인 리디렉션을 참조하세요.

개체를 만들어 extraQueryParameters에 저장하고, 이 개체를 MSAL loginPopup() 메서드에 전달합니다.

let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

UI 언어 지정

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

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

언어 사용자 지정을 구성합니다.
개체를 만들어 extraQueryParameters에 저장하고, 이 개체를 MSAL loginPopup() 메서드에 전달합니다.
```
let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);
```

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

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

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

ContentDefinitionParameters 요소를 구성합니다.

개체를 만들어 extraQueryParameters에 저장하고, 이 개체를 MSAL loginPopup() 메서드에 전달합니다.

let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

ID 토큰 힌트 전달

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

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

사용자 지정 정책에서 ID 토큰 힌트 기술 프로필을 정의합니다.

개체를 만들어 extraQueryParameters에 저장하고, 이 개체를 MSAL loginPopup() 메서드에 전달합니다.

let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

로그아웃 리디렉션 보안

로그아웃 후 사용자는 애플리케이션에 대해 지정된 회신 URL에 관계없이 post_logout_redirect_uri 매개 변수에 지정된 URI로 리디렉션됩니다. 그러나 유효한 id_token_hint가 전달되고 로그아웃 요청에서 ID 토큰 요구가 켜져 있는 경우 Azure AD B2C는 리디렉션을 수행하기 전 post_logout_redirect_uri 값이 애플리케이션의 구성된 리디렉션 URI 중 하나와 일치하는지 확인합니다. 애플리케이션에 일치하는 회신 URL이 구성되지 않은 경우 오류 메시지가 표시되고 사용자는 리디렉션되지 않습니다.

보안 로그아웃 리디렉션 URI를 지원하려면 다음 단계를 수행합니다.

id_token을 저장할 전역적으로 액세스 가능한 변수를 만듭니다.
```
let id_token = "";
```

MSAL handleResponse함수에서 authenticationResult 개체에서 id_token 변수로 id_token을 구문 분석합니다.

function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

signOut 함수에서 id_token_hint 매개 변수를 logoutRequest 개체에 추가합니다.

function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

위의 예제에서 로그아웃 요청으로 전달된 post_logout_redirect_uri의 형식은 https://your-app.com/입니다. 이 URL을 애플리케이션 등록의 회신 URL에 추가해야 합니다.

단일 로그아웃 사용

Azure AD B2C에서 단일 로그아웃은 OpenId Connect 프런트 채널 로그아웃을 사용하여 사용자가 Azure AD B2C를 통해 로그인한 모든 애플리케이션에 대한 로그아웃 요청을 만듭니다.

이러한 로그아웃 요청은 숨겨진 Iframe의 Azure AD B2C 로그아웃 페이지에서 이루어집니다. Iframe은 Azure AD B2C가 로그인된 것으로 기록한 앱에 대해 등록된 모든 프런트 채널 로그아웃 엔드포인트에 대해 HTTP 요청을 합니다.

각 애플리케이션에 대한 로그아웃 엔드포인트는 MSAL logout() 메서드를 호출해야 합니다. 또한 allowRedirectInIframe을 true로 설정하여 이 시나리오의 Iframe 내에서 실행하도록 MSAL을 명시적으로 구성해야 합니다.

다음 코드 샘플은 allowRedirectInIframe을 true로 설정합니다.

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

다음 단계

MSAL.js 구성 옵션에 대해 자세히 알아봅니다.

Azure AD B2C를 사용하여 단일 페이지 애플리케이션에서 인증 옵션 구성

사용자 지정 도메인 사용

로그인 이름 미리 채우기

ID 공급자 사전 선택

UI 언어 지정

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

ID 토큰 힌트 전달

로그아웃 리디렉션 보안

단일 로그아웃 사용

다음 단계

추가 리소스