Bagikan melalui

Mengonfigurasi autentikasi dalam sampel aplikasi satu halaman Angular dengan menggunakan 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.

Artikel ini menggunakan sampel aplikasi satu halaman (SPA) Angular untuk mengilustrasikan cara menambahkan autentikasi Azure Active Directory B2C (Azure AD B2C) ke aplikasi Angular Anda.

Gambaran Umum

OpenID Connect (OIDC) adalah protokol autentikasi yang dibangun di OAuth 2.0 yang dapat Anda gunakan untuk memasukkan pengguna ke aplikasi dengan aman. Sampel Angular ini menggunakan MSAL Angular dan MSAL Browser. MSAL adalah pustaka yang disediakan Microsoft yang menyederhanakan penambahan dukungan autentikasi dan otorisasi ke Angular SPAs.

Alur masuk pengguna

Alur masuk melibatkan langkah-langkah berikut:

  1. Pengguna membuka aplikasi dan memilih Masuk.
  2. Aplikasi memulai permintaan autentikasi dan mengalihkan pengguna ke Azure AD B2C.
  3. Pengguna mendaftar atau masuk dan mengatur ulang kata sandi, atau masuk dengan akun sosial.
  4. Setelah berhasil masuk, Azure AD B2C mengembalikan kode otorisasi ke aplikasi. Aplikasi ini mengambil tindakan berikut:
    1. Menukar kode otorisasi untuk token ID, token akses, dan token refresh.
    2. Membaca klaim token ID.
    3. Menyimpan token akses dan token refresh dalam cache dalam memori untuk digunakan nanti. Token akses memungkinkan pengguna untuk memanggil sumber daya yang dilindungi, seperti API web. Token refresh digunakan untuk memperoleh token akses baru.

Pendaftaran aplikasi

Untuk mengaktifkan aplikasi Anda untuk masuk dengan Azure AD B2C dan memanggil API web, Anda harus mendaftarkan dua aplikasi di penyewa Azure AD B2C Anda:

  • Pendaftaran aplikasi satu halaman (Angular) memungkinkan aplikasi Anda untuk melakukan autentikasi dengan Azure AD B2C. Selama pendaftaran aplikasi, Anda menentukan URI pengalihan. URI pengalihan adalah titik akhir tempat pengguna dialihkan setelah mereka mengautentikasi dengan Azure AD B2C. Proses pendaftaran aplikasi menghasilkan ID aplikasi, dikenal juga sebagai ID klien, yang secara unik mengidentifikasi aplikasi Anda. Artikel ini menggunakan contoh ID Aplikasi: 1.

  • Pendaftaran API web memungkinkan aplikasi Anda memanggil API web yang dilindungi. Pendaftaran memaparkan perizinan API web (cakupan). Proses pendaftaran aplikasi menghasilkan ID aplikasi yang secara unik mengidentifikasi API web Anda. Artikel ini menggunakan contoh ID Aplikasi: 2. Berikan izin aplikasi Anda (ID Aplikasi: 1) ke cakupan API web (ID Aplikasi: 2).

Diagram berikut menjelaskan pendaftaran aplikasi dan arsitektur aplikasi.

Diagram yang menjelaskan aplikasi satu halaman dengan web A P I, pendaftaran, dan token.

Memanggil API web

Setelah autentikasi selesai, pengguna berinteraksi dengan aplikasi, yang memanggil API web yang dilindungi. API web menggunakan autentikasi token pembawa. Token pembawa adalah token akses yang diperoleh aplikasi dari Azure AD B2C. Aplikasi mengirimkan token melalui header otorisasi dalam permintaan HTTPS.

Authorization: Bearer <access token>

Jika cakupan token akses tidak cocok dengan cakupan API web, pustaka autentikasi memperoleh token akses baru dengan cakupan yang benar.

Proses keluar akun

Alur proses keluar meliputi langkah-langkah berikut:

  1. Dari aplikasi, pengguna keluar.
  2. Aplikasi menghapus objek sesinya, dan pustaka autentikasi menghapus cache tokennya.
  3. Aplikasi membawa pengguna ke endpoint sign-out Azure AD B2C untuk mengakhiri sesi Azure AD B2C.
  4. Pengguna dialihkan kembali ke aplikasi.

