Azure Active Directory B2C에서 사용자 특성 추가 및 사용자 입력 사용자 지정

• 사용자가 애플리케이션에 가입하고 로그인할 수 있도록 사용자 흐름을 만듭니다.
• 웹 애플리케이션 등록.

• Active Directory B2C에서 사용자 지정 정책을 사용하여 시작하기에 있는 단계를 완료합니다. 이 자습서에서는 Azure AD B2C 테넌트 구성을 사용하도록 사용자 지정 정책 파일을 업데이트하는 방법을 안내합니다.
• 웹 애플리케이션 등록.

사용자 흐름에 사용자 특성 추가

1. Azure Portal에 로그인합니다.
2. 여러 테넌트에 액세스할 수 있는 경우 상단 메뉴의 설정 아이콘을 선택하여 디렉터리 + 구독 메뉴에서 Azure AD B2C 테넌트로 전환합니다.
3. Azure 서비스에서 Azure AD B2C를 선택합니다. 또는 검색 상자를 사용하여 Azure AD B2C를 찾고 선택합니다.
4. Azure AD B2C 테넌트에서 사용자 흐름을 선택합니다.
5. 정책(예: "B2C_1_SignupSignin")을 선택하여 엽니다.
6. 사용자 특성을 선택한 다음 사용자 특성(예: "City")을 선택합니다.
7. 저장을 선택합니다.

앱에 선택적 클레임 제공

애플리케이션 클레임은 애플리케이션에 반환되는 값입니다. 원하는 클레임을 포함하도록 사용자 흐름을 업데이트합니다.

1. 정책(예: "B2C_1_SignupSignin")을 선택하여 엽니다.
2. 애플리케이션 클레임을 선택합니다.
3. 애플리케이션으로 다시 보낼 특성을 선택합니다(예: "도시").
4. 저장을 선택합니다.

사용자 특성 입력 유형 구성

1. 정책(예: "B2C_1_SignupSignin")을 선택하여 엽니다.

2. 페이지 레이아웃을 선택합니다.

3. 로컬 계정 등록 페이지를 선택합니다.

4. 사용자 특성 아래에서 도시를 선택합니다.

   1. 선택적 드롭다운에서 아니요를 선택합니다.
   2. 사용자 입력 유형에서 TextBox와 같은 현재 사용자 입력 유형을 선택하여 사용자 입력 형식 편집기 창을 엽니다.
   3. 사용자 입력 형식 드롭다운에서 DropdownSingleSelect를 선택합니다.
   4. 텍스트 및 값에 특성에 대한 응답 집합을 구성하는 텍스트 및 값 쌍을 입력합니다. 텍스트는 흐름에 대한 웹 인터페이스에 표시되고 선택한 텍스트에 대한 값은 Azure AD B2C에 저장됩니다. 선택 사항: "위로/아래로 이동" 단추를 사용하여 드롭다운 항목의 순서를 다시 지정합니다.

5. 확인선택합니다. 선택 사항: "위로/아래로 이동" 단추를 사용하여 등록 페이지에서 사용자 특성의 순서를 다시 지정합니다.

6. 저장을 선택합니다.

   

지역화된 컬렉션을 사용하여 값 목록 제공

도시 특성에 대한 값의 집합 목록을 제공하려면 다음을 수행합니다.

1. 사용자 흐름에서 언어 사용자 지정 사용
2. 정책(예: "B2C_1_SignupSignin")을 선택하여 엽니다.
3. 사용자 흐름에 대한 언어 페이지에서 사용자 지정하려는 언어를 선택합니다.
4. 페이지 수준 리소스 파일에서 로컬 계정 등록 페이지를 선택합니다.
5. 기본값 다운로드(또는 이전에 이 언어를 편집한 경우 재정의 다운로드)를 선택합니다.
6. LocalizedCollections 특성을 만듭니다.

이 LocalizedCollections 배열은 쌍의 NameValue 배열입니다. 항목의 순서는 표시되는 순서입니다.

• ElementId는 이 LocalizedCollections 특성이 응답인 사용자 특성입니다.
• Name 는 사용자에게 표시되는 값입니다.
• Value는 이 옵션이 선택될 때 클레임에 반환된 항목입니다.

{
  "LocalizedStrings": [...],
  "LocalizedCollections": [
    {
      "ElementType": "ClaimType",
      "ElementId": "city",
      "TargetCollection": "Restriction",
      "Override": true,
      "Items": [
        {
          "Name": "Berlin",
          "Value": "Berlin"
        },
        {
          "Name": "London",
          "Value": "London"
        },
        {
          "Name": "Seattle",
          "Value": "Seattle"
        }
      ]
    }
  ]
}

변경 내용 업로드

