Mengaktifkan Versi tata letak JavaScript dan halaman 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.

Dengan templat HTML Azure Active Directory B2C (Azure AD B2C), Anda dapat membuat pengalaman identitas pengguna Anda. Templat HTML Anda hanya dapat berisi tag dan atribut HTML tertentu. Tag HTML dasar, seperti <b>, <i>, <u>, <h1>, dan <jam> diizinkan. Tag tingkat lanjut lainnya seperti <skrip, dan >iframe< dihapus karena alasan keamanan tetapi > tag harus ditambahkan dalam <script> tag.<head> Dari tata letak halaman selfasserted versi 2.1.21 / unifiedssp versi 2.1.10 / multifaktor versi 1.2.10 dan seterusnya B2C tidak mendukung penambahan skrip dalam <body> tag (karena ini dapat menimbulkan risiko untuk serangan skrip lintas situs). Memigrasikan skrip yang ada dari <body> ke <head> mungkin terkadang memerlukan penulisan ulang skrip yang ada dengan pengamat mutasi untuk bekerja dengan baik.

Tag <script> harus ditambahkan dalam tag dengan <head> dua cara:

defer Menambahkan atribut, yang menentukan bahwa skrip diunduh secara paralel untuk mengurai halaman, maka skrip dijalankan setelah halaman selesai mengurai:
```
 <script src="my-script.js" defer></script>
```
async Menambahkan atribut yang menentukan bahwa skrip diunduh secara paralel untuk mengurai halaman, maka skrip dijalankan segera setelah tersedia (sebelum penguraian selesai):
```
 <script src="my-script.js" async></script>	
```

Untuk mengaktifkan JavaScript dan memajukan tag dan atribut HTML:

Pilih tata letak halaman
Mengaktifkannya pada alur pengguna dengan menggunakan portal Microsoft Azure
Menggunakan b2clogin.com dalam permintaan Anda

Pilih tata letak halaman
Menambahkan elemen ke kebijakan kustom Anda
Menggunakan b2clogin.com dalam permintaan Anda

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.

Mulai menyiapkan versi tata letak halaman

Jika Anda ingin mengaktifkan kode sisi klien JavaScript, elemen tempat Anda mendasarkan JavaScript Anda harus tidak dapat diubah. Jika tidak dapat diubah, perubahan apa pun dapat menyebabkan perilaku tak terduga di halaman pengguna Anda. Untuk mencegah masalah ini, tertibkan penggunaan tata letak halaman dan tentukan versi tata letak halaman untuk memastikan definisi konten yang Anda gunakan berdasarkan JavaScript Anda tidak dapat diubah. Bahkan jika Anda tidak berniat mengaktifkan JavaScript, Anda dapat menentukan versi tata letak halaman untuk halaman Anda.

Untuk menentukan versi tata letak halaman untuk halaman alur pengguna Anda:

Pada tenant Azure AD B2C Anda, pilih Alur pengguna.
Pilih kebijakan Anda (misalnya, "B2C_1_SignupSignin") untuk membukanya.
Pilih Tata letak halaman. Pilih Nama tata letak, lalu pilih Versi Tata Letak Halaman.

Untuk informasi tentang versi tata letak halaman yang berbeda, lihat log perubahan versi tata letak halaman.

Pengaturan tata letak halaman di portal memperlihatkan dropdown versi tata letak halaman

Untuk menentukan versi tata letak halaman untuk halaman kebijakan kustom Anda:

Pilih tata letak halaman untuk elemen antarmuka pengguna aplikasi Anda.
Tentukan 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.

Contoh berikut menunjukkan pengidentifikasi definisi konten dan DataUri yang terkait dengan kontrak halaman tersebut.

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

Aktifkan JavaScript

Di Properti alur pengguna, Anda dapat mengaktifkan JavaScript. Mengaktifkan JavaScript juga memberlakukan penggunaan tata letak halaman. Anda kemudian dapat mengatur versi tata letak halaman untuk alur pengguna seperti yang dijelaskan di bagian berikutnya.

Halaman properti alur pengguna dengan pengaturan Aktifkan JavaScript disorot

Anda mengaktifkan eksekusi skrip dengan menambahkan elemen ScriptExecution ke elemen RelyingParty .

Buka file kebijakan kustom Anda. Misalnya, SignUpOrSignin.xml.

Tambahkan elemen ScriptExecution ke elemen RelyingParty :

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <UserJourneyBehaviors>
    <ScriptExecution>Allow</ScriptExecution>
  </UserJourneyBehaviors>
  ...
</RelyingParty>

Simpan dan unggah file.

Panduan untuk menggunakan JavaScript

Ikuti panduan ini saat Anda menyesuaikan antarmuka aplikasi Anda menggunakan JavaScript:

