Mengonfigurasi autentikasi dalam contoh aplikasi web Node.js dengan menggunakan Azure Active Directory B2C

  • Artikel
  • 6 menit untuk membaca

Contoh artikel ini menggunakan contoh aplikasi Node.js untuk menunjukkan cara menambahkan autentikasi Azure Active Directory B2C (Azure AD B2C) ke aplikasi web Node.js. Aplikasi sampel memungkinkan pengguna untuk masuk, keluar, memperbarui profil, dan mengatur ulang kata sandi menggunakan alur pengguna Azure AD B2C. Aplikasi web sampel menggunakan Microsoft Authentication Library (MSAL) untuk Node untuk menangani autentikasi dan otorisasi.

Dalam artikel ini, Anda akan melakukan tugas-tugas berikut:

  • Daftarkan aplikasi web di portal Microsoft Azure.
  • Buat gabungan alur pengguna Masuk dan daftar, Pengeditan profil, dan Atur ulang kata sandi untuk aplikasi di portal Microsoft Azure.
  • Perbarui contoh aplikasi Node untuk menggunakan aplikasi Azure AD B2C Anda sendiri dan alur pengguna.
  • Uji aplikasi sampel.

Prasyarat

Langkah 1: Mengonfigurasi alur pengguna Anda

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 AD B2C menghasilkan token dan kemudian mengalihkan 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 pengguna Pengeditan profil, seperti edit_profile.
  • Alur pengguna Pengaturan ulang kata sandi, seperti reset_password.

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

Langkah 2: Mendaftarkan aplikasi web

Untuk mengaktifkan masuk aplikasi Anda dengan Azure AD B2C, daftarkan aplikasi Anda di direktori Azure AD B2C. Pendaftaran aplikasi menetapkan hubungan kepercayaan antara aplikasi dan Azure AD B2C.

Selama pendaftaran aplikasi, Anda akan menentukan URI Pengalihan. URI pengalihan adalah titik akhir di mana pengguna diarahkan Azure AD B2C setelah mereka mengautentikasi dengan Azure AD B2C. Proses pendaftaran aplikasi menghasilkan ID Aplikasi, dikenal juga sebagai ID klien, yang secara unik mengidentifikasi aplikasi Anda. Setelah aplikasi Anda terdaftar, Azure AD B2C menggunakan ID aplikasi dan URI pengalihan untuk membuat permintaan autentikasi.

Langkah 2.1: Daftarkan aplikasi

Untuk mendaftarkan aplikasi web, ikuti langkah-langkah berikut:

  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. Di bawah Nama, masukkan nama untuk aplikasi (misalnya, webapp1).

  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 URI Pengalihan, pilih Web lalu, di kotak URL, masukkan http://localhost:3000/redirect.

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

  10. Pilih Daftar.

  11. Pilih Ringkasan.

  12. Rekam ID Aplikasi (klien) untuk digunakan nanti, saat Anda mengonfigurasi aplikasi web.

    Screenshot of the web app Overview page for recording your web app I D.

Langkah 2.2: Membuat rahasia klien aplikasi web

Buat rahasia klien untuk aplikasi web terdaftar. Aplikasi web menggunakan rahasia klien untuk membuktikan identitasnya saat meminta token.

  1. Di bagian Kelola, pilih Sertifikat & rahasia.
  2. Pilih Rahasia klien baru.
  3. Di kotak Deskripsi, masukkan deskripsi rahasia klien (misalnya, clientsecret1).
  4. Di bawahKedaluwarsa, pilih durasi yang membuat rahasia tersebut valid, lalu pilih Tambahkan.
  5. Rekam Nilai rahasia. Anda akan menggunakan nilai ini untuk konfigurasi pada langkah selanjutnya.

Langkah 3: Dapatkan contoh aplikasi web

Unduh file zip, atau klon aplikasi web sampel dari GitHub.

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

Ekstrak file sampel ke folder. Anda akan mendapatkan aplikasi web dengan struktur direktori berikut:

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

views Folder berisi file Handlebars untuk antarmuka pengguna aplikasi.

Langkah 4: Instal dependensi

  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

  2. Jalankan perintah berikut untuk menginstal dependensi aplikasi:

    npm install && npm update

Langkah 5: Mengonfigurasi sampel aplikasi web

