포함된 가입 또는 로그인 환경

  • 아티클

시작하기 전에 이 페이지 위쪽의 정책 유형 선택 선택기를 사용하여 설정하려는 정책 유형을 선택합니다. Azure Active Directory B2C는 사용자가 애플리케이션과 상호 작용하는 방법을 정의하는 두 가지 방법, 즉 미리 정의된 사용자 흐름 또는 완전히 구성 가능한 사용자 지정 정책을 통해 제공합니다. 이 문서에서 필요한 단계는 각 방법마다 다릅니다.

이 기능은 사용자 지정 정책에만 사용할 수 있습니다. 설정 단계의 경우 이전 선택기의 사용자 지정 정책을 선택합니다.

더 간단한 가입 또는 로그인 환경을 위해 사용자를 별도의 가입 또는 로그인 페이지로 리디렉션하거나 팝업 창을 생성하지 않도록 방지할 수 있습니다. 인라인 프레임 <iframe> HTML 요소를 사용하여 Azure AD B2C 로그인 사용자 인터페이스를 웹 애플리케이션에 직접 포함할 수 있습니다.

팁

<iframe> HTML 요소를 사용하여 가입 또는 로그인, 프로필 편집 또는 암호 변경 사용자 지정 정책을 웹 또는 단일 페이지 앱에 포함합니다.

참고 항목

이 기능은 공개 미리 보기로 제공됩니다.

웹 애플리케이션 포함된 로그인

인라인 프레임 요소 <iframe>은 HTML5 웹 페이지에 문서를 포함하는 데 사용됩니다. 다음 예에 표시된 것처럼 iframe 요소를 사용하여 Azure AD B2C 로그인 사용자 인터페이스를 웹 애플리케이션에 직접 포함할 수 있습니다.

Login with hovering DIV experience

iframe을 사용하는 경우 다음 사항을 고려하세요.

  • 포함된 가입 또는 로그인에서 로컬 계정만 지원합니다. 대부분의 소셜 ID 공급자(예: Google 및 Facebook)는 로그인 페이지가 인라인 프레임에서 렌더링되지 않도록 차단합니다.
  • Incognito 모드의 Safari 또는 Chrome과 같은 특정 브라우저는 iframe 내의 Azure AD B2C 세션 쿠키를 타사 쿠키로 봅니다. 이러한 브라우저는 이러한 쿠키를 차단하거나 지울 수 있으므로 사용자 환경이 최적이 아닐 수 있습니다. 이 문제를 방지하려면 애플리케이션 도메인 이름과 Azure AD B2C 도메인의 원본이 동일한지 확인합니다. 동일한 원본을 사용하려면 Azure AD B2C 테넌트에 대해 사용자 지정 도메인을 사용하도록 설정한 다음 동일한 원본으로 웹앱을 구성합니다. 예를 들어 'https://app.contoso.com'에서 호스팅되는 애플리케이션의 원본은 'https://login.contoso.com'에서 실행되는 Azure AD B2C와 동일합니다.

필수 조건

정책 구성

Azure AD B2C 사용자 인터페이스를 iframe에 포함할 수 있도록 하려면 Azure AD B2C HTTP 응답 헤더에 콘텐츠 보안 정책 Content-Security-Policy 및 프레임 옵션 X-Frame-Options를 포함해야 합니다. 이러한 헤더를 사용하면 Azure AD B2C 사용자 인터페이스가 애플리케이션 도메인 이름으로 실행될 수 있습니다.

RelyingParty 요소 내에 JourneyFraming 요소를 추가합니다. UserJourneyBehaviors 요소는 DefaultUserJourney 뒤에 있어야 합니다. UserJourneyBehavors 요소는 다음 예와 같아야 합니다.

<!--
<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
  <UserJourneyBehaviors> 
    <JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" /> 
  </UserJourneyBehaviors>
<!--
</RelyingParty> -->

Sources 특성에는 웹 애플리케이션의 URI가 포함됩니다. URI 사이에 공백을 추가합니다. 각 URI는 다음 요구 사항을 충족해야 합니다.

  • 애플리케이션은 URI를 신뢰하고 소유해야 합니다.
  • URI는 https 체계를 사용해야 합니다.
  • 웹앱의 전체 URI를 지정해야 합니다. 와일드카드는 지원되지 않습니다.
  • JourneyFraming 요소는 일반적으로 인식되는 TLD에 맞춰 2~7자 최상위 도메인(TLD)이 있는 사이트 URL만 허용합니다.

또한 애플리케이션 페이지에서 각각 Content-Security-Policy 및 X-Frame-Options 헤더를 설정하여 고유의 도메인 이름이 iframe에 포함되지 않도록 차단하는 것이 좋습니다. 이 기술은 iframe의 중첩된 포함과 관련된 이전 브라우저의 보안 문제를 완화합니다.

정책 사용자 인터페이스 조정

