Menambahkan atribut pengguna dan menyesuaikan input pengguna di Azure Active Directory B2C

Artikel
11/08/2023

Sebelum memulai, gunakan pemilih Pilih jenis kebijakan untuk memilih jenis kebijakan yang Anda siapkan. Azure Active Directory B2C menawarkan dua metode untuk menentukan cara pengguna berinteraksi dengan aplikasi Anda: melalui alur pengguna yang telah ditentukan sebelumnya atau melalui kebijakan kustom yang sepenuhnya dapat dikonfigurasi. Langkah yang diperlukan dalam artikel ini berbeda untuk setiap metode.

Dalam artikel ini, Anda mengumpulkan atribut baru selama perjalanan pendaftaran di Azure Active Directory B2C (AAD B2C). Anda akan mendapatkan kota pengguna, mengonfigurasinya sebagai drop-down, dan menentukan apakah kota tersebut harus disediakan.

Penting

Sampel ini menggunakan klaim bawaan 'kota'. Sebagai gantinya, Anda dapat memilih salah satu atribut bawaan AAD B2C yang didukung atau atribut kustom. Untuk menggunakan atribut kustom, aktifkan atribut kustom. Untuk menggunakan atribut bawaan atau kustom yang berbeda, ganti 'kota' dengan atribut pilihan Anda, misalnya atribut bawaan jobTitle atau atribut khusus seperti extension_loyaltyId.

Prasyarat

Buat alur pengguna agar pengguna dapat mendaftar dan masuk ke aplikasi Anda.
Daftarkan aplikasi web.

Selesaikan langkah-langkah dalam Memulai dengan kebijakan kustom di Active Directory B2C
Daftarkan aplikasi web.

Tambahkan atribut pengguna alur pengguna Anda

Masuk ke portal Azure.
Jika Anda memiliki akses ke beberapa penyewa, pilih ikon Pengaturan di menu atas untuk beralih ke penyewa Azure AD B2C Anda dari menu Direktori + langganan.
Di bagian Layanan Azure, pilih Azure AD B2C. Atau gunakan kotak pencarian untuk menemukan dan memilih Azure AD B2C.
Di penyewa AAD B2C Anda, pilih Alur pengguna.
Pilih kebijakan Anda (misalnya, "B2C_1_SignupSignin") untuk membukanya.
Pilih Atribut pengguna lalu pilih atribut pengguna (misalnya, "Kota").
Pilih Simpan.

Menyediakan klaim opsional ke aplikasi

Klaim aplikasi adalah nilai yang dikembalikan ke aplikasi. Perbarui alur pengguna Anda untuk memuat klaim yang diinginkan.

Pilih kebijakan Anda (misalnya, "B2C_1_SignupSignin") untuk membukanya.
Pilih Klaim aplikasi.
Pilih atribut yang ingin Anda kirim kembali ke aplikasi Anda (misalnya, "Kota").
Pilih Simpan.

Mengonfigurasi jenis input atribut pengguna

Pilih kebijakan Anda (misalnya, "B2C_1_SignupSignin") untuk membukanya.
Pilih Tata letak halaman.
Pilih Halaman pendaftaran akun lokal.
Di bawah Atribut pengguna, pilih Kota.
1. Di drop-down Opsional, pilih Tidak.
2. Di Jenis input pengguna, pilih jenis input pengguna saat ini, seperti TextBox, untuk membuka panel jendela Editor jenis input pengguna.
3. Di drop-down Jenis input pengguna, pilih DropdownSingleSelect.
4. Di Teks dan Nilai, masukkan pasangan teks dan nilai yang membentuk kumpulan respons Anda untuk atribut tersebut. Teks ditampilkan di antarmuka web untuk alur Anda, dan Nilai disimpan ke Azure Active Directory B2C untuk Teks yang dipilih. Opsional: Gunakan tombol "Naik/turun" untuk mengurutkan ulang item dropdown.
Pilih OK. Opsional: Gunakan tombol "Naik/turun" untuk mengurutkan ulang atribut pengguna di halaman pendaftaran.
Pilih Simpan.

Menyediakan daftar nilai dengan menggunakan kumpulan yang dilokalkan

Untuk menyediakan daftar nilai yang diatur untuk atribut kota:

Aktifkan penyesuaian bahasa komputer pada alur pengguna
Pilih kebijakan Anda (misalnya, "B2C_1_SignupSignin") untuk membukanya.
Pada halaman Bahasa untuk alur pengguna, pilih bahasa yang ingin Anda kustomisasi.
Di bagian File sumber daya tingkat halaman, pilih Halaman pendaftaran akun lokal.
Pilih Unduh default(atau Unduh overrides jika Anda sebelumnya telah mengedit bahasa ini).
Buat atribut LocalizedCollections.

