Bagikan melalui

Menyesuaikan antarmuka pengguna di Azure Active Directory B2C

  • Artikel

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.

Memberikan merek dan menyesuaikan antarmuka pengguna yang ditampilkan Azure Active Directory B2C (Azure AD B2C) kepada pelanggan akan membantu memberikan pengalaman pengguna yang mulus dalam aplikasi Anda. Pengalaman ini termasuk pada proses mendaftar, masuk, pengeditan profil, dan mereset kata sandi. Dalam artikel ini, Anda mengkustomisasi halaman Azure AD B2C Anda menggunakan templat halaman, dan pencitraan merek perusahaan.

Tip

Untuk mengkustomisasi aspek lain dari halaman alur pengguna Anda di luar templat halaman, logo banner, gambar latar belakang, atau warna latar belakang, lihat cara mengkustomisasi UI dengan template HTML.

Prasyarat

Gambaran Umum

Azure AD B2C menyediakan beberapa templat bawaan yang dapat Anda pilih untuk memberikan tampilan profesional pada halaman pengalaman pengguna Anda. Templat halaman ini juga dapat dan berfungsi sebagai titik awal untuk kustomisasi Anda sendiri, menggunakan fitur branding perusahaan.

Catatan

Browser yang didukung untuk template Klasik mencakup versi Internet Explorer saat ini dan sebelumnya, Microsoft Edge, Google Chrome, Mozilla Firefox, dan Safari. Template Ocean Blue dan Slate Gray mungkin memiliki dukungan terbatas dengan versi browser yang lebih lama, seperti Internet Explorer 11 dan 10; kami sarankan Anda menguji aplikasi Anda dengan browser yang ingin Anda dukung.

Ocean Blue

Contoh templat Ocean Blue yang dirender pada halaman pendaftaran dan masuk:

Ocean Blue template screenshot

Slate Gray

Contoh templat Slate Gray yang dirender pada halaman masuk pendaftaran:

Slate Gray template screenshot

Klasik

Contoh templat Classic yang dirender pada halaman masuk pendaftaran:

Classic template screenshot

Merek perusahaan

Anda dapat menyesuaikan halaman Azure AD B2C Anda dengan logo banner, gambar latar belakang, dan warna latar belakang dengan menggunakan branding Microsoft Entra ID Company. Branding perusahaan termasuk mendaftar, masuk, pengeditan profil, dan reset kata sandi.

Contoh berikut memperlihatkan halaman Daftar dan masuk dengan logo kustom, gambar latar belakang, menggunakan templat Ocean Blue:

Branded sign-up/sign-in page served by Azure AD B2C

Memilih templat halaman

  1. Masuk ke portal Azure.
  2. 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.
  3. Di portal Microsoft Azure, cari dan pilih AAD B2C.
  4. Pilih Alur pengguna.
  5. Pilih alur pengguna yang ingin Anda kustomisasi.
  6. Di bawah Kustomisasi di menu kiri, pilih Tata letak halaman lalu pilih Templat. Template selection drop-down in user flow page of Azure portal

Saat Anda memilih templat, templat yang dipilih diterapkan ke semua halaman di alur pengguna Anda. URI untuk setiap halaman terlihat di bidang halaman kustom URI.

Untuk memilih templat halaman, atur LoadUri elemen definisi konten. Contoh berikut menunjukkan pengidentifikasi definisi konten dan yang sesuai LoadUri.

Ocean Blue:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Slate Gray:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/MSA/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/MSA/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/MSA/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Klasik:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/default/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/default/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/default/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Mengonfigurasi merek perusahaan

Untuk mengkustomisasi halaman alur pengguna, Anda terlebih dahulu mengonfigurasi branding perusahaan di ID Microsoft Entra, lalu mengaktifkannya di alur pengguna di Azure AD B2C.

Mulailah dengan mengatur logo spanduk, gambar latar belakang, dan warna latar belakang dalam branding Perusahaan.

  1. Masuk ke portal Azure.
  2. 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.
  3. Di portal Microsoft Azure, cari dan pilih AAD B2C.
  4. Di bawah Kelola, pilih Branding perusahaan.
  5. Ikuti langkah-langkah dalam Menambahkan branding ke halaman masuk Microsoft Entra organisasi Anda.

