Azure Active Directory B2C'de kullanıcı öznitelikleri ekleme ve kullanıcı girişini özelleştirme

Önemli

1 Mayıs 2025 tarihinden itibaren Azure AD B2C artık yeni müşteriler için satın alınamayacak. SSS bölümünden daha fazla bilgi edinebilirsiniz.

Başlamadan önce, ayarlamakta olduğunuz ilke türünü seçmek için bu sayfanın üst kısmındaki İlke türü seç seçicisini kullanın. Azure Active Directory B2C, kullanıcıların uygulamalarınızla nasıl etkileşim kurduğunu tanımlamak için iki yöntem sunar: önceden tanımlanmış kullanıcı akışları veya tam olarak yapılandırılabilir özel ilkeler aracılığıyla. Bu makalede gerekli adımlar her yöntem için farklıdır.

Bu makalede, Azure Active Directory B2C'ye (Azure AD B2C) kaydolma yolculuğunuz sırasında şehir gibi yeni bir öznitelik toplarsınız. Kullanıcıların şehrini edinir, bunu açılır menü olarak yapılandırır ve bu bilginin girilmesinin zorunlu olup olmadığını tanımlarsınız.

Önemli

Bu örnek, yerleşik 'şehir' talebini kullanmaktadır. Bunun yerine desteklenen Azure AD B2C yerleşik özniteliklerinden birini veya özel bir özniteliği seçebilirsiniz. Özel öznitelik kullanmak için özel öznitelikleri etkinleştirin. Farklı bir yerleşik veya özel öznitelik kullanmak için , 'city' değerini istediğiniz öznitelikle değiştirin( örneğin, yerleşik jobTitle özniteliği veya extension_loyaltyId gibi özel bir öznitelik).

Önkoşullar

• Kullanıcıların uygulamanıza kaydolabilmesi ve uygulamanızda oturum açabilmesi için bir kullanıcı akışı oluşturun.
• Web uygulaması kaydedin.

• Active Directory B2C'de özel ilkeleri kullanmaya başlamaadımlarını tamamlayın. Bu öğretici, özelleştirilmiş ilke dosyalarını Azure AD B2C kiracı yapılandırmanızı kullanacak şekilde güncelleme konusunda size rehberlik eder.
• Web uygulaması kaydedin.

Kullanıcı akışınıza kullanıcı öznitelikleri ekleme

1. Azure portalınaoturum açın.
2. Birden çok kiracıya erişiminiz varsa Azure AD B2C kiracınıza geçiş yapmak için Dizinler + abonelikler menüsünde, üstteki menüden Ayarlar simgesini seçin.
3. Azure hizmetleri'nin altında Azure AD B2C'yi seçin. Azure AD B2C'yi bulmak ve seçmek için arama kutusunu da kullanabilirsiniz.
4. Azure AD B2C kiracınızda Kullanıcı akışları'yı seçin.
5. İlkenizi (örneğin, "B2C_1_SignupSignin") seçerek açın.
6. Kullanıcı öznitelikleri'ni ve ardından kullanıcı özniteliğini (örneğin, "Şehir") seçin.
7. Kaydetseçeneğini seçin.

Uygulamanıza isteğe bağlı talepler sağlayın

Uygulama talepleri, uygulamaya döndürülen değerlerdir. Kullanıcı akışınızı istenen talepleri içerecek şekilde güncelleştirin:

1. İlkenizi (örneğin, "B2C_1_SignupSignin") seçerek açın.
2. Uygulama talepleri'ne tıklayın.
3. Uygulamanıza geri göndermek istediğiniz öznitelikleri seçin (örneğin, "Şehir").
4. Kaydetseçeneğini seçin.

Kullanıcı öznitelikleri giriş türünü yapılandırma

1. İlkenizi (örneğin, "B2C_1_SignupSignin") seçerek açın.

2. Sayfa düzenleriseçin.

3. Yerel hesap kaydolma sayfasını seçin.