Azure AD B2C 사용자 인터페이스 사용자 지정을 사용하면 사용자에게 제공되는 HTML 및 CSS 콘텐츠를 거의 완전히 제어할 수 있습니다. 콘텐츠 정의를 사용하여 HTML 페이지를 사용자 지정하는 단계를 수행합니다. Azure AD B2C 사용자 인터페이스를 iframe 크기에 맞추려면 배경 및 추가 공간 없이 완전한 HTML 페이지를 제공합니다.

다음 CSS 코드는 Azure AD B2C HTML 요소를 숨기고 iframe을 채우도록 패널의 크기를 조정합니다.

div.social, div.divider {
    display: none;
}

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

경우에 따라 현재 표시되는 Azure AD B2C 페이지에 대해 애플리케이션에 알리고 싶을 수 있습니다. 예를 들어 사용자가 등록 옵션을 선택하면 애플리케이션이 소셜 계정으로 로그인 링크 및 iframe 크기를 조정하기 위한 링크를 숨기도록 하는 것이 좋습니다.

현재 Azure AD B2C 페이지에 대해 애플리케이션에 알리려면 JavaScript에 대한 정책을 사용하도록 설정한 다음 HTML5를 사용하여 메시지를 게시합니다. 다음 JavaScript 코드는 signUp를 사용하여 게시 메시지를 앱에 보냅니다.

window.parent.postMessage("signUp", '*');

웹앱 구성

사용자가 로그인 단추를 선택하면 웹앱은 사용자에게 Azure AD B2C 로그인 환경을 제공하기 위한 권한 부여 요청을 생성합니다. 로그인이 완료되면 Azure AD B2C는 애플리케이션 내의 구성된 리디렉션 URI에 ID 토큰 또는 권한 부여 코드를 반환합니다.

포함된 로그인을 지원하기 위해 iframe src 특성은 권한 부여 요청을 생성하고 사용자를 Azure AD B2C 정책으로 리디렉션하는 로그인 컨트롤러(예: /account/SignUpSignIn)를 가리킵니다.

<iframe id="loginframe" frameborder="0" src="/account/SignUpSignIn"></iframe>

애플리케이션은 ID 토큰을 수신하고 유효성을 검사한 후 권한 부여 흐름을 완료하고 사용자를 인식하고 신뢰합니다. 권한 부여 흐름이 iframe 내에서 발생하기 때문에 기본 페이지를 다시 로드해야 합니다. 페이지가 다시 로드되면 로그인 단추가 "로그아웃"으로 바뀌고 사용자 이름이 UI에 표시됩니다.

다음 예제에서는 로그인 리디렉션 URI가 기본 페이지를 새로 고칠 수 있는 방법을 보여 줍니다.

window.top.location.reload();

웹앱에 소셜 계정으로 로그인 옵션 추가

소셜 ID 공급자는 인라인 프레임에서의 로그인 페이지가 렌더링되지 않도록 차단합니다. 소셜 계정에 대해 별도의 정책을 사용할 수도 있고, 로컬 및 소셜 계정으로 로그인 및 등록에 모두 단일 정책을 사용할 수도 있습니다. 그런 다음 domain_hint 쿼리 문자열 매개 변수를 사용할 수 있습니다. 도메인 힌트 매개 변수는 사용자를 소셜 ID 공급자의 로그인 페이지로 곧바로 이동시킵니다.

애플리케이션에서 소셜 계정으로 로그인 단추를 추가합니다. 사용자가 소셜 계정 단추 중 하나를 클릭하면 컨트롤에서 정책 이름을 변경하거나 도메인 힌트 매개 변수를 설정해야 합니다.

리디렉션 URI는 iframe에서 사용되는 것과 동일한 리디렉션 URI일 수 있습니다. 페이지 다시 로드를 건너뛸 수 있습니다.

단일 페이지 애플리케이션 구성

단일 페이지 애플리케이션의 경우 iframe에 로드되는 두 번째 "로그인" HTML 페이지도 필요합니다. 이 로그인 페이지는 인증 코드를 생성하는 인증 라이브러리 코드를 호스팅하고 토큰을 반환합니다.

단일 페이지 애플리케이션에 액세스 토큰이 필요한 경우 JavaScript 코드를 사용하여 이 토큰이 포함된 iframe 및 개체에서 액세스 토큰을 가져옵니다.

참고 항목

현재 iframe에서 MSAL 2.0을 실행하는 것은 지원되지 않습니다.

다음 코드는 기본 페이지에서 실행되며 iframe의 JavaScript 코드를 호출하는 예입니다.

function getToken()
{
  var token = document.getElementById("loginframe").contentWindow.getToken("adB2CSignInSignUp");

  if (token === "LoginIsRequired")
    document.getElementById("tokenTextarea").value = "Please login!!!"
  else
    document.getElementById("tokenTextarea").value = token.access_token;
}

function logOut()
{
  document.getElementById("loginframe").contentWindow.policyLogout("adB2CSignInSignUp", "B2C_1A_SignUpOrSignIn");
}

다음 단계

다음 관련 문서를 참조하세요.