Mendaftarkan aplikasi satu 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 aplikasi Anda dapat berinteraksi dengan Azure Active Directory B2C (Azure AD B2C), aplikasi tersebut harus terdaftar di penyewa yang Anda kelola. Panduan ini menunjukkan kepada Anda 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 ("SPAs"). 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 memasukkan pengguna dan mendapatkan token untuk mengakses layanan back-end atau API web:

Alur kode otorisasi (dengan PKCE)

Alur kode Otorisasi OAuth 2.0 (dengan PKCE) memungkinkan aplikasi untuk bertukar kode otorisasi dengan token ID untuk mewakili pengguna terautentikasi dan Token akses yang diperlukan untuk memanggil API yang dilindungi. Selain itu, ini 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 batasan privasi cookie browser modern, seperti Safari ITP.

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

Aliran hibah implisit

Beberapa pustaka, seperti MSAL.js 1.x, hanya mendukung alur pemberian implisit, atau aplikasi Anda diimplementasikan untuk menggunakan alur implisit. Dalam kasus ini, Azure AD B2C mendukung alur implisit OAuth 2.0. Alur pemberian implisit memungkinkan aplikasi untuk mendapatkan token ID dan Akses dari titik akhir otorisasi. Tidak seperti alur kode otorisasi, alur pemberian implisit tidak mengembalikan token Refresh.

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

Prasyarat

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

• Jika Anda tidak memiliki Tenant Azure AD B2C, buat tenant sekarang. Anda dapat menggunakan penyewa Azure AD B2C yang sudah ada.

Daftarkan aplikasi SPA

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 Pendaftaran aplikasi, lalu pilih Pendaftaran baru.

5. Masukkan Nama untuk aplikasi. Misalnya, spaapp1.

6. Di bawah Jenis akun yang didukung, pilih Akun di penyedia identitas atau direktori organisasi apa pun (untuk mengautentikasi pengguna dengan alur pengguna)

7. Di bawah URI Pengalihan, pilih Aplikasi halaman tunggal (SPA), lalu masukkan https://jwt.ms dalam kotak teks URL.

   URI pengalihan adalah titik akhir tempat server otorisasi (Azure AD B2C, dalam hal ini) mengirim pengguna 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 tidak pernah meninggalkan 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 Anda yang telah terdaftar kapan saja.

   Pembatasan berikut berlaku untuk mengalihkan URI:

   • URL balasan harus dimulai dengan skema https, kecuali menggunakan localhost.
   • URL balasan sensitif terhadap huruf besar/kecil. Ukuran huruf harus sesuai dengan ukuran huruf pada jalur URL pada aplikasi berjalan. Misalnya, jika aplikasi Anda menyertakan .../abc/response-oidc sebagai bagian dari jalur, jangan tentukan .../ABC/response-oidc di URL balasan. Karena browser web menganggap jalur sebagai peka terhadap huruf besar/kecil, cookie yang terkait dengan .../abc/response-oidc mungkin tidak digunakan jika dialihkan ke URL .../ABC/response-oidc dengan perbedaan format huruf besar/kecil.

8. Di bawah Izin, pilih kotak centang Berikan persetujuan admin untuk izin openid dan offline_access.

9. Pilih Daftarkan.

Mengaktifkan alur pemberian implisit

Anda dapat mengaktifkan alur pemberian implisit karena dua alasan, saat Anda menggunakan MSAL.js versi 1.3 atau versi yang lebih lama atau saat Anda menggunakan pendaftaran aplikasi untuk menguji alur pengguna untuk tujuan pengujian.

Gunakan langkah-langkah ini untuk mengaktifkan alur pemberian implisit untuk aplikasi Anda:

1. Pilih pendaftaran aplikasi yang Anda buat.

2. Di bagian Kelola, pilih Autentikasi.

3. Di bawah Hibah dan alur hibrid implisit, centang kotak Token akses (digunakan untuk alur implisit) dan token ID (digunakan untuk alur implisit dan hibrid).

4. Pilih Simpan.

Nota

Jika aplikasi Anda menggunakan MSAL.js 2.0 atau yang lebih baru, jangan aktifkan alur pemberian izin implisit karena MSAL.js 2.0+ mendukung alur kode Otorisasi OAuth 2.0 (dengan PKCE). Jika Anda mengaktifkan pemberian implisit untuk menguji alur pengguna, pastikan Anda menonaktifkan pengaturan alur pemberian implisit sebelum menyebarkan aplikasi ke produksi.

Migrasi dari alur pemberian implisit

Jika Anda memiliki aplikasi yang sudah ada yang menggunakan alur implisit, kami sarankan Anda bermigrasi untuk menggunakan alur kode otorisasi dengan PKCE 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 pemberian izin implisit sebagai berikut:

1. Di menu sebelah kiri, di bagian Kelola, pilih Autentikasi.
2. Di bawah Pemberian implisit, batalkan pilihan pada kotak centang Token akses dan Token ID.
3. Pilih Simpan.

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

Langkah selanjutnya

Pelajari cara Membuat alur pengguna di Azure Active Directory B2C.