Mengkustomisasi antarmuka pengguna di Azure Active Directory B2C

Penting

Berlaku mulai 1 Mei 2025, Azure AD B2C tidak akan lagi tersedia untuk dibeli untuk pelanggan baru. Pelajari lebih lanjut di FAQ kami.

Sebelum memulai, gunakan pemilih Pilih jenis kebijakan di bagian atas halaman ini 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.

Mencitrakan dan menyesuaikan antarmuka pengguna yang ditampilkan Azure Active Directory B2C (Azure AD B2C) kepada pelanggan Anda, membantu memberikan pengalaman pengguna yang mulus di aplikasi Anda. Pengalaman ini termasuk mendaftar, masuk, pengeditan profil, dan pengaturan ulang kata sandi. Dalam artikel ini, Anda mengkustomisasi halaman Azure AD B2C menggunakan templat halaman, dan branding perusahaan.

Petunjuk / Saran

Untuk menyesuaikan 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 templat HTML.

Prasyarat

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

• Selesaikan langkah-langkah dalam Mulai menggunakan kebijakan kustom di Active Directory B2C. Tutorial ini memandu Anda cara memperbarui file kebijakan kustom untuk menggunakan konfigurasi penyewa Azure AD B2C Anda.
• Daftarkan aplikasi web.

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 .

Nota

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

Biru Laut

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

Abu-abu Tua

Contoh templat Slate Gray yang dirender pada halaman masuk pendaftaran:

Klasik

Contoh templat Klasik yang dirender pada halaman masuk pendaftaran:

Branding perusahaan

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

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

Pilih 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 sebelah kiri, pilih Tata letak halaman lalu pilih Templat.

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

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

Biru Laut:

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

Abu-abu Batu Sabak

<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 banner, 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 penyesuaian 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 di gambar latar belakang Anda untuk pengalaman pemuatan yang lebih halus.
• Logo banner muncul di email verifikasi yang dikirim ke pengguna Anda saat mereka memulai alur pengguna pendaftaran.

Mengaktifkan branding perusahaan di halaman alur pengguna

Setelah mengonfigurasi branding perusahaan, aktifkan pada alur pengguna Anda.

1. Di menu sebelah 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 standar Masuk dan standar Pengeditan Profil.
4. Di bawah Kustomisasi, pilih Tata letak halaman, lalu pilih halaman yang ingin Anda mereki. 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 dalam alur pengguna.

Mengaktifkan branding perusahaan di halaman kebijakan kustom

Setelah Anda mengonfigurasi branding perusahaan, aktifkan dalam kebijakan kustom Anda. Konfigurasikan versi tata letak halaman dengan versi halaman contract untuk semua definisi konten dalam kebijakan kustom Anda. Format nilai harus berisi string 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 bermigrasi ke tata letak halaman dengan versi tampilan 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. Dalam 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.

Konten terkait

Temukan informasi selengkapnya tentang bagaimana Anda dapat menyesuaikan antarmuka pengguna aplikasi Anda di Menyesuaikan antarmuka pengguna aplikasi Anda di Azure Active Directory B2C.