1. JSON 파일의 변경 내용을 완료한 후 B2C 테넌트로 돌아갑니다.
2. 사용자 흐름을 선택하고 정책(예: "B2C_1_SignupSignin")을 선택하여 엽니다.
3. 언어를 선택합니다.
4. 번역하려는 언어를 선택합니다.
5. 페이지 수준 리소스 파일에서 로컬 계정 등록 페이지를 선택합니다.
6. 폴더 아이콘을 선택하고 업로드할 JSON 파일을 선택합니다. 변경 내용이 자동으로 사용자 흐름에 저장됩니다.

사용자 흐름 테스트

1. 정책(예: "B2C_1_SignupSignin")을 선택하여 엽니다.
2. 정책을 테스트하려면 사용자 흐름 실행을 선택합니다.
3. 애플리케이션의 경우 이전에 등록한 testapp1이라는 웹 애플리케이션을 선택합니다. 회신 URL에는 https://jwt.ms가 표시되어야 합니다.
4. 사용자 흐름 실행 선택

개요

등록 또는 로그인 사용자 경험을 사용하여 사용자로부터 초기 데이터를 수집할 수 있습니다. 나중에 프로필 편집 사용자 경험을 사용하여 더 많은 클레임을 수집할 수 있습니다. Azure AD B2C는 대화형으로 사용자로부터 직접 정보를 수집할 때마다 자체 어설션된 기술 프로필을 사용합니다. 이 샘플에서는 다음을 수행합니다.

1. "도시" 클레임을 정의합니다.
2. 사용자에게 도시를 요청합니다.
3. Azure AD B2C 디렉터리의 사용자 프로필에 도시를 유지합니다.
4. 각 로그인의 Azure AD B2C 디렉터리에서 도시 클레임을 읽습니다.
5. 로그인 또는 등록 후 신뢰 당사자 애플리케이션으로 도시를 반환합니다.

클레임 정의

클레임은 Azure AD B2C 정책 실행 중에 데이터의 임시 스토리지를 제공합니다. 클레임 스키마는 클레임을 선언하는 위치입니다. 클레임을 정의하는 데 사용되는 요소는 다음과 같습니다.

• DisplayName - 사용자 연결 레이블을 정의하는 문자열입니다.
• DataType - 클레임의 형식입니다.
• UserHelpText - 사용자가 필요한 사항을 이해하는 데 도움이 됩니다.
• UserInputType - 입력란, 라디오 선택, 드롭다운 목록 또는 여러 선택 항목과 같은 입력 컨트롤의 형식입니다.

정책의 확장 파일을 엽니다. 예: SocialAndLocalAccounts/TrustFrameworkExtensions.xml.

1. BuildingBlocks 요소를 검색합니다. 요소가 없으면 추가합니다.
2. ClaimsSchema 요소를 찾습니다. 요소가 없으면 추가합니다.
3. ClaimsSchema 요소에 city 클레임을 추가합니다.

<!-- 
<BuildingBlocks>
  <ClaimsSchema> -->
    <ClaimType Id="city">
      <DisplayName>City where you work</DisplayName>
      <DataType>string</DataType>
      <UserInputType>DropdownSingleSelect</UserInputType>
      <Restriction>
        <Enumeration Text="Berlin" Value="berlin" />
        <Enumeration Text="London" Value="london" />
        <Enumeration Text="Seattle" Value="seattle" />
      </Restriction>
    </ClaimType>
  <!-- 
  </ClaimsSchema>
</BuildingBlocks>-->

페이지에 처음 로드될 때 기본적으로 선택되도록 요소에 Enumeration 특성을 포함합니다. 예를 들어 London 항목을 미리 선택하려면 다음 예제로 요소를 변경 Enumeration 합니다.

<Restriction>
  <Enumeration Text="Berlin" Value="berlin" />
  <Enumeration Text="London" Value="london" SelectByDefault="true" />
  <Enumeration Text="Seattle" Value="seattle" />
</Restriction>

사용자 인터페이스에 클레임 추가

다음 기술 프로필은 사용자가 입력을 제공해야 할 때 호출되는 자체 보증입니다.

• LocalAccountSignUpWithLogonEmail - 로컬 계정 등록 흐름입니다.
• SelfAsserted-Social - 페더레이션 계정 처음 사용자 로그인.
• SelfAsserted-ProfileUpdate - 프로필 흐름을 편집합니다.

회원가입 시 도시 클레임을 수집하려면, LocalAccountSignUpWithLogonEmail 기술 프로필에 출력 클레임으로 추가해야 합니다. 확장 파일에서 이 기술 프로필을 재정의합니다. 출력 클레임의 전체 목록을 지정하여 클레임이 화면에 표시되는 순서를 제어합니다. ClaimsProviders 요소를 찾습니다. 다음과 같이 새 ClaimsProviders를 추가합니다.