4. Kullanıcı öznitelikleri'nin altında Şehir'i seçin.

   1. İsteğe bağlı açılan listesinde Hayır'ı seçin.
   2. Kullanıcı giriş türü'ndeTextBox gibi geçerli kullanıcı giriş türünü seçerek Kullanıcı giriş türü düzenleyicisi pencere bölmesini açın.
   3. Kullanıcı giriş türü açılan listesinde DropdownSingleSelect'i seçin.
   4. Metin ve Değerler'de, özniteliği için yanıt kümenizi oluşturan metin ve değer çiftlerini girin. Metin akışınızın web arabiriminde görüntülenir ve Değerler seçili Metin için Azure AD B2C'de depolanır. İsteğe bağlı: Açılır liste öğelerini yeniden sıralamak için "Yukarı/aşağı taşı" düğmelerini kullanın.

5. tamamseçin. İsteğe bağlı: Kaydolma sayfasındaki kullanıcı özniteliklerini yeniden sıralamak için "Yukarı/aşağı taşı" düğmelerini kullanın.

6. Kaydetseçeneğini seçin.

   

Yerelleştirilmiş koleksiyonları kullanarak değerlerin listesini sağlama

City özniteliği için belirli bir değer listesi sağlamak için:

1. Kullanıcı akışında dil özelleştirmesini etkinleştirme
2. İlkenizi (örneğin, "B2C_1_SignupSignin") seçerek açın.
3. Kullanıcı akışının Diller sayfasında, özelleştirmek istediğiniz dili seçin.
4. Sayfa düzeyi kaynak dosyaları'nın altında Yerel hesap kaydolma sayfası'yı seçin.
5. Varsayılanları indir'i (veya Bu dili daha önce düzenlediyseniz geçersiz kılmaları indir)'i seçin.
6. Bir LocalizedCollections öznitelik oluşturun.

LocalizedCollections, Name ve Value çiftlerinden oluşan bir dizidir. Öğelerin sırası, görüntülendikleri sıradır.

• ElementId , bu LocalizedCollections özniteliğin yanıt olduğu kullanıcı özniteliğidir.
• Name kullanıcıya gösterilen değerdir.
• Value , bu seçenek belirlendiğinde talepte döndürülen seçenektir.

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

Değişikliklerinizi karşıya yükleme

1. JSON dosyanızdaki değişiklikleri tamamladıktan sonra B2C kiracınıza geri dönün.
2. Kullanıcı akışları'na tıklayın ve ilkenizi ("B2C_1_SignupSignin") seçerek açın.
3. Diller'i seçin.
4. Çevirmek istediğiniz dili seçin.
5. Sayfa düzeyi kaynak dosyaları'nın altında Yerel hesap kaydolma sayfası'yı seçin.
6. Klasör simgesini seçin ve karşıya yüklenecek JSON dosyasını seçin. Değişiklikler otomatik olarak kullanıcı akışınıza kaydedilir.

Kullanıcı akışınızı test edin

1. İlkenizi (örneğin, "B2C_1_SignupSignin") seçerek açın.
2. İlkenizi test etmek için Kullanıcı akışını çalıştır'ı seçin.
3. Uygulama için daha önce kaydettiğiniz testapp1 adlı web uygulamasını seçin. Yanıt URL'si göstermelidirhttps://jwt.ms.
4. Kullanıcı akışını çalıştır'ı seçin

Genel Bakış

Kaydolma veya oturum açma kullanıcı yolculuğunu kullanarak kullanıcılarınızdan ilk verileri toplayabilirsiniz. Daha sonra profil düzenleme kullanıcı yolculuğunu kullanarak daha fazla talep toplayabilirsiniz. Azure AD B2C, kullanıcıdan etkileşimli olarak doğrudan bilgi topladığı her zaman kendi kendine onaylanan teknik profili kullanır. Bu örnekte şunları yapın:

