Share via

Pengalaman pendaftaran atau masuk yang disematkan

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

Fitur ini tersedia hanya untuk kebijakan kustom. Untuk langkah-langkah penyiapan, pilih Kebijakan kustom dalam pemilih sebelumnya.

Untuk pengalaman pendaftaran atau proses masuk yang lebih mudah, Anda dapat menghindari mengalihkan pengguna ke halaman pendaftaran atau masuk terpisah atau menghasilkan jendela pop-up. Dengan menggunakan elemen HTML <iframe> bingkai sebaris, Anda dapat menyematkan antarmuka pengguna masuk Azure AD B2C langsung ke aplikasi web Anda.

Tip

Gunakan elemen HTML <iframe> untuk menyematkan kebijakan kustom daftar atau masuk, edit profil, atau ubah kata sandi ke dalam web atau aplikasi halaman tunggal Anda.

Catatan

Fitur ini berada dalam pratinjau publik.

Aplikasi web disematkan masuk

Elemen bingkai sebaris <iframe> digunakan untuk menyematkan dokumen di halaman web HTML5. Anda bisa menggunakan elemen iframe untuk menyematkan antarmuka pengguna masuk Azure AD B2C langsung ke aplikasi web Anda, seperti yang ditunjukkan dalam contoh berikut:

Login with hovering DIV experience

Saat menggunakan iframe, pertimbangkan hal berikut:

  • Daftar atau masuk yang disematkan hanya mendukung akun lokal. Sebagian besar IdP sosial (misalnya, Google dan Facebook) memblokir halaman masuk mereka agar tidak dirender dalam bingkai sebaris.
  • Browser tertentu, seperti Safari atau Chrome dalam mode penyamaran, melihat cookie sesi Azure AD B2C dalam iframe sebagai cookie pihak ketiga. Browser ini dapat memblokir atau menghapus cookie ini, yang dapat menyebabkan pengalaman pengguna yang kurang optimal. Untuk mencegah masalah ini, pastikan nama domain aplikasi dan domain Azure AD B2C Anda memiliki asal yang sama. Untuk menggunakan asal yang sama, aktifkan domain kustom untuk penyewa Azure AD B2C, lalu konfigurasikan aplikasi web Anda dengan asal yang sama. Misalnya, aplikasi yang dihosting di 'https://app.contoso.com' memiliki asal yang sama dengan Azure AD B2C yang berjalan pada 'https://login.contoso.com'.

Prasyarat

Mengonfigurasi kebijakan Anda

Untuk memungkinkan antarmuka pengguna Azure AD B2C Anda disematkan dalam iframe, opsi kebijakan keamanan konten Content-Security-Policy dan bingkai X-Frame-Options harus disertakan di header respons HTTP Azure AD B2C. Header ini memungkinkan antarmuka pengguna Azure AD B2C berjalan di bawah nama domain aplikasi Anda.

Tambahkan elemen JourneyFraming di dalam elemen RelyingParty. Elemen UserJourneyBehaviors harus mengikuti DefaultUserJourney. Elemen UserJourneyBehaviors Anda akan terlihat seperti contoh ini:

<!--
<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
  <UserJourneyBehaviors> 
    <JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" /> 
  </UserJourneyBehaviors>
<!--
</RelyingParty> -->

Atribut Sumber berisi URI aplikasi web Anda. Tambahkan spasi antar URI. Setiap URI harus memenuhi persyaratan berikut:

  • Aplikasi Anda harus mempercayai dan memiliki URI.
  • URI harus menggunakan skema https.
  • URI lengkap aplikasi web harus ditentukan. Kartubebas tidak didukung.
  • Elemen JourneyFraming hanya memungkinkan URL situs dengan domain tingkat atas (TLD) dua hingga tujuh karakter untuk selaras dengan TLD yang umum dikenali.

Selain itu, kami sarankan Anda juga memblokir nama domain Anda sendiri agar tidak disematkan di iframe dengan mengatur header Content-Security-Policy dan X-Frame-Options masing-masing di halaman aplikasi Anda. Teknik ini mengurangi masalah keamanan di sekitar browser lama yang terkait dengan penyematan iframe berlapis.

Menyesuaikan antarmuka pengguna kebijakan

Dengan kustomisasi antarmuka pengguna Azure AD B2C, Anda memiliki kontrol penuh atas konten HTML dan CSS yang Anda sajikan kepada pengguna Anda. Ikuti langkah-langkah untuk mengkustomisasi halaman HTML menggunakan definisi konten. Agar pas dengan antarmuka pengguna Azure AD B2C ke ukuran iframe, sediakan halaman HTML bersih tanpa latar belakang dan ruang tambahan.

