Mengonfigurasi opsi autentikasi dalam aplikasi 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 menjelaskan cara menyesuaikan dan meningkatkan pengalaman autentikasi Azure Active Directory B2C (Azure AD B2C) untuk aplikasi satu halaman (SPA) Angular Anda.

Prasyarat

Biasakan diri Anda dengan artikel Mengonfigurasi autentikasi di Angular SPA atau Mengaktifkan autentikasi di Angular SPA Anda sendiri.

Perilaku masuk dan keluar

Anda dapat mengonfigurasi aplikasi satu halaman untuk memasukkan pengguna dengan MSAL.js dengan dua cara:

  • Jendela pop-up: Autentikasi terjadi di jendela pop-up, dan status aplikasi dipertahankan. Gunakan pendekatan ini jika Anda tidak ingin pengguna menjauh dari halaman aplikasi Anda selama autentikasi. Namun, ada masalah yang diketahui dengan jendela pop-up di Internet Explorer.
    • Untuk masuk ke dengan jendela pop-up, di dalam kelas src/app/app.component.ts, gunakan metode loginPopup.
    • Dalam kelas src/app/app.module.ts, atur atribut interactionType menjadi InteractionType.Popup.
    • Untuk keluar dengan jendela pop-up, gunakan metode src/app/app.component.ts di kelas logoutPopup. Anda juga dapat mengonfigurasi logoutPopup untuk mengalihkan jendela utama ke halaman lain, seperti halaman beranda atau halaman masuk, setelah keluar selesai dengan meneruskan mainWindowRedirectUri sebagai bagian dari permintaan.
  • Pengalihan: Pengguna dialihkan ke Azure AD B2C untuk menyelesaikan alur autentikasi. Gunakan pendekatan ini jika pengguna memiliki batasan atau kebijakan browser di mana jendela pop-up dinonaktifkan.
    • Untuk masuk dengan pengalihan, gunakan metode src/app/app.component.ts di kelas loginRedirect.
    • Dalam kelas src/app/app.module.ts, atur atribut interactionType menjadi InteractionType.Redirect.
    • Untuk keluar dengan pengalihan, gunakan metode src/app/app.component.ts di kelas logoutRedirect. Konfigurasikan URI ke mana pengalihan harus dilakukan setelah keluar akun dengan menetapkan postLogoutRedirectUri. Anda harus menambahkan URI ini sebagai URI pengalihan dalam pendaftaran aplikasi Anda.

Contoh berikut menunjukkan cara masuk dan keluar:

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

Pustaka MSAL Angular memiliki tiga alur masuk: masuk interaktif (di mana pengguna memilih tombol masuk), MSAL Guard, dan MSAL Interceptor. Konfigurasi MSAL Guard dan MSAL Interceptor berlaku ketika pengguna mencoba mengakses sumber daya yang dilindungi tanpa token akses yang valid. Dalam kasus seperti itu, pustaka MSAL memaksa pengguna untuk masuk.

Sampel berikut menunjukkan cara mengonfigurasi MSAL Guard dan MSAL Interceptor untuk masuk dengan jendela pop-up atau pengalihan:

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

Mengisi nama masuk terlebih dahulu

Selama perjalanan pengguna masuk, aplikasi Anda mungkin menargetkan pengguna tertentu. Saat aplikasi menargetkan pengguna, aplikasi dapat menentukan parameter kueri dengan nama masuk pengguna dalam permintaan otorisasi login_hint. Azure AD B2C secara otomatis mengisi nama masuk, dan pengguna hanya perlu menyediakan kata sandi.

Untuk mengisi nama masuk terlebih dahulu, lakukan hal berikut:

  1. Jika Anda menggunakan kebijakan kustom, tambahkan klaim input yang diperlukan seperti yang dijelaskan dalam Menyiapkan masuk langsung.
  2. Buat atau gunakan objek konfigurasi MSAL PopupRequest atau RedirectRequest yang sudah ada.
  3. Atur atribut loginHint dengan petunjuk masuk terkait.

Cuplikan kode berikut menunjukkan cara melewati parameter petunjuk masuk. Mereka menggunakan bob@contoso.com sebagai nilai atribut.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

Memilih penyedia identitas terlebih dahulu

Jika anda mengonfigurasi perjalanan masuk untuk aplikasi anda untuk menyertakan akun sosial, seperti Facebook, LinkedIn, atau Google, Anda dapat menentukan parameter.domain_hint Parameter kueri ini memberikan petunjuk kepada Azure AD B2C tentang IdP sosial yang harus digunakan untuk masuk. Misalnya, jika aplikasi menentukan domain_hint=facebook.com, alur masuk langsung masuk ke halaman masuk Facebook.

Untuk mengalihkan pengguna ke penyedia identitas eksternal, lakukan hal berikut:

  1. Periksa nama domain penyedia identitas eksternal Anda. Untuk informasi selengkapnya, lihat Mengalihkan pendaftaran masuk ke penyedia sosial.
  2. Buat atau gunakan objek konfigurasi MSAL PopupRequest atau RedirectRequest yang sudah ada.
  3. Atur domainHint atribut dengan petunjuk domain yang sesuai.

Cuplikan kode berikut menunjukkan cara meneruskan parameter petunjuk domain. Mereka menggunakan facebook.com sebagai nilai atribut.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

Tentukan bahasa UI

Penyesuaian bahasa di Azure AD B2C memungkinkan alur pengguna Anda untuk mengakomodasi berbagai bahasa yang sesuai dengan kebutuhan pelanggan Anda. Untuk informasi selengkapnya, lihat Kustomisasi bahasa.

Untuk mengatur bahasa pilihan, lakukan hal berikut:

  1. Mengonfigurasi penyesuaian Bahasa.
  2. Membuat atau menggunakan objek konfigurasi PopupRequest atau MSAL RedirectRequest yang ada dengan atribut extraQueryParameters.
  3. ui_locales Tambahkan parameter dengan kode bahasa yang sesuai ke extraQueryParameters atribut .

Cuplikan kode berikut menunjukkan cara meneruskan parameter petunjuk domain. Mereka menggunakan es-es sebagai nilai atribut.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Mengirimkan parameter string kueri kustom

Dengan kebijakan kustom, Anda dapat meneruskan parameter string kueri kustom. Contoh kasus penggunaan yang baik adalah ketika Anda ingin mengubah konten halaman secara dinamis.

Untuk meneruskan parameter string kueri kustom, lakukan hal berikut:

  1. Konfigurasikan elemen ContentDefinitionParameters .
  2. Membuat atau menggunakan objek konfigurasi PopupRequest atau MSAL RedirectRequest yang ada dengan atribut extraQueryParameters.
  3. Tambahkan parameter string kueri kustom, seperti campaignId. Atur nilai parameter.

Cuplikan kode berikut menunjukkan cara meneruskan parameter string kueri kustom. Mereka menggunakan germany-promotion sebagai nilai atribut.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Berikan petunjuk token ID

Aplikasi pihak yang mengandalkan dapat mengirim JSON Web Token (JWT) masuk sebagai bagian dari permintaan otorisasi OAuth2. Token masuk adalah petunjuk tentang pengguna atau permintaan otorisasi. Azure AD B2C memvalidasi token lalu mengekstrak klaim.

Untuk menyertakan petunjuk token ID dalam permintaan autentikasi, lakukan hal berikut:

  1. Dalam kebijakan kustom Anda, tentukan profil teknis petunjuk token ID.
  2. Membuat atau menggunakan objek konfigurasi PopupRequest atau MSAL RedirectRequest yang ada dengan atribut extraQueryParameters.
  3. id_token_hint Tambahkan parameter dengan variabel terkait yang menyimpan token ID.

Cuplikan kode berikut menunjukkan cara menentukan petunjuk token ID:

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

Menggunakan domain kustom

Dengan menggunakan domain kustom, Anda dapat sepenuhnya memberi merek URL autentikasi. Dari perspektif pengguna, pengguna tetap berada di domain Anda selama proses autentikasi, daripada dialihkan ke nama domain azure AD B2C b2clogin.com.

Untuk menghapus semua referensi ke "b2c" di URL, Anda juga dapat mengganti nama penyewa B2C, contoso.onmicrosoft.com, di URL permintaan autentikasi dengan GUID ID penyewa Anda. Misalnya, Anda dapat mengubah https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ ke https://account.contosobank.co.uk/<tenant ID GUID>/.

Untuk menggunakan domain kustom untuk ID penyewa Anda di URL autentikasi, ikuti panduan di Mengaktifkan domain kustom. src/app/auth-config.ts Buka objek konfigurasi MSAL dan ubah authorities dan knownAuthorities untuk menggunakan nama domain kustom dan ID penyewa Anda.

JavaScript berikut menunjukkan objek konfigurasi MSAL sebelum perubahan:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

JavaScript berikut menunjukkan objek konfigurasi MSAL setelah perubahan:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

Mengonfigurasi pengelogan

Pustaka MSAL menghasilkan pesan log yang dapat membantu mendiagnosis masalah. Aplikasi dapat mengonfigurasi pengelogan. Aplikasi ini juga dapat memberi Anda kontrol kustom atas tingkat detail dan apakah data pribadi dan organisasi dicatat.

Kami menyarankan agar Anda membuat panggilan balik pengelogan MSAL dan menyediakan cara bagi pengguna untuk mengirimkan log saat mereka memiliki masalah autentikasi. MSAL menyediakan beberapa tingkat detail log berikut:

  • Kesalahan: Sesuatu telah terjadi dan menyebabkan kesalahan. Tingkat ini digunakan untuk penelusuran kesalahan dan mengidentifikasi masalah.
  • Peringatan: Belum tentu ada kesalahan atau kegagalan, tetapi informasi tersebut ditujukan untuk diagnostik dan menentukan masalah.
  • Info: MSAL merekam kejadian yang ditujukan untuk memberikan informasi dan tidak selalu untuk penelusuran kesalahan.
  • Verbose: Ini adalah tingkat default. MSAL mencatat detail lengkap perilaku pustaka.

Secara default, pencatat MSAL tidak mengambil data pribadi atau organisasi apa pun. Pustaka memberi Anda opsi untuk mengaktifkan pengelogan data pribadi dan organisasi jika Anda memutuskan untuk melakukannya.

Untuk mengonfigurasi pengelogan Angular, di src/app/auth-config.ts, konfigurasikan kunci berikut:

  • loggerCallback adalah fungsi panggilan balik pencatat.
  • logLevel memungkinkan Anda menentukan tingkat pengelogan. Nilai yang mungkin: Error, Warning, Info, dan Verbose.
  • piiLoggingEnabled memungkinkan pengguna untuk memasukkan data pribadi. Nilai yang mungkin: true atau false.

Cuplikan kode berikut menunjukkan cara mengonfigurasi pengelogan MSAL:

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Langkah selanjutnya

  • Last updated on