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 tamamen 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'de (Azure AD B2C) kaydolma yolculuğunuz sırasında yeni bir öznitelik toplayacağız. Kullanıcıların şehrini edinecek, açılan liste 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ı akışınıza kullanıcı öznitelikleri ekleme

  1. Azure Portal’ında oturum açın.
  2. Azure AD B2C kiracınızı içeren dizini kullandığınızdan emin olun. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.
  3. Portal ayarları | Dizinler + abonelikler sayfası, Dizin adı listesinde Azure AD B2C dizininizi bulun ve ardından Değiştir'i seçin.
  4. 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.
  5. Azure AD B2C kiracınızda Kullanıcı akışları'yı seçin.
  6. İlkenizi (örneğin, "B2C_1_SignupSignin") seçerek açın.
  7. Kullanıcı öznitelikleri'ni ve ardından kullanıcı özniteliğini (örneğin, "Şehir") seçin.
  8. 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 kayıt 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çı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.

    Web page call green API.

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

City özniteliğine ilişkin değerlerin bir listesini 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 ve Value çiftlerinden oluşan Name bir dizidir. Öğelerin sırası, görüntülendikleri sipariş 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 Upload

  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 (örneğin, "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 kendini onaylayan 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 beyanını okuyun.
  5. Oturum açma veya kaydolma sonrasında şehri bağlı olan taraf uygulamanıza iade edin.

Talep tanımlama

Talep, Azure AD B2C ilkesi yürütmesi 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 ne gerektiğini anlamasına yardımcı olur.
  • UserInputType - 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 öğesini arayın. Öğe yoksa ekleyin.
  2. ClaimsSchema öğesini bulun. Öğe 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 EnumerationSelectByDefault özniteliğini ekleyin. Örneğin, Londra öğesini önceden seçmek için öğesini aşağıdaki örnek olarak değiştirin Enumeration :

<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 eklenmesi gerekir. 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, verileri Azure Active Directory okuyan ve yazan Active Directory teknik profilleridir.
Kullanıcı profiline veri yazmak ve OutputClaims ilgili Active Directory teknik profillerindeki kullanıcı profilinden veri 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 bir talep ekleme

Şehir beyanını bağlı olan taraf uygulamasına geri döndürmek için dosyaya SocialAndLocalAccounts/SignUpOrSignIn.xml bir çıkış talebi ekleyin. Çıkış talebi, başarılı bir kullanıcı yolculuğundan sonra belirteçe 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 Upload ve test edin

  1. Azure AD B2C kiracınızı içeren dizini kullandığınızdan emin olun. Portal araç çubuğunda Dizinler + abonelikler simgesini seçin.
  2. Portal ayarları | Dizinler + abonelikler sayfası, Dizin adı listesinde Azure AD B2C dizininizi bulun ve ardından Değiştir'i seçin.
  3. Azure AD B2C'yi arayın ve seçin.
  4. İlkeler'in altında Kimlik Deneyimi Çerçevesi'ne tıklayın.
  5. Özel ilke Upload'i seçin.
  6. Daha önce değiştirdiğiniz ilke dosyalarını Upload.

Ö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'u seçin. Ş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:

Screenshot of modified sign-up option

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ı dillerde barındırmanıza olanak tanır. 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.

Not

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

Aşağıdaki örnekte, İngilizce ve İspanyolca için şehir listesinin nasıl sağlanıp sağlanmaygı gösterilmektedir. her ikisi de talep şehri 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