<ClaimsProvider>
  <DisplayName>Local Account</DisplayName>
  <TechnicalProfiles>
    <!--Local account sign-up page-->
    <TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
      <OutputClaims>
       <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="Verified.Email" Required="true" />
       <OutputClaim ClaimTypeReferenceId="newPassword" Required="true" />
       <OutputClaim ClaimTypeReferenceId="reenterPassword" Required="true" />
       <OutputClaim ClaimTypeReferenceId="displayName" />
       <OutputClaim ClaimTypeReferenceId="givenName" />
       <OutputClaim ClaimTypeReferenceId="surName" />
       <OutputClaim ClaimTypeReferenceId="city"/>
     </OutputClaims>
   </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

페더레이션된 계정으로 처음 로그인한 후 도시 클레임을 수집하려면 기술 프로필에 출력 클레임 SelfAsserted-Social 으로 추가해야 합니다. 로컬 및 페더레이션 계정 사용자가 나중에 프로필 데이터를 편집할 수 있도록 기술 프로필에 입력 및 출력 클레임을 SelfAsserted-ProfileUpdate 추가합니다. 확장 파일에서 이러한 기술 프로필을 재정의합니다. 출력 클레임의 전체 목록을 지정하여 클레임이 화면에 표시되는 순서를 제어합니다. ClaimsProviders 요소를 찾습니다. 다음과 같이 새 ClaimsProviders를 추가합니다.

<ClaimsProvider>
  <DisplayName>Self Asserted</DisplayName>
  <TechnicalProfiles>
    <!--Federated account first-time sign-in page-->
    <TechnicalProfile Id="SelfAsserted-Social">
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="city" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="displayName"/>
        <OutputClaim ClaimTypeReferenceId="givenName"/>
        <OutputClaim ClaimTypeReferenceId="surname"/>
        <OutputClaim ClaimTypeReferenceId="city"/>
      </OutputClaims>
    </TechnicalProfile>
    <!--Edit profile page-->
    <TechnicalProfile Id="SelfAsserted-ProfileUpdate">
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="city" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="displayName"/>
        <OutputClaim ClaimTypeReferenceId="givenName" />
        <OutputClaim ClaimTypeReferenceId="surname" />
        <OutputClaim ClaimTypeReferenceId="city"/>
      </OutputClaims>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

클레임 읽기 및 쓰기

다음 기술 프로필은 Microsoft Entra ID에 데이터를 읽고 쓰는 Active Directory 기술 프로필입니다.
사용자 프로필에 데이터를 쓰려면 PersistedClaims를 사용하고, 해당 Active Directory 기술 프로필 내에서 사용자 프로필의 데이터를 읽으려면 OutputClaims를 사용합니다.

확장 파일에서 이러한 기술 프로필을 재정의합니다. ClaimsProviders 요소를 찾습니다. 다음과 같이 새 ClaimsProviders를 추가합니다.

<ClaimsProvider>
  <DisplayName>Azure Active Directory</DisplayName>
  <TechnicalProfiles>
    <!-- Write data during a local account sign-up flow. -->
    <TechnicalProfile Id="AAD-UserWriteUsingLogonEmail">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Write data during a federated account first-time sign-in flow. -->
    <TechnicalProfile Id="AAD-UserWriteUsingAlternativeSecurityId">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Write data during edit profile flow. -->
    <TechnicalProfile Id="AAD-UserWriteProfileUsingObjectId">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Read data after user resets the password. -->
    <TechnicalProfile Id="AAD-UserReadUsingEmailAddress">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
    <!-- Read data after user authenticates with a local account. -->
    <TechnicalProfile Id="AAD-UserReadUsingObjectId">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
    <!-- Read data after user authenticates with a federated account. -->
    <TechnicalProfile Id="AAD-UserReadUsingAlternativeSecurityId">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

토큰에 클레임 포함

도시 클레임을 신뢰 당사자 애플리케이션으로 다시 반환하려면 파일에 출력 클레임을 SocialAndLocalAccounts/SignUpOrSignIn.xml 추가합니다. 출력 클레임은 성공적인 사용자 경험 후에 토큰에 추가되고 애플리케이션으로 전송됩니다. 신뢰 당사자 섹션 내의 기술 프로필 요소를 수정하여 도시를 출력 클레임으로 추가합니다.

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <TechnicalProfile Id="PolicyProfile">
    <DisplayName>PolicyProfile</DisplayName>
    <Protocol Name="OpenIdConnect" />
    <OutputClaims>
      <OutputClaim ClaimTypeReferenceId="displayName" />
      <OutputClaim ClaimTypeReferenceId="givenName" />
      <OutputClaim ClaimTypeReferenceId="surname" />
      <OutputClaim ClaimTypeReferenceId="email" />
      <OutputClaim ClaimTypeReferenceId="objectId" PartnerClaimType="sub"/>
      <OutputClaim ClaimTypeReferenceId="identityProvider" />
      <OutputClaim ClaimTypeReferenceId="tenantId" AlwaysUseDefaultValue="true" DefaultValue="{Policy:TenantObjectId}" />
      <OutputClaim ClaimTypeReferenceId="city" DefaultValue="" />
    </OutputClaims>
    <SubjectNamingInfo ClaimType="sub" />
  </TechnicalProfile>