Jangan:
- mengikat peristiwa klik pada <a> elemen HTML.
- mengambil ketergantungan pada kode atau komentar di Azure AD B2C.
- ubah urutan atau hierarki elemen HTML Azure AD B2C. Gunakan kebijakan Azure AD B2C untuk mengontrol urutan elemen UI.
Anda dapat memanggil layanan RESTful apa pun dengan pertimbangan berikut:
- Anda mungkin perlu mengatur CORS layanan RESTful Anda untuk memungkinkan panggilan HTTP sisi klien.
- Pastikan layanan RESTful Anda aman dan hanya menggunakan protokol HTTPS.
- Jangan gunakan JavaScript secara langsung untuk memanggil titik akhir Azure AD B2C.
Anda dapat menyematkan JavaScript atau Anda dapat menautkan ke file JavaScript eksternal. Saat menggunakan file JavaScript eksternal, pastikan untuk menggunakan URL absolut dan bukan URL relatif.
Kerangka kerja JavaScript:
- Azure AD B2C menggunakan versi jQuery tertentu. Jangan sertakan versi lain dari jQuery. Menggunakan lebih dari satu versi pada halaman yang sama menyebabkan masalah.
- Menggunakan RequireJS tidak didukung.
- Sebagian besar kerangka kerja JavaScript tidak didukung oleh Azure AD B2C.
Pengaturan Azure AD B2C dapat dibaca dengan memanggil window.SETTINGS, window.CONTENT objek, seperti bahasa UI saat ini. Jangan ubah nilai objek ini.
Untuk mengkustomisasi pesan kesalahan Azure AD B2C, gunakan pelokalan dalam kebijakan.
Jika ada yang dapat dicapai dengan menggunakan kebijakan, umumnya itu adalah cara yang disarankan.
Kami menyarankan agar Anda menggunakan kontrol UI kami yang ada, seperti tombol, daripada menyembunyikannya dan menerapkan pengikatan klik pada kontrol UI Anda sendiri. Pendekatan ini memastikan bahwa pengalaman pengguna Anda terus berfungsi dengan baik bahkan ketika kami merilis peningkatan kontrak halaman baru.

Sampel JavaScript

Perlihatkan atau sembunyikan kata sandi

Cara umum untuk membantu pelanggan Anda dengan keberhasilan pendaftaran mereka adalah dengan memungkinkan mereka melihat apa yang telah mereka masukkan sebagai kata sandi mereka. Opsi ini membantu pengguna mendaftar dengan memungkinkan mereka untuk dengan mudah melihat dan membuat koreksi pada kata sandi mereka jika diperlukan. Setiap bidang jenis kata sandi memiliki kotak centang dengan label Tampilkan kata sandi . Ini memungkinkan pengguna untuk melihat kata sandi dalam teks biasa. Sertakan cuplikan kode ini ke dalam templat pendaftaran atau masuk Anda untuk halaman dengan pernyataan diri.

function makePwdToggler(pwd){
  // Create show-password checkbox
  var checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  var id = pwd.id + 'toggler';
  checkbox.setAttribute('id', id);

  var label = document.createElement('label');
  label.setAttribute('for', id);
  label.appendChild(document.createTextNode('show password'));

  var div = document.createElement('div');
  div.appendChild(checkbox);
  div.appendChild(label);

  // Add show-password checkbox under password input
  pwd.insertAdjacentElement('afterend', div);

  // Add toggle password callback
  function toggle(){
    if(pwd.type === 'password'){
      pwd.type = 'text';
    } else {
      pwd.type = 'password';
    }
  }
  checkbox.onclick = toggle;
  // For non-mouse usage
  checkbox.onkeydown = toggle;
}

function setupPwdTogglers(){
  var pwdInputs = document.querySelectorAll('input[type=password]');
  for (var i = 0; i < pwdInputs.length; i++) {
    makePwdToggler(pwdInputs[i]);
  }
}

setupPwdTogglers();

Menambahkan ketentuan penggunaan

Sertakan kode berikut ke halaman tempat Anda ingin menyertakan kotak centang Ketentuan Penggunaan . Kotak centang ini biasanya diperlukan di halaman pendaftaran akun lokal dan pendaftaran akun sosial Anda.

function addTermsOfUseLink() {
    // find the terms of use label element
    var termsOfUseLabel = document.querySelector('#api label[for="termsOfUse"]');
    if (!termsOfUseLabel) {
        return;
    }

    // get the label text
    var termsLabelText = termsOfUseLabel.innerHTML;

    // create a new <a> element with the same inner text
    var termsOfUseUrl = 'https://learn.microsoft.com/legal/termsofuse';
    var termsOfUseLink = document.createElement('a');
    termsOfUseLink.setAttribute('href', termsOfUseUrl);
    termsOfUseLink.setAttribute('target', '_blank');
    termsOfUseLink.appendChild(document.createTextNode(termsLabelText));

    // replace the label text with the new element
    termsOfUseLabel.replaceChild(termsOfUseLink, termsOfUseLabel.firstChild);
}

Dalam kode, ganti termsOfUseUrl dengan tautan ke perjanjian ketentuan penggunaan Anda. Untuk direktori Anda, buat atribut pengguna baru yang disebut termsOfUse lalu sertakan termsOfUse sebagai atribut pengguna.

Atau, Anda dapat menambahkan tautan di bagian bawah halaman self-asserted, tanpa menggunakan JavaScript. Gunakan pelokalan berikut:

<LocalizedResources Id="api.localaccountsignup.en">
  <LocalizedStrings>
    <!-- The following elements will display a link at the bottom of the page. -->
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_text">Terms of use</LocalizedString>
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_url">termsOfUseUrl</LocalizedString>
    </LocalizedStrings>
</LocalizedResources>

Ganti termsOfUseUrl dengan tautan ke kebijakan privasi dan ketentuan penggunaan organisasi Anda.

Langkah selanjutnya

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

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-05-03