Daftarkan aplikasi halaman tunggal (SPA) di Azure Active Directory B2C

Sebelum aplikasi Anda dapat berinteraksi dengan Azure Active Directory B2C (Azure AD B2C), aplikasi harus terdaftar di penyewa yang Anda kelola. Panduan ini menunjukkan cara mendaftarkan aplikasi satu halaman ("SPA") menggunakan portal Microsoft Azure.

Gambaran umum opsi autentikasi

Banyak aplikasi web modern dibangun sebagai aplikasi satu halaman sisi klien ("SPA"). Pengembang menulisnya dengan menggunakan JavaScript atau kerangka kerja SPA seperti Angular, Vue, dan React. Aplikasi ini berjalan di browser web dan memiliki karakteristik autentikasi yang berbeda dari aplikasi web sisi server tradisional.

Azure AD B2C menyediakan dua opsi untuk mengaktifkan aplikasi satu halaman untuk masuk ke pengguna dan mendapatkan token untuk mengakses layanan back-end atau API web:

Aliran kode otorisasi (dengan PKCE)

Alur kode Otorisasi OAuth 2.0 (dengan PKCE) memungkinkan aplikasi menukar kode otorisasi untuk token ID untuk mewakili pengguna yang diautentikasi dan token Akses yang diperlukan untuk memanggil API yang dilindungi. Selain itu, alur mengembalikan token Refresh yang menyediakan akses jangka panjang ke sumber daya atas nama pengguna tanpa memerlukan interaksi dengan pengguna tersebut.

Ini adalah pendekatan yang direkomendasikan. Memiliki token refresh seumur hidup terbatas membantu aplikasi Anda beradaptasi dengan keterbatasan privasi cookie browser modern, seperti Safari ITP.

Untuk memanfaatkan alur ini, aplikasi Anda dapat menggunakan pustaka autentikasi yang mendukungnya, seperti MSAL.js.

Single-page applications-auth

Aliran hibah implisit

Beberapa pustaka, seperti MSAL.js 1.x, hanya mendukung alur hibah implisit atau aplikasi Anda diterapkan untuk menggunakan alur implisit. Dalam kasus ini, Azure Active Directory B2C mendukung alur implisit OAuth 2.0. Aliran hibah implisit memungkinkan aplikasi untuk mendapatkan token ID dan Akses. Tidak seperti alur kode otorisasi, alur hibah implisit tidak mengembalikan Token refresh.

Single-page applications-implicit

Alur autentikasi ini tidak menyertakan skenario aplikasi yang menggunakan kerangka kerja JavaScript lintas platform seperti Electron dan React-Native. Skenario-skenario tersebut memerlukan kemampuan lebih lanjut untuk interaksi dengan platform asli.

Prasyarat

  • Jika Anda tidak memiliki langganan Azure, buat akun gratis sebelum Anda memulai.

  • Jika Anda belum membuat Penyewa Azure AD B2C Anda sendiri, buatlah itu sekarang. Anda bisa menggunakan penyewa Azure AD B2C yang sudah ada.

