Menggunakan Pustaka Autentikasi Microsoft untuk JavaScript agar berfungsi dengan Azure AD B2C

Important

Berlaku mulai 1 Mei 2025, Azure AD B2C tidak akan lagi tersedia untuk dibeli untuk pelanggan baru. Untuk mempelajari lebih lanjut, silakan lihat Apakah Azure AD B2C masih tersedia untuk dibeli? di FAQ kami.

Perpustakaan Autentikasi Microsoft untuk JavaScript (MSAL.js) memungkinkan pengembang JavaScript mengautentikasi pengguna dengan identitas sosial dan lokal menggunakan Azure Active Directory B2C (Azure AD B2C).

Dengan menggunakan Azure AD B2C sebagai layanan manajemen identitas, Anda dapat menyesuaikan dan mengontrol bagaimana pelanggan Anda mendaftar, masuk, dan mengelola profil mereka saat mereka menggunakan aplikasi Anda.

Azure AD B2C juga memungkinkan Anda untuk merek dan menyesuaikan UI yang ditampilkan aplikasi Anda selama proses autentikasi.

Jenis dan skenario aplikasi yang didukung

MSAL.js memungkinkan aplikasi satu halaman untuk memasukkan pengguna dengan Azure AD B2C menggunakan alur kode otorisasi dengan pemberian PKCE . Dengan MSAL.js dan Azure AD B2C:

Pengguna dapat mengautentikasi dengan identitas sosial dan lokal mereka.
Pengguna dapat diotorisasi untuk mengakses sumber daya yang dilindungi Azure AD B2C (tetapi bukan sumber daya yang dilindungi Microsoft Entra).
Pengguna tidak dapat memperoleh token untuk API Microsoft (misalnya, MS Graph API) menggunakan izin yang didelegasikan.
Pengguna dengan hak istimewa administrator dapat memperoleh token untuk API Microsoft (misalnya, MS Graph API) menggunakan izin yang didelegasikan.

Untuk informasi selengkapnya, lihat: Bekerja dengan Azure AD B2C

Langkah berikutnya

Ikuti tutorial tentang cara:

⚠️ Sebelum Anda mulai di sini, pastikan Anda memahami cara menginisialisasi objek aplikasi dan bekerja dengan sumber daya dan cakupan. Kami juga merekomendasikan keakraban umum dengan Azure AD B2C. Lihat dokumentasi B2C untuk informasi selengkapnya.

MSAL.js mendukung autentikasi dengan identitas sosial (Microsoft, Google, Facebook, dll.), perusahaan (ADFS, Salesforce, dll.) dan lokal (disimpan di Azure direktori AD B2C) menggunakan Azure AD B2C (B2C singkatnya). Saat mengembangkan aplikasi B2C dengan MSAL.js, ada beberapa detail penting yang perlu diingat.

Fakta Cepat

Dengan B2C:

Pengguna dapat mengautentikasi dengan identitas sosial mereka.
Pengguna dapat diotorisasi untuk mengakses sumber daya yang dilindungi B2C (tetapi tidak sumber daya yang dilindungi Microsoft Entra).
Pengguna tidak dapat memperoleh token untuk API Microsoft (misalnya MS Graph API) menggunakan izin yang didelegasikan.
Aplikasi dapat memperoleh token untuk API Microsoft menggunakan izin aplikasi (skenario manajemen pengguna).

Konfigurasi Aplikasi B2C

Berikut ini adalah contoh konfigurasi aplikasi B2C:

const msalConfig = {
  auth: {
    clientId: "<your-clientID>",
    authority: "https://<your-tenant>.b2clogin.com/<your-tenant>.onmicrosoft.com/<your-policyID>",
    knownAuthorities: ["<your-tenant>.b2clogin.com"] // array of URIs that are known to be valid
  }
}

const apiConfig = {
  b2cScopes: ["https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"],
  webApiUri: "<your-api-uri>" // e.g. "https://fabrikamb2chello.azurewebsites.net/hello"
};

const loginRequest = {
  scopes: [ "openid", "offline_access" ]
}

const tokenRequest = {
  scopes: apiConfig.b2cScopes // e.g. "https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"
}

Endpoint Microsoft Entra vs B2C

Perbedaan utama antara tenant Microsoft Entra ID dan Azure AD B2C terletak pada endpoint-nya.

Sebuah tenant Microsoft Entra ID:

Hanya berisi titik akhir Microsoft Entra (login.microsoftonline.com/*).
Mengekspos satu titik akhir token (login.microsoftonline.com/.../token).
Endpoint Microsoft Entra memungkinkan Anda untuk memperoleh token untuk:
- Aplikasi Anda dilindungi oleh Microsoft Entra ID.
- Microsoft API, seperti MS Graph API.

Penyewa B2C:

Berisi titik akhir Microsoft Entra ID dan Azure AD B2C (login.microsoftonline.com/* dan <your-domain>.b2clogin.com/*).
Mengekspos titik akhir token terpisah untuk masing-masing (login.microsoftonline.com/.../token, <your-domain>.b2clogin.com/.../token).
Titik akhir B2C memungkinkan Anda mendapatkan token untuk:
- Aplikasi Anda dilindungi oleh B2C.

Izin B2C dan Izin yang Didelegasikan

Izin yang didelegasikan menentukan akses berbasis cakupan menggunakan otorisasi interaktif dari pengguna yang masuk. Izin ini diteruskan kepada sumber daya (misalnya API web Anda, MS Graph API, dll.) saat runtime sebagai scp klaim dalam Token Akses klien.

Autentikasi B2C pengguna tidak dapat digunakan untuk mengotorisasi Microsoft Entra aplikasi yang dilindungi, atau API Microsoft (yang juga dilindungi oleh Microsoft Entra ID). Dengan demikian, ketika Anda menggunakan MSAL.js, Anda tidak dapat menggunakan <your-tenant>.b2clogin.com/.../token titik akhir untuk mendapatkan token untuk MS Graph API.

Izin OpenID Connect

Pengecualian untuk aturan di atas berasal dari sekumpulan cakupan khusus yang dikenal sebagai izin OpenID Connect (OIDC), yang mencakup openid dan profile. Izin khusus lainnya adalah offline_access, yang memberi aplikasi Anda akses ke sumber daya atas nama pengguna untuk waktu yang lama (menggunakan Token Refresh). MSAL.js akan menyediakan openid, profile, dan offline_access secara bawaan selama permintaan loginPopup() dan loginRedirect().

Autentikasi Microsoft Entra ke tenant B2C

Saat Anda menggunakan endpoint login.microsoftonline.com tanpa memberikan parameter policyID apa pun terhadap penyewa B2C, Anda akan mengakses endpoint Microsoft Entra dari penyewa B2C. Hanya dalam hal ini Anda bisa mendapatkan token untuk sumber daya MS Graph API, menggunakan konteks pengguna yang masuk.

Izin B2C dan Aplikasi

Izin aplikasi menentukan akses berbasis peran menggunakan kredensial/identitas aplikasi klien. Izin ini disampaikan kepada sumber daya saat dijalankan sebagai klaim roles dalam Token Akses klien.

Skenario Manajemen Pengguna

Endpoint login.microsoftonline.com masih dapat digunakan untuk pekerjaan non-interaktif di balik layar dalam mengelola pengguna dan atribut, meskipun endpoint tersebut khusus untuk B2C. Saat membuat pendaftaran aplikasi untuk aplikasi yang akan menggunakan pemberian kredensial klien untuk mengelola sumber daya B2C menggunakan MS Graph API, Anda perlu memilih cakupan Graph API yang diperlukan aplikasi manajemen Anda untuk mendapatkan izin (lihat dokumentasi untuk lebih lanjut). Hal-hal yang perlu diingat:

Untuk mendapatkan izin aplikasi, Anda harus melakukan autentikasi aplikasi (menggunakan pemberian kredensial klien).
Untuk mendapatkan izin yang didelegasikan, Anda harus melakukan autentikasi pengguna dengan akun admin.
Aplikasi manajemen biasanya terdaftar sebagai audiens tipe 1 atau tipe 2 (lihat di bawah).

Topik Lain

B2C dan Tipe Akun/Audiens

Selama pendaftaran aplikasi, Anda diminta untuk memilih audiens. Jenis audiens yang Anda pilih menunjukkan jenis autentikasi apa yang Anda targetkan.

Jenis Audiens	Deskripsi	Jenis Autentikasi
#1	Hanya akun dalam direktori organisasi ini (hanya satu penyewa)	Microsoft Entra otentikasi
#2	Akun di direktori organisasi apa pun (multitenan).	Microsoft Entra otentikasi
#3	Akun di direktori organisasi atau penyedia identitas apa pun	Autentikasi B2C

Memperoleh token akses untuk API Anda sendiri

Ada 2 cara untuk memperoleh token akses untuk API Anda sendiri:

Minta clientId Anda sebagai cakupan:

msal.loginRedirect({
    scopes: ["client_Id"]
});

Baca selengkapnya di sini

Ekspos cakupan kustom Anda sendiri pada pendaftaran aplikasi Anda dan minta cakupan ini:

msal.loginRedirect({
    scopes: ["api://clientId/customScope.Read"]
});

Pengalaman B2C dan Keluar dari Akun

Tindakan keluar menghapus status single sign-on pengguna dengan Azure AD B2C, tetapi mungkin tidak membuat pengguna keluar dari sesi penyedia identitas sosial mereka. Jika pengguna memilih penyedia identitas yang sama selama masuk berikutnya, mereka mungkin mengautentikasi ulang tanpa memasukkan kredensial mereka. Di sini asumsinya adalah bahwa, jika pengguna ingin keluar dari aplikasi, itu tidak selalu berarti mereka ingin keluar dari akun sosial mereka (misalnya Facebook) itu sendiri.

B2C dan Alur Undangan

MSAL.js hanya akan memproses token yang awalnya diminta. Jika alur mengharuskan Anda mengirim tautan yang dapat digunakan pengguna untuk mendaftar, Anda harus memastikan bahwa tautan menunjuk ke aplikasi Anda, bukan layanan B2C secara langsung. Contoh alur undangan adalah sebagai berikut:

Pengguna mengklik tautan ke aplikasi Anda
Aplikasi memanggil msal.loginRedirect dan menyertakan id_token_hint dalam extraQueryParameters

    msal.loginRedirect({
        scopes: ["example_scope"],
        extraQueryParameters: {'id_token_hint': your_id_token_hint}
    });

Aplikasi dialihkan ke layanan B2C tempat pengguna memasukkan kredensial/pendaftaran
Layanan B2C mengalihkan kembali ke aplikasi Anda yang memanggil await msal.handleRedirectPromise() untuk memproses respons dan menyimpan token

Penggunaan B2C dan iframe

Azure AD B2C menawarkan pengalaman masuk yang disematkan, yang memungkinkan penyajian UI masuk kustom dalam iframe. Karena MSAL mencegah pengalihan di iframe secara default, Anda harus mengatur opsi konfigurasi allowRedirectInIframe ke true untuk menggunakan fitur ini. Untuk pertimbangan lain saat menggunakan iframe, silakan lihat: Menggunakan MSAL di aplikasi iframed

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-07-02