Azure Active Directory B2C Kullanıcı öznitelikleri ekleme ve Kullanıcı girişini özelleştirme

Başlamadan önce, yapılandırmakta olduğunuz ilke türünü seçmek için yukarıdaki seçiciyi kullanın. Azure AD B2C, kullanıcıların uygulamalarınızla nasıl etkileşime gireceğini tanımlayan iki yöntem sunar: önceden tanımlı Kullanıcı akışlarıaracılığıyla veya tamamen yapılandırılabilir özel ilkeler. Bu makalede gereken adımlar her yöntem için farklıdır.

Bu makalede, kayıt seyahatinizi Azure Active Directory B2C (Azure AD B2C) sırasında yeni bir öznitelik topladığınızda. Kullanıcıların şehrini alacak, açılan olarak yapılandıracaksınız ve sağlanması gerekip gerekmediğini tanımlayacaksınız.

Önemli

Bu örnek, yerleşik ' City ' talebini kullanır. Bunun yerine, desteklenen Azure AD B2C yerleşik özniteliklerinden birini veya özel bir özniteliği seçebilirsiniz. Özel bir öznitelik kullanmak için özel öznitelikleri etkinleştirin. Farklı bir yerleşik veya özel öznitelik kullanmak için ' City ' değerini istediğiniz özniteliğiyle değiştirin; Örneğin, yerleşik özniteliği JobTitle veya extension_loyaltyId gibi özel bir öznitelik.

Önkoşullar

Kullanıcı akışlarınızın Kullanıcı özniteliklerini ekleyin

  1. Azure AD B2C kiracınızda Kullanıcı akışları' nı seçin.
  2. İlkeyi (örneğin, "B2C_1_SignupSignin") seçerek açın.
  3. Kullanıcı öznitelikleri ' ni seçin ve ardından Kullanıcı özniteliğini (örneğin, "şehir") seçin.
  4. Kaydet’i seçin.

