Mengaktifkan versi tata letak halaman dan JavaScript di Azure Active Directory B2C

Artikel
10/27/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.

Dengan template HTML Azure Active Directory B2C (Azure AD B2C), Anda dapat membuat pengalaman identitas pengguna. Template HTML Anda hanya boleh berisi tag dan atribut HTML tertentu. Tag HTML dasar, seperti <b>, <i>, <u>, <h1>, dan <hr> diizinkan. Tag tingkat lanjut lainnya seperti <skrip, dan <iframe> dihapus karena alasan keamanan tetapi <script> tag harus ditambahkan dalam <head> tag.>

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 tag serta atribut HTML lanjutan:

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

Memilih 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 Memulai dengan kebijakan kustom di Active Directory B2C
Daftarkan aplikasi web.

Mulai menyiapkan versi tata letak halaman

Jika Anda bermaksud mengaktifkan kode sisi klien JavaScript, elemen yang Anda dasari javascript Anda harus tidak dapat diubah. Jika dapat diubah, perubahan apa pun dapat menyebabkan perilaku tak terduga di halaman pengguna Anda. Untuk mencegah masalah ini, terapkan penggunaan tata letak halaman dan tentukan versi tata letak halaman untuk memastikan definisi konten yang Anda tetapkan pada JavaScript tidak dapat diubah. Bahkan jika Anda tidak bermaksud mengaktifkan JavaScript, Anda dapat menentukan versi tata letak halaman untuk halaman Anda.

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

Di penyewa AAD B2C Anda, pilih Alur pengguna.
Pilih kebijakan Anda (misalnya, "B2C_1_SignupSignin") untuk membukanya.
Pilih Tata letak halaman. Pilih Nama tatak letak0, dan kemudian pilih Versi Tata Letak Halaman.

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

Page layout settings in portal showing page layout version dropdown

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

Contoh berikut menunjukkan pengidentifikasi definisi konten dan DataUri terkait dengan kontrak halaman:

<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 aliran pengguna, Anda dapat mengaktifkan JavaScript. Mengaktifkan JavaScript juga memberlakukan penggunaan tata letak halaman. Anda kemudian dapat set versi tata letak halaman untuk alur pengguna seperti yang dijelaskan di bagian berikutnya.

User flow properties page with Enable JavaScript setting highlighted

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 Menggunakan JavaScript:

Jangan:
- mengikat peristiwa klik pada elemen HTML <a>.
- mengambil dependensi pada kode atau komentar Azure AD B2C.
- mengubah urutan atau hierarki elemen HTML Azure AD B2C. Gunakan kebijakan Azure AD B2C untuk mengontrol urutan elemen antar muka pengguna.
Anda dapat memanggil layanan RESTful apa pun dengan pertimbangan berikut:
- Anda mungkin perlu set CORS layanan RESTful Anda untuk mengizinkan panggilan HTTP pihak 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 antar muka pengguna saat ini. Jangan ubah nilai objek ini.
Untuk mengkustomisasi pesan kesalahan Azure AD B2C, gunakan lokalisasi dalam kebijakan.
Jika ada yang dapat dicapai dengan menggunakan kebijakan, umumnya itu adalah cara yang direkomendasikan.
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

Tampilkan atau sembunyikan kata sandi

Cara umum untuk membantu pelanggan Anda dengan kesuksesan 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. Bidang kata sandi tipe apa pun memiliki kotak centang dengan label Perlihatkan 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 yang ditegaskan sendiri:

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 Anda di mana 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 link di bagian bawah halaman yang dinyatakan sendiri, 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 link ke kebijakan privasi dan ketentuan penggunaan organisasi Anda.

Langkah berikutnya

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

Bagikan melalui