Ingatlah hal-hal ini saat Anda mengonfigurasi branding perusahaan di Azure AD B2C:

  • Branding perusahaan di Azure AD B2C saat ini terbatas pada gambar latar belakang,, logo banner, dan kustomisasi warna latar belakang. Properti lain di panel merek perusahaan, misalnya, Pengaturan tingkat lanjut, tidak didukung.
  • Di halaman alur pengguna Anda, warna latar belakang ditampilkan sebelum gambar latar belakang dimuat. Kami sarankan Anda memilih warna latar belakang yang sangat cocok dengan warna dalam gambar latar belakang Anda untuk pengalaman pemuatan yang lebih lancar.
  • Logo banner muncul di surel verifikasi yang dikirimkan kepada pengguna Anda saat mereka memulai alur pengguna pendaftaran.

Mengaktifkan pencitraan perusahaan di halaman alur pengguna

Setelah Anda mengonfigurasi branding perusahaan, aktifkan dalam alur pengguna Anda.

  1. Di menu kiri portal Microsoft Azure, pilih Azure AD B2C.
  2. Di bawah Kebijakan, pilih Alur pengguna (kebijakan).
  3. Pilih alur pengguna yang ingin Anda aktifkan branding perusahaannya. Branding perusahaan tidak didukung untuk jenis alur pengguna pengeditan Profil standar dan masuk standar.
  4. Di bawahKustomisasi, pilih Tata letak halaman, lalu pilih halaman yang ingin Anda merek. Misalnya, pilih Halaman pendaftaran atau masuk terpadu.
  5. Untuk Versi Tata Letak Halaman (Pratinjau), pilih versi 1.2.0 atau lebih tinggi.
  6. Pilih Simpan.

Jika Anda ingin memberi merek semua halaman dalam alur pengguna, atur versi tata letak halaman untuk setiap tata letak halaman di alur pengguna.

Page layout selection in Azure AD B2C in the Azure portal.

Aktifkan branding perusahaan di halaman kebijakan kustom

Setelah Anda mengonfigurasi branding perusahaan, aktifkan dalam alur pengguna Anda. konfigurasikan versi tata letak halaman dengan versi contract halaman untuk semua definisi konten dalam kebijakan kustom Anda. Format nilai harus berisi kata contract : urn:com:microsoft:aad:b2c:elements:contract:page-name:version. Untuk menentukan tata letak halaman dalam kebijakan kustom Anda yang menggunakan nilai DataUri lama. Untuk informasi selengkapnya, pelajari cara melakukan migrasi ke tata letak halaman dengan versi halaman.

Contoh berikut menunjukkan definisi konten dengan kontrak halaman yang sesuai, dan templat halaman Ocean Blue:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

Mengatur ulang bidang input dalam formulir pendaftaran

Untuk menyusun ulang bidang input pada halaman pendaftaran untuk formulir akun lokal, ikuti langkah-langkah berikut:

  1. Masuk ke portal Azure.
  2. 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.
  3. Di portal Microsoft Azure, cari dan pilih AAD B2C.
  4. Di menu sebelah kiri, pilih Alur pengguna.
  5. Pilih alur pengguna (hanya untuk akun lokal) yang ingin Anda atur ulang bidang inputnya.
  6. Di menu sebelah kiri, pilih Tata letak halaman
  7. Di tabel, pilih baris Halaman pendaftaran akun lokal.
  8. Di bawah Atribut pengguna, pilih bidang input yang ingin Anda susun ulang, dan seret (ke atas atau ke bawah) dan jatuhkan atau gunakan kontrol Pindah ke Atas atau Pindah ke bawah untuk mencapai urutan yang diinginkan.
  9. Di bagian atas halaman, pilih Simpan.

Template selection drop-down in user flow page of Azure portal.

Langkah berikutnya

Temukan informasi selengkapnya tentang cara mengkustomisasi antarmuka pengguna aplikasi Anda di Mengkustomisasi antarmuka pengguna aplikasi Anda di Azure Active Directory B2C.