</RelyingParty>

업데이트된 사용자 지정 정책 업로드 및 테스트

1. 여러 테넌트에 액세스할 수 있는 경우 상단 메뉴의 설정 아이콘을 선택하여 디렉터리 + 구독 메뉴에서 Azure AD B2C 테넌트로 전환합니다.
2. Azure AD B2C를 검색하고 선택합니다.
3. 정책에서 ID 환경 프레임워크를 선택합니다.
4. 사용자 지정 정책 업로드를 선택합니다.
5. 이전에 변경한 정책 파일을 업로드합니다.

사용자 지정 정책 테스트

1. 신뢰 당사자 정책을 선택하세요, 예를 들어 B2C_1A_signup_signin.
2. 애플리케이션의 경우 이전에 등록한 웹 애플리케이션을 선택합니다. 회신 URL에는 https://jwt.ms가 표시되어야 합니다.
3. 지금 실행 단추를 선택합니다.
4. 등록 또는 로그인 페이지에서 지금 등록 을 선택하여 등록합니다. 도시 이름을 포함한 사용자 정보 입력을 완료한 다음 만들기를 선택합니다. 반환된 토큰의 내용이 표시됩니다.

[선택 사항] UI 지역화

Azure AD B2C를 사용하면 정책을 다른 언어로 수용할 수 있습니다. 자세한 내용은 언어 환경을 사용자 지정하는 방법을 알아봅니다. 등록 페이지를 지역화하려면 지원되는 언어 목록을 설정하고 언어별 레이블을 제공합니다.

다음 예제에서는 영어와 스페인어에 대한 도시 목록을 제공하는 방법을 보여 줍니다. 둘 다 영어와 스페인어 항목 목록을 사용하여 클레임 Restriction 컬렉션을 설정합니다. SelectByDefault는 페이지가 처음 로드될 때 기본적으로 선택된 항목을 만듭니다.

<!-- 
<BuildingBlocks>-->
  <Localization Enabled="true">
    <SupportedLanguages DefaultLanguage="en" MergeBehavior="Append">
      <SupportedLanguage>en</SupportedLanguage>
      <SupportedLanguage>es</SupportedLanguage>
    </SupportedLanguages>
    <LocalizedResources Id="api.localaccountsignup.en">
      <LocalizedCollections>
        <LocalizedCollection ElementType="ClaimType" ElementId="city" TargetCollection="Restriction">
          <Item Text="Berlin" Value="Berlin"></Item>
          <Item Text="London" Value="London" SelectByDefault="true"></Item>
          <Item Text="Seattle" Value="Seattle"></Item>
        </LocalizedCollection>
      </LocalizedCollections>
    </LocalizedResources>
    <LocalizedResources Id="api.localaccountsignup.es">
      <LocalizedCollections>
        <LocalizedCollection ElementType="ClaimType" ElementId="city" TargetCollection="Restriction">
          <Item Text="Berlina" Value="Berlin"></Item>
          <Item Text="Londres" Value="London" SelectByDefault="true"></Item>
          <Item Text="Seattle" Value="Seattle"></Item>
        </LocalizedCollection>
      </LocalizedCollections>
    </LocalizedResources>
  </Localization>
<!-- 
</BuildingBlocks>-->

지역화 요소를 추가한 후 지역화를 사용하여 콘텐츠 정의를 편집합니다. 다음 예제에서는 영어(en) 및 스페인어(es) 사용자 지정 지역화된 리소스가 등록 페이지에 추가됩니다.

<!-- 
<BuildingBlocks>
  <ContentDefinitions> -->
   <ContentDefinition Id="api.localaccountsignup">
    <LocalizedResourcesReferences MergeBehavior="Prepend">
        <LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.localaccountsignup.en" />
        <LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.localaccountsignup.es" />
    </LocalizedResourcesReferences>
   </ContentDefinition>
  <!-- 
  </ContentDefinitions>
</BuildingBlocks>-->

다음 단계

• IEF 참조의 ClaimsSchema 요소에 대해 자세히 알아봅니다.
• Azure AD B2C에서 사용자 지정 특성을 사용하는 방법을 알아봅니다.

다음 단계

• Azure Active Directory B2C에서 사용자 인터페이스를 사용자 지정합니다.
• Azure Active Directory B2C에서 HTML 템플릿을 사용하여 사용자 인터페이스를 사용자 지정합니다.
• JavaScript를 사용하도록 설정합니다.