1. Bir "şehir" talebi tanımlayın.
2. Kullanıcıdan şehrini isteyin.
3. Şehri Azure AD B2C dizinindeki kullanıcı profilinde kalıcı hale getirme.
4. Her oturum açmada Azure AD B2C dizinindeki şehir talebine bakın.
5. Şehir bilgilerini giriş yapma veya kaydolma sonrası güvenilir taraf uygulamanıza geri yönlendirin.

Talep tanımlama

Talep, Azure AD B2C ilkesi yürütme sırasında verilerin geçici olarak depolanmasını sağlar. Talep şeması, taleplerinizi bildirdiğiniz yerdir. Talebi tanımlamak için aşağıdaki öğeler kullanılır:

• DisplayName - Kullanıcıya yönelik etiketi tanımlayan bir dize.
• DataType - Talebin türü.
• UserHelpText - Kullanıcının nelerin gerekli olduğunu anlamasına yardımcı olur.
• UserInputType - Metin kutusu, radyo seçimi, açılan liste veya birden çok seçim gibi giriş denetimi türü.

Politika uzantı dosyanızı açın. Örneğin, SocialAndLocalAccounts/TrustFrameworkExtensions.xml.

1. BuildingBlocks öğesini arayın. Öğesi yoksa ekleyin.
2. ClaimsSchema öğesini bulun. Öğesi yoksa ekleyin.
3. ClaimsSchema öğesine şehir talebi ekleyin.

<!-- 
<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>-->

Sayfa ilk yüklendiğinde varsayılan olarak seçili olmasını sağlamak için öğeye Enumeration özniteliğini ekleyin. Örneğin, Londra öğesini önceden seçmek için, Enumeration öğesini aşağıdaki örnekteki gibi değiştirin:

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

Kullanıcı arabirimine talep ekleme

Aşağıdaki teknik profiller kendi kendine onaylanır ve kullanıcının giriş sağlaması beklendiğinde çağrılır:

• LocalAccountSignUpWithLogonEmail - Yerel hesap kayıt akışı.
• SelfAsserted-Social - Federasyon hesabı ile ilk kez oturum açma.
• SelfAsserted-ProfileUpdate - Profil akışını düzenleyin.

Kayıt sırasında şehir talebini toplamak için LocalAccountSignUpWithLogonEmail teknik profiline çıkış talebi olarak eklenmelidir. Uzantı dosyasında bu teknik profili geçersiz kılın. Taleplerin ekranda sunulma sırasını denetlemek için çıkış talepleri listesinin tamamını belirtin. ClaimsProviders öğesini bulun. Aşağıdaki gibi yeni bir ClaimsProviders ekleyin:

<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>

Federasyon hesabıyla ilk oturum açma işleminden sonra şehir talebi toplamak için teknik profile çıkış talebi SelfAsserted-Social olarak eklenmelidir. Yerel ve federasyon hesabı kullanıcılarının profil verilerini daha sonra düzenleyebilmeleri için giriş ve çıkış taleplerini SelfAsserted-ProfileUpdate teknik profile ekleyin. Uzantı dosyasındaki bu teknik profilleri geçersiz kılın. Taleplerin ekranda sunulma sırasını denetlemek için çıkış taleplerinin listesinin tamamını belirtin. ClaimsProviders öğesini bulun. Aşağıdaki gibi yeni bir ClaimsProviders ekleyin:

<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>

Talebi okuma ve yazma

Aşağıdaki teknik profiller, Microsoft Entra Id'ye veri okuyan ve yazan Active Directory teknik profilleridir.
PersistedClaims kullanıcı profiline veri yazmak için ve OutputClaims ilgili Active Directory teknik profillerindeki kullanıcı profilinden veri okumak için kullanın.

Uzantı dosyasındaki bu teknik profilleri geçersiz kılın. ClaimsProviders öğesini bulun. Aşağıdaki gibi yeni bir ClaimsProviders ekleyin:

<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>

Belirteçte talep ekleme