LocalizedCollections adalah array dari pasangan Name dan Value. Urutan untuk item akan menjadi urutan yang ditampilkan.

ElementId adalah atribut pengguna yang direspons oleh atribut LocalizedCollections ini.
Name adalah nilai yang ditunjukkan kepada pengguna.
Value adalah apa yang dikembalikan dalam klaim saat opsi ini dipilih.

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

Mengunggah perubahan Anda

Setelah Anda menyelesaikan perubahan pada file JSON Anda, kembali ke penyewa B2C Anda.
Pilih Alur pengguna dan pilih kebijakan Anda (misalnya, "B2C_1_SignupSignin") untuk membukanya.
Pilih Bahasa.
Pilih bahasa yang ingin Anda terjemahkan.
Di bawah File sumber daya tingkat halaman, pilih Halaman pendaftaran akun lokal.
Pilih ikon folder, lalu pilih file JSON yang akan diunggah. Perubahan disimpan ke alur pengguna Anda secara otomatis.

Menguji alur pengguna Anda

Pilih kebijakan Anda (misalnya, "B2C_1_SignupSignin") untuk membukanya.
Untuk menguji kebijakan Anda, pilih Jalankan alur pengguna.
Untuk Aplikasi, pilih aplikasi web bernama testapp1 yang Anda daftarkan sebelumnya. URL Balasan harus menunjukkan https://jwt.ms.
Klik Jalankan alur pengguna

Gambaran Umum

Anda dapat mengumpulkan data awal dari pengguna dengan menggunakan perjalanan pendaftaran atau rincian masuk. Klaim tambahan dapat dikumpulkan nanti dengan menggunakan perjalanan edit profil. Setiap kali Azure AD B2C mengumpulkan informasi langsung dari pengguna secara interaktif, ini menggunakan profil teknis yang ditegaskan sendiri. Dalam sampel ini, Anda:

Menentukan klaim "kota".
Menanyakan kote mereka kepada pengguna.
Menetapkan kota ke profil pengguna di direktori AAD B2C.
Membaca klaim kota dari direktori AAD B2C pada setiap rincian masuk.
Mengembalikan kota ke aplikasi pihak yang mengandalkan Anda setelah rincian masuk atau pendaftaran.

Menentukan klaim

Klaim menyediakan penyimpanan data sementara selama eksekusi kebijakan AAD B2C. Skema klaim adalah tempat di mana Anda menyatakan klaim Anda. Elemen berikut digunakan untuk menentukan klaim:

DisplayName - String yang mendefinisikan label yang berhubungan dengan pengguna.
DataType - Jenis klaim.
UserHelpText - Membantu pengguna memahami apa yang diperlukan.
UserInputType - Jenis kontrol input, seperti kotak teks, pemilihan radio, daftar menurun, atau beberapa pilihan.

Buka file ekstensi kebijakan Anda. Contohnya, SocialAndLocalAccounts/TrustFrameworkExtensions.xml.

Cari elemen BuildingBlocks. Jika elemen tersebut tidak ada, tambahkan.
Temukan elemen ClaimsSchema. Jika elemen tersebut tidak ada, tambahkan.
Tambahkan klaim kota ke elemen ClaimsSchema.

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

Sertakan atribut SelectByDefault di elemen Enumeration untuk membuatnya dipilih secara default saat halaman pertama kali dibuat. Misalnya, untuk memilih item London sebelumnya, ubah elemen Enumeration sebagai contoh berikut:

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

Menambahkan klaim ke antarmuka pengguna

Profil teknis berikut dibuat sendiri, dipanggil ketika pengguna diharapkan untuk memberikan input:

LocalAccountSignUpWithLogonEmail - Alur pendaftaran akun lokal.
SelfAsserted-Social - Rincian masuk pengguna pertama kali akun Federasi.
SelfAsserted-ProfileUpdate - Edit alur profil.

Untuk mengumpulkan klaim kota selama pendaftaran, kota harus ditambahkan sebagai klaim output ke profil teknis LocalAccountSignUpWithLogonEmail. Ambil alih profil teknis ini dalam file ekstensi. Tentukan seluruh daftar klaim output untuk mengontrol urutan klaim yang disajikan di layar. Temukan elemen ClaimsProviders. Tambahkan ClaimsProvider baru sebagai berikut:

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

Untuk mengumpulkan klaim kota setelah rincian masuk awal dengan akun terfederasi, kota harus ditambahkan sebagai klaim output ke profil teknis SelfAsserted-Social. Agar pengguna akun lokal dan terfederasi dapat mengedit data profil mereka nanti, tambahkan klaim input dan output ke profil teknis SelfAsserted-ProfileUpdate. Ambil alih profil teknis ini dalam file ekstensi. Tentukan seluruh daftar klaim output untuk mengontrol urutan klaim yang disajikan di layar. Temukan elemen ClaimsProviders. Tambahkan ClaimsProvider baru sebagai berikut:

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

