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

Başlamadan önce, ayarladığınız ilke türünü seçmek için İlke türü seçin 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 yeni bir öznitelik toplayacağız. Kullanıcıların şehrini edinecek, açılan menü olarak yapılandıracak ve sağlanması gerekip gerekmediğini tanımlayacaksınız.

Önemli

Bu örnekte yerleşik 'city' talebi kullanılmaktadı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 (örneğin, yerleşik jobTitle özniteliği veya extension_loyaltyId gibi özel bir öznitelik) değiştirin.

Önkoşullar

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

• Active Directory B2C'de özel ilkeleri kullanmaya başlama bölümündeki adımları tamamlayın
• Bir web uygulaması kaydedin.

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

1. Azure Portal oturum açın.
2. Birden çok kiracıya erişiminiz varsa, Dizinler + abonelikler menüsünden Azure AD B2C kiracınıza geçmek için ü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. Kaydet'i 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’ni seçin.
3. Uygulamanıza geri göndermek istediğiniz öznitelikleri seçin (örneğin, "Şehir")..
4. Kaydet'i 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üzenleri'ni seç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ü'nde TextBox 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çılan öğeleri yeniden sıralamak için "Yukarı/aşağı taşı" düğmelerini kullanın.

5. Tamam’ı seç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. Kaydet'i 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 bir ve Value çiftleri Name dizisidir. Öğelerin sırası, görüntülendikleri sıra olacaktı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'a tıklayın

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ğu kullanılarak ek talepler toplanabilir. 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. Oturum açma veya kaydolma sonrasında şehri bağlı olan taraf uygulamanıza geri döndürebilirsiniz.

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

İlkenizin uzantılar dosyasını 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 SelectByDefault özniteliğini ekleyin. Örneğin, Londra öğesini önceden seçmek için öğesini aşağıdaki örnek olarak değiştirinEnumeration:

<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ı ilk kez kullanıcı oturumu açma.
• SelfAsserted-ProfileUpdate - Profil akışını düzenleyin.

Kayıt sırasında şehir talebi toplamak için teknik profile çıkış talebi LocalAccountSignUpWithLogonEmail 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.
Kullanıcı profiline veri yazmak ve OutputClaims ilgili Active Directory teknik profillerindeki kullanıcı profilinden verileri okumak için kullanınPersistedClaims.

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 talebi bağlı olan taraf uygulamasına geri dönmek için dosyaya SocialAndLocalAccounts/SignUpOrSignIn.xml bir çıkış talebi ekleyin. Çıkış talebi, başarılı bir kullanıcı yolculuğundan sonra belirtecin içine eklenir ve uygulamaya gönderilir. Şehri çıkış talebi olarak eklemek için bağlı olan taraf bölümündeki teknik profil öğesini değiştirin.

<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üncelleştirilmiş özel ilkenizi karşıya yükleme ve test edin

1. Birden çok kiracıya erişiminiz varsa, Dizinler + abonelikler menüsünden Azure AD B2C kiracınıza geçmek için üstteki menüden Ayarlar simgesini seçin.
2. Azure AD B2C'yi arayıp seçin.
3. İlkeler'in altında Kimlik Deneyimi Çerçevesi'ne tıklayın.
4. Özel ilkeyi karşıya yükle'yi seçin.
5. Daha önce değiştirdiğiniz ilke 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'a tıklayın. 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ç, talebi içerir city .

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1583500140,
  "nbf": 1583496540,
  "ver": "1.0",
  "iss": "https://contoso.b2clogin.com/f06c2fe8-709f-4030-85dc-38a4bfd9e82d/v2.0/",
  "aud": "e1d2612f-c2bc-4599-8e7b-d874eaca1ee1",
  "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.

Dekont

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

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 şehrinin koleksiyonunu İngilizce ve İspanyolca için bir öğe listesiyle ayarlarRestriction. 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.