Daftarkan aplikasi SPA

  1. Masuk ke portal Azure.

  2. Pastikan Anda menggunakan direktori yang berisi penyewa AAD B2C Anda. Pilih ikon Direktori + langganan di bilah alat portal.

  3. Pada Setelan portal | Direktori + langganan, temukan direktori Azure AD B2C Anda di daftar Nama direktori, lalu pilih Beralih.

  4. Di portal Microsoft Azure, cari dan pilih Azure AD B2C.

  5. Pilih Pendaftaran aplikasi, lalu pilih Pendaftaran baru.

  6. Masukkan Nama untuk aplikasi. Misalnya, spaapp1.

  7. Di bagian Tipe akun yang didukung, pilih Akun di penyedia identitas atau direktori organisasi apa pun (untuk mengautentikasi pengguna dengan alur pengguna)

  8. Di bawah Redirect URI, pilih Aplikasi halaman tunggal (SPA) , lalu masukkan https://jwt.ms di kotak teks URL.

    URI pengalihan adalah titik akhir tempat pengguna dikirim oleh server otorisasi (AAD B2C, dalam kasus ini) setelah menyelesaikan interaksinya dengan pengguna. Selain itu, titik akhir URI pengalihan menerima token akses atau kode otorisasi setelah otorisasi berhasil. Dalam aplikasi produksi, hal ini biasanya adalah titik akhir yang dapat diakses publik tempat aplikasi Anda berjalan, seperti https://contoso.com/auth-response. Untuk tujuan pengujian seperti panduan ini, Anda dapat mengaturnya ke https://jwt.ms, aplikasi web milik Microsoft yang menampilkan konten token yang didekodekan (konten token selalu berada di browser Anda). Selama pengembangan aplikasi, Anda dapat menambahkan titik akhir tempat aplikasi Anda mendengarkan secara lokal, seperti http://localhost:5000. Anda dapat menambahkan dan mengubah URI pengalihan di aplikasi terdaftar kapan saja.

    Pembatasan berikut berlaku untuk mengalihkan URI:

    • URL balasan harus dimulai dengan skema https, kecuali menggunakan localhost.
    • URL balasan peka huruf besar/kecil. Ukuran huruf harus sesuai dengan ukuran huruf pada jalur URL pada aplikasi berjalan. Misalnya, jika aplikasi Anda menyertakan sebagai bagian dari jalurnya .../abc/response-oidc, jangan tentukan .../ABC/response-oidc di URL balasan. Karena browser web memberlakukan peka huruf besar/kecil pada jalur, cookie yang terkait dengan .../abc/response-oidc dapat dikecualikan jika dialihkan ke URL yang ukuran hurufnya tidak cocok.../ABC/response-oidc.
  9. Di bagian Izin, pilih kotak centang Beri persetujuan admin untuk openid dan offline_access.

  10. Pilih Daftar.

Aktifkan aliran implisit

Jika aplikasi SPA Anda menggunakan MSAL.js 1.3 atau yang lebih lama dan alur hibah implisit atau Anda mengonfigurasi aplikasi https://jwt.ms/ untuk menguji alur pengguna atau kebijakan kustom, Anda harus mengaktifkan alur hibah implisit dalam pendaftaran aplikasi:

  1. Di menu sebelah kiri, di bagian Kelola, pilih Autentikasi.

  2. Di bawah Alur hibah implisit dan hibrid, pilih kotak centang Token akses (digunakan untuk alur implisit) dan Token D (digunakan untuk alur implisit dan hibrid).

  3. Pilih Simpan.

Jika aplikasi Anda menggunakan MSAL.js 2.0 atau yang lebih baru, jangan aktifkan hibah alur implisit karena MSAL.js 2.0+ mendukung alur kode otorisasi dengan PKCE.

Migrasi dari aliran implisit

Jika Anda sudah memiliki aplikasi yang menggunakan alur implisit, sebaiknya Anda bermigrasi untuk menggunakan alur kode otorisasi dengan menggunakan kerangka kerja yang mendukungnya, seperti MSAL.js 2.0+.

Saat semua SPA produksi Anda yang diwakili oleh pendaftaran aplikasi mulai menggunakan alur kode otorisasi, nonaktifkan pengaturan alur hibah implisit sebagai berikut:

  1. Di menu sebelah kiri, di bagian Kelola, pilih Autentikasi.
  2. Di bagian pemberian implisit, hapus centang di kotak centang Token akses dan token ID.
  3. Pilih Simpan.

Aplikasi yang menggunakan aliran implisit dapat terus berfungsi jika Anda membiarkan aliran implisit diaktifkan (dicentang).


Langkah berikutnya

Selanjutnya, pelajari cara membuat alur pengguna agar pengguna Anda dapat mendaftar, masuk, dan mengelola profil mereka.