Prasyarat

Sebelum Anda mengikuti prosedur dalam artikel ini, pastikan komputer Anda sedang berjalan:

Langkah 1: Mengonfigurasi alur pengguna

Saat pengguna mencoba masuk ke aplikasi Anda, aplikasi memulai permintaan autentikasi ke titik akhir otorisasi melalui alur pengguna. Alur pengguna mendefinisikan dan mengontrol pengalaman pengguna. Setelah pengguna menyelesaikan alur pengguna, Azure Active Directory B2C membuat token dan kemudian mengarahkan pengguna kembali ke aplikasi Anda.

Jika Anda belum melakukannya, buat alur pengguna atau kebijakan kustom. Ulangi langkah-langkah tersebut untuk membuat tiga alur pengguna terpisah sebagai berikut:

  • Gabungan alur pengguna daftar dan masuk, seperti susi. Alur pengguna ini juga mendukung pengalaman Lupa kata sandi Anda.
  • Alur Pengeditan Profil pengguna, seperti .
  • Alur pengguna untuk mengatur ulang kata sandi, seperti .

Azure AD B2C menambahkan B2C_1_ ke nama alur pengguna. Misalnya, susi menjadi B2C_1_susi.

Langkah 2: Daftarkan Angular SPA dan API Anda

Dalam langkah ini, Anda membuat pendaftaran untuk Angular SPA dan aplikasi API web. Anda juga menentukan cakupan API web Anda.

2.1 Mendaftarkan aplikasi API web

Untuk membuat pendaftaran aplikasi API web (ID Aplikasi: 2), ikuti langkah-langkah berikut:

  1. Masuk ke portal Azure.

  2. Pastikan Anda menggunakan direktori yang berisi Azure AD B2C tenant 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 AAD B2C.

  5. Pilih Pendaftaran aplikasi, lalu pilih Pendaftaran baru.

  6. Untuk Nama, masukkan nama untuk aplikasi (misalnya, my-api1). Biarkan nilai default untuk URI Pengalihan dan Jenis akun yang didukung.

  7. Pilih Daftarkan.

  8. Setelah pendaftaran aplikasi selesai, pilih Ringkasan.

  9. Catat nilai ID Aplikasi (klien) untuk digunakan nanti, saat Anda mengonfigurasi aplikasi web.

    Cuplikan layar menunjukkan cara mendapatkan ID aplikasi A P I web.

2.2 Mengonfigurasi cakupan

  1. Pilih aplikasi my-api1 yang Anda buat (ID Aplikasi: 2) untuk membuka halaman Ringkasannya.

  2. Di bawah Kelola, pilih Memaparkan API.

  3. Di samping URI ID Aplikasi, pilih tautan Set. Ganti nilai default (GUID) dengan nama yang unik (misalnya, tasks-api ), kemudian pilih Simpan .

    Ketika aplikasi web Anda meminta token akses untuk API, ia harus menambahkan URI ini sebagai awalan bagi setiap cakupan yang Anda tentukan untuk API.

  4. Di bawah Cakupan yang ditentukan oleh API ini, pilih Tambahkan cakupan.

  5. Untuk membuat ruang lingkup yang menentukan akses baca ke API:

    1. Untuk Nama cakupan, masukkan tasks.read.
    2. Untuk Nama tampilan perizinan admin, masukkan Akses baca ke API tugas.
    3. Untuk Deskripsi perizinan admin, masukkan Izinkan akses baca ke API tugas.

  6. Pilih Tambahkan cakupan.

  7. Pilih Tambahkan cakupan, lalu tambahkan cakupan yang menentukan akses tulis ke API:

    1. Untuk Nama cakupan, masukkan tasks.write.
    2. Untuk Nama tampilan perizinan admin, masukkan Hak akses menulis ke API tugas.
    3. Untuk Deskripsi perizinan admin, masukkan Izinkan akses tulis ke API tugas.

  8. Pilih Tambahkan cakupan.

2.3 Mendaftarkan aplikasi Angular

Ikuti langkah-langkah berikut untuk membuat pendaftaran aplikasi Angular:

  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. Untuk Nama, masukkan nama untuk aplikasi. Misalnya, masukkan MyApp.
  6. Di bawah Jenis akun yang didukung, pilih Akun-akun di penyedia identitas atau direktori organisasi apa pun (untuk mengautentikasi pengguna melalui alur pengguna).
  7. Di bawah URI Pengalihan, pilih Aplikasi halaman tunggal (SPA), lalu masukkan http://localhost:4200 dalam kotak URL.
  8. Di bagian Izin, pilih kotak centang Berikan persetujuan admin untuk openid dan izin akses offline.
  9. Pilih Daftarkan.
  10. Rekam nilai ID Aplikasi (klien) untuk digunakan di langkah selanjutnya saat Anda mengonfigurasi aplikasi web. Tangkapan layar yang menunjukkan cara mendapatkan ID aplikasi Angular.

2.5 Memberikan izin

Untuk memberi izin kepada aplikasi Anda (ID Aplikasi: 1), ikuti langkah-langkah berikut:

  1. Pilih Pendaftaran aplikasi, lalu pilih aplikasi yang Anda buat (ID Aplikasi: 1).

  2. Di bagian Kelola, pilih Izin API.

  3. Di Izin yang dikonfigurasi, pilih Tambahkan izin.

  4. Pilih tab API Saya.

  5. Pilih API (ID Aplikasi: 2) yang aplikasi webnya akan diberi akses. Contohnya, masukkan my-api1.

  6. Di bagian Izin, luaskan tugas, lalu pilih cakupan yang Anda tentukan sebelumnya (misalnya, tasks.read dan tasks.write).

  7. Pilih Tambahkan izin.

  8. Pilih Beri persetujuan admin untuk <nama penyewa Anda>.

  9. Pilih Ya.

  10. Pilih Refresh, kemudian pastikan bahwa Diberikan untuk ... muncul di bawah Status untuk kedua ruang lingkup.

  11. Dari daftar Izin akses yang dikonfigurasi, pilih cakupan Anda, lalu salin nama lengkap cakupan.

    Cuplikan layar panel izin akses yang dikonfigurasi, yang memperlihatkan pemberian izin akses baca.

Langkah 3: Dapatkan kode sampel Angular

Sampel ini menunjukkan bagaimana aplikasi satu halaman Angular dapat menggunakan Azure AD B2C untuk pendaftaran dan masuk pengguna. Kemudian aplikasi memperoleh token akses dan memanggil API web yang dilindungi.

Unduh file .zip sampel, atau klon sampel dari repositori GitHub dengan menggunakan perintah berikut:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

3.1 Mengonfigurasi contoh Angular

Setelah Anda mendapatkan sampel SPA, perbarui kode dengan nilai Azure AD B2C dan web API Anda. Di folder sampel, di bawah folder src/app , buka file auth-config.ts . Perbarui kunci dengan nilai yang sesuai:

Bagian Kunci Nilai
kebijakan B2C Nama-nama Alur pengguna atau kebijakan kustom yang Anda buat di langkah 1.
kebijakan B2C Pihak berwenang Ganti your-tenant-name dengan nama tenant Azure AD B2C Anda. Misalnya, gunakan contoso.onmicrosoft.com. Kemudian, ganti nama kebijakan dengan alur pengguna atau kebijakan kustom yang Anda buat di langkah 1. Misalnya: https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>.
kebijakan B2C domainOtoritas Nama tenant Azure AD B2C Anda. Misalnya: contoso.onmicrosoft.com.
Konfigurasi clientId ID aplikasi Angular dari langkah 2.3.
Sumber Terlindungi Titik akhir URL dari API web: http://localhost:5000/api/todolist.
Sumber Terlindungi Cakupan Cakupan API web yang Anda buat di langkah 2.2. Misalnya: b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"].

Kode src/app/auth-config.ts yang Dihasilkan akan terlihat mirip dengan sampel berikut:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

Langkah 4: Dapatkan kode sampel API web

Sekarang setelah API web terdaftar dan Anda telah menentukan cakupan, konfigurasikan API web agar berfungsi dengan penyewa Azure AD B2C Anda.