Membaca dan menulis klaim

Profil teknis berikut adalah profil teknis Direktori Aktif, yang membaca dan menulis data ke ID Microsoft Entra.
Gunakan PersistedClaims untuk menulis data ke profil pengguna dan OutputClaims untuk membaca data dari profil pengguna dalam profil teknis Direktori Aktif masing-masing.

Ambil alih profil teknis ini dalam file ekstensi. Temukan elemen ClaimsProviders. Tambahkan ClaimsProvider baru sebagai berikut:

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

Sertakan klaim dalam token

Untuk mengembalikan klaim kota kembali ke aplikasi pihak yang mengandalkan, tambahkan klaim output ke file SocialAndLocalAccounts/SignUpOrSignIn.xml. Klaim output akan ditambahkan ke dalam token setelah perjalanan yang berhasil, dan akan dikirim ke aplikasi. Ubah elemen profil teknis dalam bagian pihak yang mengandalkan untuk menambahkan kota sebagai klaim output.

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

Unggah dan uji kebijakan kustom termutakhir Anda

Jika Anda memiliki akses ke beberapa penyewa, pilih ikon Pengaturan di menu atas untuk beralih ke penyewa Azure AD B2C Anda dari menu Direktori + langganan.
Cari dan pilih Azure AD B2C.
Di bagian Kebijakan, pilih IEF.
Pilih Unggah kebijakan kustom.
Unggah file kebijakan yang sebelumnya Anda ubah.

Menguji kebijakan kustom

Pilih kebijakan pihak yang mengandalkan Anda, misalnya B2C_1A_signup_signin.
Untuk Aplikasi, pilih aplikasi web yang Anda daftarkan sebelumnya. URL Balasan harus menunjukkan https://jwt.ms.
Pilih tombol Jalankan sekarang.
Dari halaman pendaftaran atau masuk, pilih Daftar sekarang untuk mendaftar. Selesai memasukkan informasi pengguna termasuk nama kota, lalu klik Buat. Anda akan melihat isi token yang dikembalikan.

Layar pendaftaran harus terlihat mirip dengan tangkapan layar berikut:

Screenshot of modified sign-up option

Token yang dikirim kembali ke aplikasi Anda termasuk klaim 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"
  ...
}

[Opsional] Melokalkan antarmuka pengguna

Azure AD B2C memungkinkan Anda mengakomodasi kebijakan ke bahasa yang berbeda. Untuk informasi selengkapnya, pelajari tentang menyesuaikan pengalaman bahasa. Untuk melokalkan halaman pendaftaran, siapkan daftar bahasa yang didukung, dan sediakan label khusus bahasa.

Catatan

Saat menggunakan LocalizedCollection dengan label khusus bahasa, Anda dapat menghapus koleksi Restriction dari definisi klaim.

Contoh berikut menunjukkan cara memberikan daftar kota untuk bahasa Inggris dan Spanyol. Keduanya menetapkan Restrictionkumpulan kota klaim dengan daftar item untuk bahasa Inggris dan Spanyol. SelectByDefault membuat item dipilih secara default saat halaman pertama kali dimuat.

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

Setelah Anda menambahkan elemen pelokalan, edit definisi konten dengan pelokalan. Pada contoh berikut, sumber daya pelokalan kustom bahasa Inggris (en) dan Spanyol (es) ditambahkan ke halaman pendaftaran:

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

Langkah berikutnya

Pelajari selengkapnya tentang elemen ClaimsSchema dalam referensi IEF.
Pelajari cara menggunakan atribut kustom di AAD B2C.

Menambahkan atribut pengguna dan menyesuaikan input pengguna di Azure Active Directory B2C

Prasyarat

Tambahkan atribut pengguna alur pengguna Anda

Menyediakan klaim opsional ke aplikasi

Mengonfigurasi jenis input atribut pengguna

Menyediakan daftar nilai dengan menggunakan kumpulan yang dilokalkan

Mengunggah perubahan Anda

Menguji alur pengguna Anda

Gambaran Umum

Menentukan klaim

Menambahkan klaim ke antarmuka pengguna

Membaca dan menulis klaim

Sertakan klaim dalam token

Unggah dan uji kebijakan kustom termutakhir Anda

Menguji kebijakan kustom

[Opsional] Melokalkan antarmuka pengguna

Langkah berikutnya

Langkah berikutnya

Sumber Daya Tambahan: