Menginisialisasi aplikasi klien menggunakan MSAL.js

Artikel
02/27/2024

Artikel ini menjelaskan inisialisasi Microsoft Authentication Library untuk JavaScript (MSAL.js) dengan contoh aplikasi agen pengguna.

Aplikasi agen pengguna adalah bentuk aplikasi klien publik, di mana kode klien dijalankan di agen pengguna seperti browser web. Klien seperti ini tidak menyimpan rahasia karena konteks browser dapat diakses secara terbuka.

Untuk mempelajari selengkapnya tentang jenis aplikasi klien dan opsi konfigurasi aplikasi, lihat Aplikasi klien publik dan rahasia di MSAL.

Prasyarat

Sebelum menginisialisasi aplikasi, Anda harus terlebih dahulu mendaftarkannya di pusat admin Microsoft Entra, membangun hubungan kepercayaan antara aplikasi Anda dan platform identitas Microsoft.

Setelah mendaftarkan aplikasi, Anda memerlukan beberapa atau semua nilai berikut yang dapat ditemukan di pusat admin Microsoft Entra.

Nilai	Wajib	Deskripsi
Aplikasi (ID klien)	Wajib	GUID yang secara unik mengidentifikasi aplikasi Anda dalam platform identitas Microsoft.
Otoritas	Opsional	URL penyedia identitas (instans) dan audiens rincian masuk untuk aplikasi Anda. Instans dan audiens masuk ketika digabungkan, membentuk otoritas.
ID (tenant) direktori	Opsional	Tentukan ID Direktori (penyewa) jika Anda membuat aplikasi lini bisnis hanya untuk organisasi Anda, sering disebut sebagai aplikasi penyewa tunggal.
URI Pengalihan	Opsional	Jika Anda membangun aplikasi web, `redirectUri` menentukan di mana penyedia identitas (platform identitas Microsoft) harus mengembalikan token keamanan yang telah diterbitkannya.

Menginisialisasi aplikasi MSAL.js 2.x

Inisialisasi konteks autentikasi MSAL.js dengan membuat instans PublicClientApplication dengan objek Konfigurasi. Properti konfigurasi minimum yang diperlukan adalah clientID aplikasi, yang ditampilkan sebagai ID Aplikasi (klien) pada halaman Gambaran Umum pendaftaran aplikasi di pusat admin Microsoft Entra.

Berikut adalah contoh objek konfigurasi dan instantiasi dari PublicClientApplication:

const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
    knownAuthorities: [],
    redirectUri: "https://localhost:{port}/redirect",
    postLogoutRedirectUri: "https://localhost:{port}/redirect",
    navigateToLoginRequestUrl: true,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback: (
        level: LogLevel,
        message: string,
        containsPii: boolean
      ): void => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
      piiLoggingEnabled: false,
    },
    windowHashTimeout: 60000,
    iframeHashTimeout: 6000,
    loadFrameTimeout: 0,
  },
};

// Create an instance of PublicClientApplication
const msalInstance = new PublicClientApplication(msalConfig);

// Handle the redirect flows
msalInstance
  .handleRedirectPromise()
  .then((tokenResponse) => {
    // Handle redirect response
  })
  .catch((error) => {
    // Handle redirect error
  });

`handleRedirectPromise`

Panggil handleRedirectPromise saat aplikasi menggunakan alur pengalihan. Saat menggunakan alur pengalihan, handleRedirectPromise harus dijalankan pada setiap pemuatan halaman.

Tiga hasil dimungkinkan dari janji:

.then dipanggil dan tokenResponse adalah benar: Aplikasi mengembalikan dari operasi pengalihan yang berhasil.
.then dipanggil dan tokenResponse salah (null): Aplikasi tidak kembali dari operasi pengalihan.
.catch dipanggil: Aplikasi mengembalikan dari operasi pengalihan dan ada kesalahan.

Menginisialisasi aplikasi MSAL.js 1.x

Menginisialisasi konteks autentikasi MSAL 1.x dengan menginstantiasi UserAgentApplication dengan objek konfigurasi. Properti konfigurasi minimum yang diperlukan adalah clientID aplikasi Anda, ditampilkan sebagai ID Aplikasi (klien) di halaman Gambaran Umum pendaftaran aplikasi di pusat admin Microsoft Entra.

Untuk metode autentikasi dengan alur pengalihan (loginRedirect dan acquireTokenRedirect) di MSAL.js 1.2.x atau yang lebih lama, Anda harus secara eksplisit mendaftarkan panggilan balik untuk keberhasilan atau kesalahan melalui metode .handleRedirectCallback() Mendaftarkan panggilan balik secara eksplisit diperlukan di MSAL.js 1.2.x dan versi sebelumnya karena aliran pengalihan tidak menampilkan janji seperti metode dengan pengalaman popup. Mendaftarkan panggilan balik adalah bersifat opsional di MSAL.js versi 1.3.x dan versi lebih baru.

// Configuration object constructed
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
  },
};

// Create UserAgentApplication instance
const msalInstance = new UserAgentApplication(msalConfig);

function authCallback(error, response) {
  // Handle redirect response
}

// Register a redirect callback for Success or Error (when using redirect methods)
// **REQUIRED** in MSAL.js 1.2.x and earlier
// **OPTIONAL** in MSAL.js 1.3.x and later
msalInstance.handleRedirectCallback(authCallback);

Instans dan konfigurasi tunggal

MSAL.js 1.x dan 2.x dirancang untuk memiliki satu instans dan konfigurasi UserAgentApplication atau PublicClientApplication, masing-masing untuk mewakili satu konteks autentikasi.

Beberapa instans atau PublicClientApplication tidak disarankan UserAgentApplication karena dapat menyebabkan entri dan perilaku cache yang bertentangan di browser.

Langkah berikutnya

Sampel kode MSAL.js 2.x di GitHub mendemonstrasikan pembuatan instans PublicClientApplication dengan objek Konfigurasi:

Share via