Unduh arsip *.zip, atau kloning contoh proyek API web dari GitHub. Anda juga dapat menelusuri langsung ke proyek Azure-Samples/active-directory-b2c-javascript-nodejs-webapi di GitHub dengan menggunakan perintah berikut:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

4.1 Mengonfigurasi API web

Di folder sampel, buka file config.json . File ini berisi informasi tentang IdP Azure AD B2C Anda. Aplikasi API web menggunakan informasi ini untuk memvalidasi token akses yang diteruskan aplikasi web sebagai token pembawa. Perbarui properti pengaturan aplikasi berikut:

Bagian Kunci Nilai
Bukti identitas namaPenyewa Bagian pertama dari nama penyewa Azure AD B2C Anda. Misalnya: contoso.
Bukti identitas ID klien ID aplikasi API web dari langkah 2.1. Dalam diagram sebelumnya, ini adalah aplikasi dengan ID Aplikasi: 2.
Bukti identitas penerbit (Opsional) Nilai klaim penerbit iss token. Azure AD B2C secara default mengembalikan token dalam format berikut: https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/. Ganti <your-tenant-name> dengan bagian pertama dari nama penyewa Azure AD B2C Anda. Ganti <your-tenant-ID> dengan ID penyewa Azure AD B2C Anda.
Kebijakan namaKebijakan Alur pengguna atau kebijakan kustom yang Anda buat di langkah 1. Jika aplikasi Anda menggunakan beberapa alur pengguna atau kebijakan kustom, tentukan hanya satu. Misalnya, gunakan alur pengguna untuk mendaftar atau masuk.
Sumber daya ruang lingkup Cakupan pendaftaran aplikasi API web Anda dari langkah 2.5.

File konfigurasi akhir Anda akan terlihat seperti JSON berikut:

{
    "credentials": {
        "tenantName": "<your-tenant-name>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
}

Langkah 5: Jalankan Angular SPA dan API web

Anda sekarang siap untuk menguji akses cakupan Angular ke API. Dalam langkah ini, jalankan API web dan aplikasi Angular sampel di komputer lokal Anda. Kemudian, masuk ke aplikasi Angular, dan pilih tombol TodoList untuk memulai permintaan ke API yang dilindungi.

Menjalankan API web

  1. Buka jendela konsol dan ubah ke direktori yang berisi sampel API web. Contohnya:

    cd active-directory-b2c-javascript-nodejs-webapi

  2. Jalankan perintah berikut:

    npm install && npm update
node index.js

    Jendela konsol menampilkan nomor port tempat aplikasi dihosting:

    Listening on port 5000...

Menjalankan aplikasi Angular

  1. Buka jendela konsol lain dan ubah ke direktori yang berisi sampel Angular. Contohnya:

    cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA

  2. Jalankan perintah berikut:

    npm install && npm update
npm start

    Jendela konsol menampilkan nomor port tempat aplikasi dihosting:

    Listening on port 4200...

  3. http://localhost:4200 Buka di browser Anda untuk melihat aplikasi.

  4. Pilih Login.

    Cuplikan layar yang memperlihatkan aplikasi sampel Angular dengan tautan masuk.

  5. Selesaikan proses pendaftaran atau masuk.

  6. Setelah berhasil masuk, Anda akan melihat profil Anda. Dari menu, pilih TodoList.

    Cuplikan layar yang memperlihatkan aplikasi sampel Angular dengan profil pengguna, dan panggilan ke daftar to-do.

  7. Pilih Tambahkan untuk menambahkan item baru ke daftar, atau gunakan ikon untuk menghapus atau mengedit item.

    Cuplikan layar yang memperlihatkan panggilan aplikasi sampel Angular ke daftar to-do.

Menyebarkan aplikasi Anda

Dalam aplikasi produksi, URI pengalihan untuk pendaftaran aplikasi biasanya merupakan titik akhir yang dapat diakses publik tempat aplikasi Anda berjalan, seperti https://contoso.com.

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.
  • URL balasan sensitif terhadap huruf besar/kecil. Ukuran huruf harus sesuai dengan ukuran huruf pada jalur URL pada aplikasi berjalan.

Konten terkait