Bagikan melalui

Mengaktifkan autentikasi di Aplikasi React Anda sendiri 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 memperlihatkan kepada Anda cara menambahkan autentikasi Azure Active Directory B2C (Azure AD B2C) ke aplikasi halaman tunggal (SPA) React Anda sendiri. Pelajari cara mengintegrasikan aplikasi React dengan pustaka autentikasi MSAL for React .

Gunakan artikel ini dengan artikel terkait berjudul Mengonfigurasi autentikasi dalam sampel aplikasi satu halaman React. Ganti contoh aplikasi React dengan aplikasi React Anda sendiri. Setelah Anda menyelesaikan langkah-langkah dalam artikel ini, aplikasi Anda akan menerima rincian masuk melalui Azure AD B2C.

Prasyarat

Tinjau prasyarat dan langkah-langkah integrasi dalam artikel Mengonfigurasi autentikasi dalam sampel aplikasi satu halaman React .

Langkah 1: Membuat proyek aplikasi React

Anda dapat menggunakan aplikasi React yang sudah ada, atau membuat Aplikasi React baru. Untuk membuat proyek baru, jalankan perintah berikut di shell perintah Anda:

npx create-react-app my-app
cd my-app

Langkah 2: Instal dependensi

Untuk menginstal Browser MSAL dan pustaka MSAL React di aplikasi Anda, jalankan perintah berikut di shell perintah Anda:

npm i @azure/msal-browser  @azure/msal-react

Instal react-router-dom versi 5.*. Paket react-router-dom berisi pengikatan untuk menggunakan React Router dalam aplikasi web. Jalankan perintah berikut di shell perintah Anda:

npm i react-router-dom@5.3.3

Instal Bootstrap untuk React (opsional, untuk UI):

npm i bootstrap react-bootstrap

Langkah 3: Tambahkan komponen autentikasi

Kode sampel terdiri dari komponen berikut. Tambahkan komponen ini dari sampel aplikasi React ke aplikasi Anda sendiri:

  • public/index.html- Proses bundling menggunakan file ini sebagai templat dan menyuntikkan komponen React ke <div id="root"> dalam elemen . Jika Anda membukanya langsung di browser, Anda akan melihat halaman kosong.

  • src/authConfig.js - File konfigurasi yang berisi informasi tentang penyedia identitas Azure AD B2C dan layanan API web Anda. Aplikasi React menggunakan informasi ini untuk membangun hubungan kepercayaan dengan Azure AD B2C, masuk dan keluar pengguna, memperoleh token, dan memvalidasi token.

  • src/index.js - Titik masuk JavaScript ke aplikasi Anda. File JavaScript ini:

    • App Memasang sebagai komponen akar ke elemen halaman <div id="root">.
    • Memulai pustaka MSAL PublicClientApplication dengan konfigurasi yang ditentukan dalam file authConfig.js . MSAL React harus dibuat di luar pohon komponen untuk mencegahnya diinstansiasi kembali pada render ulang.
    • Setelah instans pustaka MSAL, kode JavaScript meneruskan sebagai alat peraga msalInstance ke komponen aplikasi Anda. Contohnya, <App instance={msalInstance} />.

  • src/App.jsx - Menentukan komponen Aplikasi dan Halaman :

    • Komponen Aplikasi adalah komponen tingkat atas aplikasi Anda. Ini membungkus semuanya di antara MsalProvider komponen. Semua komponen di bawah MsalProvider memiliki akses ke instans PublicClientApplication melalui konteks dan semua kait dan komponen yang disediakan oleh MSAL React. Komponen Aplikasi memasang PageLayout dan elemen turunan Pages-nya .

    • Komponen Pages mendaftar dan membatalkan pendaftaran panggilan balik peristiwa MSAL. Peristiwa digunakan untuk menangani kesalahan MSAL. Ini juga mendefinisikan logika perutean aplikasi.

    Penting

    Jika nama file komponen Aplikasi adalah App.js, ubah menjadi App.jsx.

  • src/pages/Hello.jsx - Menunjukkan cara memanggil sumber daya yang dilindungi dengan token pembawa OAuth2.

    • Ini menggunakan kait useMsal yang mengembalikan instans PublicClientApplication.
    • Dengan instans PublicClientApplication, instans ini memperoleh token akses untuk memanggil REST API.
    • Memanggil fungsi callApiWithToken untuk mengambil data dari REST API dan merender hasilnya menggunakan komponen DataDisplay .

  • src/components/NavigationBar.jsx - Bilah navigasi atas aplikasi yang memiliki tombol masuk, keluar, edit profil, dan panggil reset REST API.

    • Ini menggunakan AuthenticatedTemplate dan UnauthenticatedTemplate, yang hanya merender anak-anak mereka jika pengguna diautentikasi atau tidak diautentikasi, masing-masing.
    • Tangani login dan keluar dengan peristiwa pengalihan dan jendela popup.

  • src/components/PageLayout.jsx

    • Tata letak umum yang memberi pengguna pengalaman yang konsisten saat mereka menavigasi dari halaman ke halaman. Tata letak mencakup elemen antarmuka pengguna umum seperti header aplikasi, komponen Bilah Navigasi , footer, dan komponen turunannya.
    • Ini menggunakan AuthenticatedTemplate, yang merender turunannya hanya jika pengguna diautentikasi.

  • src/components/DataDisplay.jsx - Merender pengembalian data dari panggilan REST API.

  • src/styles/App.css dan src/styles/index.css - File gaya CSS untuk aplikasi.

  • src/fetch.js - Mengambil permintaan HTTP ke REST API.

Langkah 4: Mengonfigurasi aplikasi React Anda

Setelah Anda menambahkan komponen autentikasi, konfigurasikan aplikasi React Anda dengan pengaturan Azure AD B2C Anda. Pengaturan penyedia identitas Azure AD B2C dikonfigurasi dalam file authConfig.js .

Untuk panduan, lihat Mengonfigurasi aplikasi React Anda.

Langkah 5: Jalankan aplikasi React

  1. Dari Visual Studio Code, buka terminal baru dan jalankan perintah berikut:

    npm install && npm update
npm start

    Jendela konsol menampilkan nomor port tempat aplikasi dihosting:

    Listening on port 3000...

  2. Untuk memanggil REST API, ikuti panduan cara menjalankan API web

  3. Di browser Anda, buka http://localhost:3000 untuk melihat aplikasi

Langkah selanjutnya