Bagikan melalui

Mengonfigurasi autentikasi dalam sampel Node.js API web 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.

Dalam artikel ini, Anda akan mempelajari cara mengonfigurasi sampel aplikasi web Node.js untuk memanggil sampel Node.js API web. API web perlu dilindungi oleh Azure AD B2C itu sendiri. Dalam penyiapan ini, aplikasi web, seperti ID Aplikasi: 1 memanggil API web, seperti ID Aplikasi: 2. Pengguna mengautentikasi ke aplikasi web untuk memperoleh token akses, yang kemudian digunakan untuk memanggil API web yang dilindungi.

Gambaran Umum

Autentikasi berbasis token memastikan bahwa permintaan ke API web disertai dengan token akses yang valid.

Aplikasi web menyelesaikan peristiwa berikut:

  • Ini mengautentikasi pengguna dengan Azure AD B2C.

  • Ini memperoleh token akses dengan izin (cakupan) yang diperlukan untuk titik akhir API web.

  • Ini meneruskan token akses sebagai token pembawa dalam header autentikasi permintaan HTTP. Ini menggunakan format:

Authorization: Bearer <token>

API web menyelesaikan peristiwa berikut:

  • Ini membaca token pembawa dari header otorisasi dalam permintaan HTTP.

  • Ini memvalidasi token.

  • Ini melakukan validasi izin (cakupan) dalam token.

  • Ini menanggapi permintaan HTTP. Jika token tidak valid, titik akhir API web merespons dengan 401 Unauthorized kesalahan HTTP.

Ringkasan pendaftaran aplikasi

Untuk memungkinkan aplikasi masuk dengan Azure AD B2C dan memanggil API web, Anda harus mendaftarkan dua aplikasi dalam direktori Azure AD B2C.

  • Pendaftaran aplikasi web memungkinkan aplikasi Anda untuk masuk menggunakan Azure AD B2C. Selama pendaftaran, Anda menentukan URI pengalihan. URI pengalihan adalah titik akhir tempat pengguna dialihkan oleh Azure AD B2C setelah mereka menyelesaikan autentikasi. Proses pendaftaran aplikasi menghasilkan ID aplikasi, juga disebut ID klien, yang menjadi ID aplikasi Anda. Anda juga akan membuat rahasia klien untuk aplikasi Anda. Aplikasi Anda menggunakan rahasia klien untuk menukar kode otorisasi dengan token akses.

  • Pendaftaran API web memungkinkan aplikasi Anda memproses API web dengan aman. Pendaftaran mencakup cakupanAPI web. Cakupan menyediakan cara untuk mengelola izin ke sumber daya yang dilindungi seperti API web Anda. Anda memberikan izin aplikasi web ke cakupan API web. Ketika token akses diminta, aplikasi menentukan izin yang diinginkan dalam parameter cakupan permintaan.

Pendaftaran aplikasi dan arsitektur aplikasi dijelaskan dalam diagram berikut:

Diagram pendaftaran aplikasi dan arsitektur aplikasi untuk aplikasi dengan web AP I.

Prasyarat

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 aplikasi web dan API Anda

Dalam langkah ini, Anda membuat web dan pendaftaran aplikasi API web, dan Anda menentukan cakupan API web Anda.

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

Langkah 2.2: Mengonfigurasi cakupan

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

  2. Di bawah Kelola, pilih Ekspos 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 persetujuan admin, ketikkan 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.

Langkah 2.3: Daftarkan aplikasi web

Untuk membuat pendaftaran SPA, lakukan hal berikut:

  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. Cari dan pilih Azure AD B2C.
  4. Pilih Pendaftaran aplikasi, lalu pilih Pendaftaran baru.
  5. Masukkan Nama untuk aplikasi (misalnya, ID Aplikasi: 1).
  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 Web, lalu masukkan http://localhost:3000/redirect kotak teks URL
  8. Di bagian Izin, pilih kotak centang Berikan persetujuan admin untuk openid dan izin akses offline.
  9. Pilih Daftarkan.

Langkah 2.4: Membuat rahasia klien

  1. Di halaman Azure AD B2C - Pendaftaran aplikasi , pilih aplikasi yang Anda buat, misalnya ID aplikasi: 1.
  2. Di menu sebelah kiri, di bawah Kelola, pilih Sertifikat & rahasia.
  3. Pilih Rahasia klien baru.
  4. Masukkan deskripsi untuk rahasia klien dalam kotak Deskripsi. Misalnya, clientsecret1.
  5. Di bawah Kedaluwarsa, pilih durasi yang rahasianya valid, lalu pilih Tambahkan.
  6. Catat Nilai rahasia untuk digunakan dalam kode aplikasi klien Anda. Nilai rahasia ini tidak pernah ditampilkan lagi setelah Anda meninggalkan halaman ini. Anda menggunakan nilai ini sebagai rahasia aplikasi dalam kode aplikasi Anda.

Langkah 2.5: Berikan izin API ke aplikasi web

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 aplikasi web

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

Untuk mendapatkan kode sampel aplikasi web, Anda dapat melakukan salah satu hal berikut:

  • Unduh file zip. Anda akan mengekstrak file zip untuk mendapatkan contoh aplikasi web.

  • Klon sampel dari GitHub dengan menjalankan perintah berikut:

    git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

Langkah 3.1: Menginstal dependensi aplikasi

  1. Buka jendela konsol, dan ubah ke direktori yang berisi aplikasi sampel Node.js. Contohnya:

        cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api

  2. Jalankan perintah berikut untuk menginstal dependensi aplikasi:

        npm install && npm update

Langkah 3.2: Mengonfigurasi aplikasi web sampel

