Mendaftarkan aplikasi satu halaman 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.

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 pemberian implisit tidak menampilkan token Refresh.

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 tidak memiliki Penyewa Azure AD B2C, buat penyewa sekarang. Anda bisa 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 bagian Tipe akun yang didukung, pilih Akun di penyedia identitas atau direktori organisasi apa pun (untuk mengautentikasi pengguna dengan alur pengguna)

7. Di bawah Redirect URI, pilih Aplikasi halaman tunggal (SPA), lalu masukkan https://jwt.ms di 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 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 Anda yang telah 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 memperlakukan jalur sebagai peka huruf besar/kecil, cookie yang terkait dengan .../abc/response-oidc dapat dikecualikan jika dialihkan ke URL .../ABC/response-oidc yang ukuran hurufnya tidak cocok.

8. Di bagian Izin, pilih kotak centang Beri persetujuan admin untuk openid dan offline_access.

9. Pilih Daftarkan.

Aktifkan aliran implisit

Jika Anda menggunakan MSAL.js 1.3 atau versi yang lebih lama dengan alur pemberian izin implisit di aplikasi SPA Anda, atau jika Anda mengonfigurasi https://jwt.ms/ aplikasi untuk menguji alur pengguna atau kebijakan kustom, Anda perlu mengaktifkan alur pemberian implisit dalam pendaftaran aplikasi:

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

2. Di bawah Hibah dan alur hibrid implisit, centang kotak Token akses (digunakan untuk alur implisit) dan token ID (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 bawah Pemberian implisit, batal pilih 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

Pelajari cara Membuat alur pengguna di Azure Active Directory B2C.