Uygulamanıza isteğe bağlı talepler sağlama

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

  1. İlkeyi (ö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ı özniteliklerinin giriş türünü yapılandırma

  1. İlkeyi (örneğin, "B2C_1_SignupSignin") seçerek açın.
  2. Sayfa düzenlerini seçin.
  3. Yerel hesap kaydolma sayfası' nı seçin.
  4. Kullanıcı öznitelikleri altında şehir' i seçin.
    1. Kullanıcı giriş türü açılan kutusunda dropdownsingleselect' i seçin. İsteğe bağlı: kaydolma sayfasındaki metin sırasını düzenlemek için "yukarı taşı/aşağı taşı" düğmelerini kullanın.
    2. Isteğe bağlı açılan kutuda Hayır' ı seçin.
  5. Kaydet’i seçin.

Yerelleştirilmiş Koleksiyonlar kullanarak değerlerin bir listesini sağlama

Şehir özniteliği için bir değer listesi sağlamak için:

  1. Kullanıcı akışında dil özelleştirmesini etkinleştir
  2. İlkeyi (ö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ı altında yerel hesap kayıt sayfası' nı seçin.
  5. Varsayılanları indir ' i seçin (veya daha önce bu dili düzenlediyseniz, geçersiz kılmaları indir ).
  6. Bir LocalizedCollections öznitelik oluşturun.

, LocalizedCollections Name Ve Value çiftleri 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 değer.
{
  "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ükleyin

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

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

  1. İlkeyi (ö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österilmesi gerekir https://jwt.ms .
  4. Kullanıcı akışını Çalıştır 'a tıklayın

Genel Bakış

Kayıt veya oturum açma Kullanıcı yolculuğu kullanarak kullanıcılarınızla ilk verileri toplayabilirsiniz. Ek talepler, daha sonra bir profil düzenleme Kullanıcı yolculuğu kullanılarak toplanabilir. Azure AD B2C her zaman doğrudan kullanıcıdan etkileşimli olarak bilgileri toplar, kendi kendini onaylanan teknik profilinikullanır. Bu örnekte şunları yapabilirsiniz:

  1. "Şehir" talebi tanımlayın.
  2. Kullanıcıdan şehrini sorun.
  3. Şehri Azure AD B2C dizinindeki Kullanıcı profiline kalıcı hale getirin.
  4. Her oturum açma üzerinde Azure AD B2C dizininden şehir talebini okuyun.
  5. Oturum açtıktan veya kaydolduktan sonra şehri bağlı olan taraf uygulamanıza döndürün.

Talep tanımlama

Bir talep, Azure AD B2C ilkesi yürütmesi sırasında verilerin geçici bir şekilde 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.
  • Veri türü -talebin türü.
  • Userhelptext -kullanıcının nelerin gerekli olduğunu anlamasına yardımcı olur.
  • Userınputtype -metin kutusu, radyo seçimi, açılan liste veya birden çok seçim gibi giriş denetiminin türü.

İlkenizin uzantıları dosyasını açın. Örneğin, SocialAndLocalAccounts/TrustFrameworkExtensions.xml .

  1. Buildingblocks öğesi için arama yapın. Öğe yoksa, ekleyin.
  2. Claimsschema öğesini bulun. Öğe yoksa, ekleyin.
  3. Bir şehir talebini Claimsschema öğesine 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="bondon" />
        <Enumeration Text="Seattle" Value="seattle" />
      </Restriction>
    </ClaimType>
  <!-- 
  </ClaimsSchema>
</BuildingBlocks>-->

SelectByDefault özniteliğini, Enumeration sayfa ilk yüklendiğinde varsayılan olarak seçili hale getirmek için bir öğesine ekleyin. Örneğin, Londra öğesini önceden seçmek için, Enumeration öğeyi aşağıdaki örnek olarak değiştirin:

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

Kullanıcı arabirimine talep ekleme

Aşağıdaki teknik profiller, birkullanıcının giriş sağlaması beklendiğinde çağrılır:

  • Localaccountsignupwithlogonemail -yerel hesap kaydolma akışı.
  • Selfasted-sosyal -Federasyon hesabı ilk kez Kullanıcı oturum açma.
  • Selfasserted-ProfileUpdate -profil akışını Düzenle.

Kaydolma sırasında şehir talebini toplamak için, teknik profile bir çıkış talebi olarak eklenmelidir LocalAccountSignUpWithLogonEmail . Uzantı dosyasındaki bu teknik profili geçersiz kılın. Taleplerin ekranda sunulduğu sırayı denetlemek için tüm çıkış talepleri listesini belirtin. Claimsproviders öğesini bulun. Yeni bir ClaimsProviders şu şekilde 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>

Bir Federasyon hesabıyla ilk oturum açma işleminden sonra şehir talebini toplamak için, teknik profile bir çıkış talebi olarak eklenmesi gerekir SelfAsserted-Social . Yerel ve Federal hesap kullanıcılarının profil verilerini daha sonra düzenleyebilmeleri için, teknik profile giriş ve çıkış taleplerini ekleyin SelfAsserted-ProfileUpdate . Uzantı dosyasındaki bu teknik profilleri geçersiz kılın. Talepler ekranda sunulan sırayı denetlemek için çıkış taleplerinin tamamının listesini 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>

Talep okuma ve yazma

Aşağıdaki teknik profiller, active directory teknik profilleridirve bu profillere veri Azure Active Directory.
Kullanıcı PersistedClaims profiline veri yazmak ve ilgili OutputClaims Active Directory teknik profillerinde kullanıcı profilinden veri okumak için kullanın.

Uzantı dosyasında 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>

Belirteci talep dahil etmek

Şehir talebi bağlı olan taraf uygulamasına geri dönmek için dosyaya bir çıkış talebi SocialAndLocalAccounts/SignUpOrSignIn.xml ekleyin. Çıkış talebi, başarılı bir kullanıcı yolculuğunun ardından belirteçe eklenir ve uygulamaya gönderilir. Bağlı olan taraf bölümündeki teknik profil öğesini değiştirerek şehri çıkış 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üncelleştirilmiş özel ilkenizi karşıya yükleme ve test etmek

  1. Üst menüde Dizin + abonelik filtresini ve kiracınızı içeren dizini seçerek Azure AD B2C kiracınızı içeren dizini kullanmaya dikkat edin.
  2. için arama Azure AD B2C.
  3. İlkeler altında, öğesini Identity Experience Framework.
  4. Özel ilkeyi karşıya yükle'yi seçin.
  5. Daha önce değiştirmiş olduğunu ilke dosyalarını karşıya yükleyin.

Özel ilkeyi test etmek

  1. Bağlı olan taraf ilkenizi seçin, örneğin B2C_1A_signup_signin .
  2. Uygulama için, daha önce kaydettirerek bir web uygulaması seçin. Yanıt URL'sinin göster olması https://jwt.ms gerekir.
  3. Şimdi çalıştır düğmesini seçin.
  4. Kaydolma veya oturum açma sayfasından Kaydolmak için Şimdi kaydol'a tıklayın. Şehir adı dahil olmak üzere kullanıcı bilgilerini girmeyi bitirin ve oluştur'a tıklayın. Döndürülen belirteci içeriğini görüyor gerekir.

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

Değiştirilmiş kaydolma seçeneğinin ekran görüntüsü

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

{
  "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 şekilde uygulamanıza olanak sağlar. Daha fazla bilgi için dil deneyimini özelleştirme hakkında bilgi edinebilirsiniz. Kaydolma sayfasını yerelleştirmek için desteklenen dillerin listesini ayarlayınve dile özgü etiketler ekleyin.

Not

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

Aşağıdaki örnekte, İngilizce ve İspanyolca için şehir listesinin nasıl sağ olduğu göstermektedir. Her ikisi Restriction de, talep şehrinin koleksiyonunu İngilizce ve İspanyolca için bir öğe listesiyle ayarlayın. SelectByDefault, sayfa ilk kez yüklenirken varsayılan olarak seçilen bir öğeyi yapar.

<!-- 
<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ştirme ile 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