Buka aplikasi web Anda di editor kode seperti Visual Studio Code. Di bawah call-protected-api folder, buka .env file. File ini berisi informasi tentang IdP Azure AD B2C Anda. Perbarui pengaturan aplikasi berikut:

Kunci Nilai
APP_CLIENT_ID ID Aplikasi (klien) untuk aplikasi web yang Anda daftarkan pada langkah 2.3.
APP_CLIENT_SECRET Nilai rahasia klien untuk aplikasi web yang Anda buat di langkah 2.4
SIGN_UP_SIGN_IN_POLICY_AUTHORITY Otoritas alur pengguna masuk dan daftar untuk alur pengguna yang Anda buat di langkah 1 seperti https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>. Ganti <your-tenant-name> dengan nama penyewa Anda dan <sign-in-sign-up-user-flow-name> dengan nama alur pengguna Masuk dan Daftar Anda seperti B2C_1_susi. Pelajari cara Mendapatkan nama penyewa Anda.
AUTHORITY_DOMAIN Domain otorisasi Azure AD B2C seperti https://<your-tenant-name>.b2clogin.com. Ganti <your-tenant-name> dengan nama penyewa Anda.
APP_REDIRECT_URI URI pengalihan aplikasi tempat Azure AD B2C akan mengembalikan respons autentikasi (token). Ini cocok dengan URI Pengalihan yang Anda tetapkan saat mendaftarkan aplikasi Anda di portal Microsoft Azure. URL ini harus dapat diakses oleh publik. Biarkan nilai apa adanya.
LOGOUT_ENDPOINT Titik akhir keluar Azure AD B2C seperti https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000. Ganti <your-tenant-name> dengan nama penyewa Anda dan <sign-in-sign-up-user-flow-name> dengan nama alur pengguna Masuk dan Daftar Anda seperti B2C_1_susi.

Setelah pembaruan, file konfigurasi akhir Anda akan terlihat mirip dengan contoh berikut:

SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

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.

Untuk mendapatkan kode sampel API web, lakukan salah satu tindakan berikut:

Langkah 4.1: Memperbarui API web

  1. Di editor kode Anda, buka config.json file.

  2. Ubah nilai variabel dengan alur pengguna dan pendaftaran aplikasi yang Anda buat sebelumnya:

    • Untuk tenantName, gunakan nama nama penyewa Anda seperti fabrikamb2c.

    • Untuk clientID, gunakan ID Aplikasi (Klien) untuk API web yang Anda buat di langkah 2.1.

    • Untuk policyName, gunakan nama alur pengguna Nyanyikan dan daftar yang Anda buat di langkah 1 seperti B2C_1_susi.

    Setelah pembaruan, kode Anda akan terlihat mirip dengan contoh berikut:

    config.json:

    {
    "credentials": {
        "tenantName": "fabrikamb2c",
        "clientID": "Enter_the_Application_Id_Here"
    },
    "policies": {
        "policyName": "B2C_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"]
    },
    "metadata": {
        "authority": "login.microsoftonline.com",
        "discovery": ".well-known/openid-configuration",
        "version": "v2.0"
    },
    "settings": {
        "isB2C": true,
        "validateIssuer": true,
        "passReqToCallback": false,
        "loggingLevel": "info"
    }
}

Langkah 4.2: Instal dependensi aplikasi

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

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

  2. Jalankan perintah berikut:

    npm install && npm update

Langkah 5: Jalankan aplikasi web dan API

Anda sekarang siap untuk menguji akses cakupan aplikasi web ke API web. Jalankan API web Node.js dan aplikasi web sampel di komputer lokal Anda.

  1. Di terminal Anda, navigasikan ke contoh API web dan jalankan mulai server API web Node.js. Sebagai contoh: '

    cd active-directory-b2c-javascript-nodejs-webapi
node index.js

    Jendela konsol menampilkan nomor port tempat aplikasi dihosting.

    Listening on port 5000...

  2. Dalam instans terminal lain, navigasikan ke contoh aplikasi web dan jalankan mulai server aplikasi web Node.js. Contohnya:

        cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
    node index.js

    Jendela konsol menampilkan nomor port tempat aplikasi dihosting.

    Msal Node Auth Code Sample app listening on port !3000

  3. Di browser Anda, buka http://localhost:3000. Anda akan melihat halaman dengan dua tombol, Masuk untuk memanggil PROTECTED API dan Atau memanggil ANONYMOUS API.

    Halaman web untuk masuk ke panggilan yang dilindungi A P I.

  4. Untuk memanggil API anonim, pilih Atau panggil API ANONIM. API merespons dengan objek JSON dengan date kunci seperti:

        {"date":"2022-01-27T14:21:22.681Z"}

    API anonim adalah titik akhir yang tidak terlindungi di API web. Anda tidak memerlukan token akses untuk mengaksesnya.

  5. Untuk memanggil titik akhir API yang dilindungi, pilih tombol Masuk untuk memanggil API yang dilindungi . Anda diminta untuk masuk.

  6. Masukkan kredensial masuk Anda, seperti alamat email dan kata sandi. Jika Anda tidak memiliki akun, pilih Daftar sekarang untuk membuat akun. Setelah berhasil masuk atau mendaftar, Anda akan melihat halaman berikut dengan tombol Panggil API TERPROTEKSI .

    Halaman web untuk ditandatangani untuk panggilan dilindungi A P I.

  7. Untuk memanggil API yang dilindungi, pilih tombol Panggil API TERPROTEKSI . API merespons dengan objek JSON dengan name kunci yang nilainya adalah nama keluarga akun Anda seperti:

        {"name": "User 1"}

Langkah selanjutnya

Pelajari cara Mengaktifkan autentikasi di API web Anda sendiri dengan menggunakan Azure AD B2C

  • Last updated on