Buka aplikasi web Anda di editor kode seperti Visual Studio Code. Di bagian folder akar proyek, buka file .env. File ini memuat informasi tentang penyedia identitas Azure AD B2C Anda. Perbarui properti pengaturan aplikasi berikut:

Kunci Nilai
APP_CLIENT_ID ID Aplikasi (klien) dari aplikasi web yang Anda daftarkan dalam langkah 2.1.
APP_CLIENT_SECRET Nilai rahasia klien untuk aplikasi web yang Anda buat di langkah 2.2
SIGN_UP_SIGN_IN_POLICY_AUTHORITY Otoritas alur pengguna Daftar dan masuk 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 seperti B2C_1_susi. Pelajari cara Mendapatkan nama penyewa Anda.
RESET_PASSWORD_POLICY_AUTHORITY Otoritas alur pengguna Atur ulang kata sandi seperti https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>. Ganti <your-tenant-name> dengan nama penyewa Anda dan <reset-password-user-flow-name> dengan nama alur pengguna Atur ulang kata sandi Anda seperti B2C_1_reset_password_node_app.
EDIT_PROFILE_POLICY_AUTHORITY Otoritas alur pengguna Pengeditan profil seperti https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>. Ganti <your-tenant-name> dengan nama penyewa Anda dan <reset-password-user-flow-name> dengan nama alur pengguna atur ulang kata sandi Anda seperti B2C_1_edit_profile_node_app.
AUTHORITY_DOMAIN Domain otoritas Azure AD B2C Anda seperti https://<your-tenant-name>.b2clogin.com. Ganti <your-tenant-name> dengan nama penyewa Anda.
APP_REDIRECT_URI Aplikasi mengalihkan URI tempat Azure AD B2C akan mengembalikan respons autentikasi (token). Ini cocok dengan Redirect URI yang Anda tetapkan saat mendaftarkan aplikasi Anda di portal Azure, dan itu harus dapat diakses publik. Tinggalkan nilai apa yang ada.
LOGOUT_ENDPOINT Azure AD B2C menandatangani titik akhir 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 seperti B2C_1_susi.

File konfigurasi akhir Anda akan terlihat seperti sampel berikut:

#HTTP port
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>
#B2C sign up and sign in user flow/policy 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>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
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

Jalankan aplikasi web sampel

Anda sekarang dapat menguji aplikasi sampel. Anda perlu memulai server Node dan mengaksesnya melalui browser Anda http://localhost:3000.

  1. Di terminal Anda, jalankan kode berikut untuk memulai server web Node.js:

    node index.js

  2. Di browser Anda, buka http://localhost:3000. Anda akan melihat halaman dengan tombol Masuk.

    Screenshot that shows a Node web app sign in page.

Menguji proses masuk

  1. Setelah halaman dengan tombol Masuk selesai dimuat, pilih Masuk. Anda diminta untuk masuk.

  2. Masukkan informasi masuk Anda, seperti alamat email dan kata sandi. Jika Anda belum memiliki akun, pilih Daftar sekarang untuk membuat akun. Setelah Anda berhasil masuk atau mendaftar, Anda akan melihat halaman berikut yang menunjukkan status masuk.

    Screenshot shows web app sign-in status.

Menguji pengeditan profil

  1. Setelah Anda masuk, pilih Edit profil.
  2. Masukkan perubahan baru sesuai kebutuhan, lalu pilih Lanjutkan. Anda akan melihat halaman dengan status masuk yang menunjukkan perubahan baru, seperti Nama Depan.

Menguji pengaturan ulang kata sandi

  1. Setelah Anda masuk, pilih Atur ulang kata sandi.
  2. Dalam dialog berikutnya yang akan muncul, Anda dapat membatalkan operasi dengan memilih Batalkan. Atau, masukkan alamat email Anda, lalu pilih Kirim kode verifikasi. Anda akan menerima kode verifikasi ke akun email Anda. Salin kode verifikasi di email Anda, masukkan ke dalam dialog atur ulang kata sandi, lalu pilih Verifikasi kode.
  3. Pilih Lanjutkan.
  4. Masukkan kata sandi baru Anda, konfirmasi, lalu pilih Lanjutkan. Anda akan melihat halaman yang menunjukkan status proses masuk.

Menguji proses keluar

Setelah Anda masuk, pilih Keluar. Anda akan melihat halaman yang memiliki tombol Masuk.

Langkah berikutnya