Kode CSS berikut menyembunyikan elemen HTML Azure AD B2C dan menyesuaikan ukuran panel untuk mengisi iframe.

div.social, div.divider {
    display: none;
}

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

Dalam beberapa kasus, Anda mungkin ingin memberi tahu aplikasi Anda tentang halaman Azure AD B2C mana yang saat ini sedang ditampilkan. Misalnya, ketika pengguna memilih opsi pendaftaran, Anda mungkin ingin aplikasi merespons dengan menyembunyikan tautan untuk masuk dengan akun sosial atau menyesuaikan ukuran iframe.

Untuk memberi tahu aplikasi Anda tentang halaman Azure AD B2C saat ini, aktifkan kebijakan Anda untuk JavaScript, lalu gunakan pesan postingan HTML5. Kode JavaScript berikut mengirimkan postingan ke aplikasi dengan signUp:

window.parent.postMessage("signUp", '*');

Mengonfigurasi aplikasi web

Saat pengguna memilih tombol masuk, aplikasi web menghasilkan permintaan otorisasi yang membawa pengguna ke pengalaman masuk Azure AD B2C. Setelah masuk selesai, Azure AD B2C mengembalikan token ID, atau kode otorisasi, ke URI pengalihan yang dikonfigurasi dalam aplikasi Anda.

Untuk mendukung masuk tersemat, atribut iframe src menunjuk ke pengontrol masuk, seperti /account/SignUpSignIn, yang menghasilkan permintaan otorisasi dan mengalihkan pengguna ke kebijakan Azure AD B2C.

<iframe id="loginframe" frameborder="0" src="/account/SignUpSignIn"></iframe>

Setelah aplikasi menerima dan memvalidasi token ID, aplikasi menyelesaikan alur otorisasi dan mengenali dan mempercayai pengguna. Karena alur otorisasi terjadi di dalam iframe, Anda perlu memuat ulang halaman utama. Setelah halaman dimuat ulang, tombol masuk berubah menjadi "keluar" dan nama pengguna ditampilkan di UI.

Contoh berikut menunjukkan bagaimana URI pengalihan masuk dapat me-refresh halaman utama:

window.top.location.reload();

Menambahkan masuk dengan akun sosial ke aplikasi web

IdP sosial memblokir halaman masuk mereka agar tidak dirender dalam bingkai sebaris. Anda dapat menggunakan kebijakan terpisah untuk akun sosial, atau Anda dapat menggunakan satu kebijakan untuk masuk dan mendaftar dengan akun lokal dan sosial. Kemudian Anda dapat menggunakan parameter string kueri domain_hint. Parameter petunjuk domain membawa pengguna langsung ke halaman masuk IdP sosial.

Di aplikasi Anda, tambahkan masuk dengan tombol akun sosial. Saat pengguna mengklik salah satu tombol akun sosial, kontrol perlu mengubah nama kebijakan atau mengatur parameter petunjuk domain.

URI pengalihan dapat menjadi URI pengalihan yang sama yang digunakan oleh iframe. Anda dapat melewati memuat ulang halaman.

Mengonfigurasi aplikasi satu halaman

Untuk aplikasi satu halaman, Anda juga memerlukan halaman HTML "masuk" kedua yang dimuat ke dalam iframe. Halaman masuk ini menghosting kode pustaka autentikasi yang menghasilkan kode otorisasi dan mengembalikan token.

Saat aplikasi satu halaman membutuhkan token akses, gunakan kode JavaScript untuk mendapatkan token akses dari iframe dan objek yang berisinya.

Catatan

Menjalankan MSAL 2.0 dalam iframe saat ini tidak didukung.

Kode berikut adalah contoh yang berjalan di halaman utama dan memanggil kode JavaScript iframe:

function getToken()
{
  var token = document.getElementById("loginframe").contentWindow.getToken("adB2CSignInSignUp");

  if (token === "LoginIsRequired")
    document.getElementById("tokenTextarea").value = "Please login!!!"
  else
    document.getElementById("tokenTextarea").value = token.access_token;
}

function logOut()
{
  document.getElementById("loginframe").contentWindow.policyLogout("adB2CSignInSignUp", "B2C_1A_SignUpOrSignIn");
}

Langkah berikutnya

Lihat artikel terkait berikut ini: