Bagikan melalui

Mengonfigurasi opsi autentikasi dalam aplikasi Angular dengan menggunakan Azure Active Directory B2C

  • Artikel

Artikel ini menjelaskan cara menyesuaikan dan menyempurnakan pengalaman autentikasi Azure Active Directory B2C (Azure AD B2C) untuk aplikasi halaman tunggal (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: Otentikasi terjadi di jendela pop-up, dan status aplikasi dipertahankan. Gunakan pendekatan ini jika Anda tidak ingin pengguna berpindah dari halaman aplikasi Anda selama autentikasi. Namun, ada masalah yang diketahui dengan jendela pop-up di Internet Explorer.
    • Untuk masuk dengan jendela munculan, di kelas src/app/app.component.ts, gunakan metode loginPopup.
    • Di kelas src/app/app.module.ts, setel atribut interactionType ke InteractionType.Popup.
    • Untuk keluar dengan jendela pop-up, di kelas src/app/app.component.ts, gunakan metode logoutPopup. Anda juga dapat mengonfigurasi logoutPopup untuk mengalihkan jendela utama ke laman lain, seperti beranda atau laman masuk, setelah proses 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 yang menonaktifkan jendela browser pop-up.
    • Untuk masuk dengan pengalihan, di kelas src/app/app.component.ts, gunakan metode loginRedirect.
    • Di kelas src/app/app.module.ts, setel atribut interactionType ke InteractionType.Redirect.
    • Untuk keluar dengan pengalihan, di kelas src/app/app.component.ts, gunakan metode logoutRedirect. Konfigurasikan URI yang harus dialihkan setelah keluar dengan mengatur postLogoutRedirectUri. Anda harus menambahkan URI ini sebagai URI pengalihan dalam pendaftaran aplikasi Anda.

Sampel 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: '/',
  });
}

Pustakan 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 hal ini, pustaka MSAL memaksa pengguna untuk masuk.

Contoh 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]
    ])
  })

Prepopulasi nama rincian masuk

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

Untuk mengisi nama rincian 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. Setel atribut loginHint dengan petunjuk masuk yang sesuai.

Cuplikan kode berikut menunjukkan cara meneruskan 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 sebelumnya penyedia identitas

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

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

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

Cuplikan kode berikut menunjukkan cara melewati 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

Kustomisasi bahasa pemrogram di Microsoft 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. Buat atau gunakan objek konfigurasi MSAL PopupRequest atau RedirectRequest yang sudah ada dengan atribut extraQueryParameters.
  3. Tambahkan parameter ui_locales dengan kode bahasa yang sesuai pada atribut extraQueryParameters.

Cuplikan kode berikut menunjukkan cara melewati 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"}
    }
  },

Meneruskan parameter string kueri kustom

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

Untuk meneruskan parameter string kueri kustom, lakukan tindakan berikut:

  1. Konfigurasi elemen ContentDefinitionParameters.
  2. Buat atau gunakan objek konfigurasi MSAL PopupRequest atau RedirectRequest yang sudah ada dengan atribut extraQueryParameters.
  3. Tambahkan parameter string kueri kustom, seperti campaignId. Atur nilai parameter.

Cuplikan kode berikut menunjukkan cara melewati 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"}
    }
  },

Meneruskan 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 memasukkan petunjuk token ID dalam permintaan autentikasi, lakukan tindakan berikut:

  1. Dalam kebijakan khusus Anda, tentukan profil teknis petunjuk token ID.
  2. Buat atau gunakan objek konfigurasi MSAL PopupRequest atau RedirectRequest yang sudah ada dengan atribut extraQueryParameters.
  3. Tambahkan parameter id_token_hint dengan variabel yang sesuai 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 menandai URL autentikasi. Dari perspektif pengguna, pengguna tetap berada di domain Anda selama proses autentikasi, bukan dialihkan ke nama domain b2clogin.com Azure Active Directory B2C.

Untuk menghapus semua referensi “b2c” pada URL, Anda dapat mengganti nama penyewa B2C Anda, contoso.onmicrosoft.com, pada URL permintaan autentikasi dengan pengidentifikasi unik ID penyewa Anda. Misalnya, Anda dapat mengubah https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ menjadi https://account.contosobank.co.uk/<tenant ID GUID>/.

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

JavaScript berikut menampilkan 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 menampilkan 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 ini dapat mengonfigurasi pengelogan. Aplikasi juga dapat memberikan Anda kontrol khusus atas tingkat detail serta apakah data pribadi dan organisasi dicatat atau tidak.

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

  • Kesalahan: Menunjukkan ada sesuatu yang salah, dan kesalahan dibuat. Tingkat ini digunakan untuk penelusuran kesalahan dan mengidentifikasi masalah.
  • Peringatan: Belum tentu ada kesalahan atau kegagalan, tetapi ditujukan untuk diagnostik dan menentukan masalah.
  • Info: MSAL akan mencatat peristiwa yang ditujukan untuk tujuan informasi yang tidak selalu dimaksudkan untuk penelusuran kesalahan.
  • Verbose: Ini adalah tingkat default. MSAL mencatat detail lengkap perilaku pustaka.

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

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

  • loggerCallback adalah fungsi panggilan balik pencatat.
  • logLevel memungkinkan Anda menentukan tingkat pencatatan. Kemungkinan nilai: Error, Warning, Info, dan Verbose.
  • piiLoggingEnabled memungkinkan input 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 berikutnya