Şehir talebini bağlı olan taraf uygulamasına iade etmek için SocialAndLocalAccounts/SignUpOrSignIn.xml dosyasına bir çıkış talebi ekleyin. Çıktı talebi, kullanıcı yolculuğu başarılı bir şekilde tamamlandıktan sonra jetonun içine eklenir ve uygulamaya gönderilir. Bağlı taraf bölümündeki teknik profil öğesini değiştirerek şehri çıktı talebi olarak ekleyin.

<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>

Güncellenmiş özel ilkenizi yükleyin ve test edin

1. Birden çok kiracıya erişiminiz varsa Azure AD B2C kiracınıza geçiş yapmak için Dizinler + abonelikler menüsünde, üstteki menüden Ayarlar simgesini seçin.
2. Azure AD B2C'yi arayıp seçin.
3. Politikalar altında Kimlik Deneyimi Çerçevesi seçin.
4. Özel ilkeyi karşıya yüklemeyi seçin.
5. Daha önce değiştirdiğiniz politika dosyalarını karşıya yükleyin.

Özel ilkeyi test edin

1. Bağlı olan taraf ilkenizi seçin, örneğin B2C_1A_signup_signin.
2. Uygulama için daha önce kaydettiğiniz bir web uygulamasını seçin. Yanıt URL'si göstermelidirhttps://jwt.ms.
3. Şimdi çalıştır düğmesini seçin.
4. Kaydolma veya oturum açma sayfasında Kaydolmak için Şimdi kaydol'a tıklayın. Şehir adı da dahil olmak üzere kullanıcı bilgilerini girmeyi bitirip Oluştur'u seçin. Döndürülen belirtecin içeriğini görmeniz gerekir.

Kaydolma ekranı aşağıdaki ekran görüntüsüne benzer görünmelidir:

Uygulamanıza geri gönderilen belirteç, city talebini içerir.

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1583500140,
  "nbf": 1583496540,
  "ver": "1.0",
  "iss": "https://contoso.b2clogin.com/aaaabbbb-0000-cccc-1111-dddd2222eeee/v2.0/",
  "aud": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "acr": "b2c_1a_signup_signin",
  "nonce": "defaultNonce",
  "iat": 1583496540,
  "auth_time": 1583496540,
  "name": "Emily Smith",
  "email": "joe@outlook.com",
  "given_name": "Emily",
  "family_name": "Smith",
  "city": "Berlin"
  ...
}

[İsteğe bağlı] Kullanıcı arabirimini yerelleştirme

Azure AD B2C, ilkenizi farklı dillere uygun hale getirebilirsiniz. Daha fazla bilgi için dil deneyimini özelleştirme hakkında bilgi edinin. Kaydolma sayfasını yerelleştirmek için desteklenen dillerin listesini ayarlayın ve dile özgü etiketler sağlayın.

Uyarı

diline özgü etiketlerle LocalizedCollection kullanırken, Restriction koleksiyonu talep tanımından kaldırabilirsiniz.

Aşağıdaki örnek, İngilizce ve İspanyolca için şehir listesinin nasıl sağlanıp sağlanmaygını göstermektedir. Her ikisi de talep Restriction koleksiyonunu İngilizce ve İspanyolca için bir öğe listesiyle ayarlar. SelectByDefault, sayfa ilk yüklendiğinde varsayılan olarak bir öğeyi seçer.

<!-- 
<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>-->

Yerelleştirme öğesini ekledikten sonra içerik tanımını yerelleştirmeyle düzenleyin. Aşağıdaki örnekte, kaydolma sayfasına İngilizce (en) ve İspanyolca (es) özel yerelleştirilmiş kaynaklar eklenir:

<!-- 
<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>-->

Sonraki Adımlar

• IEF başvurusunda ClaimsSchema öğesi hakkında daha fazla bilgi edinin.
• Azure AD B2C'de özel öznitelikleri kullanmayı öğrenin.

Sonraki Adımlar

• Azure Active Directory B2C'de kullanıcı arabirimini özelleştirin.
• Azure Active Directory B2C'de HTML şablonlarıyla kullanıcı arabirimini özelleştirin.
• JavaScript'i etkinleştirin.