Menangani kesalahan dan pengecualian di MSAL React

Artikel ini membahas cara menangani beberapa kesalahan dan pengecualian yang dapat dilemparkan oleh MSAL React. Kami akan membahas BrowserConfigurationAuthErrors, dan BrowserAuthErrors dan menyediakan beberapa langkah pemecahan masalah untuk membantu Anda mengatasinya.

BrowserConfigurationAuthErrors

BrowserConfigurationAuthErrors digunakan untuk mewakili kesalahan yang terjadi karena konfigurasi parameter autentikasi MSAL yang salah, dan dapat terjadi saat menginisialisasi instans PublicClientApplication atau ConfidentialClientApplication . Jika objek konfigurasi yang diteruskan ke konstruktor tidak memenuhi persyaratan pustaka, Anda tidak memberikan ID atau otoritas klien yang valid, atau jika Anda memberikan URI pengalihan yang tidak valid, Anda mungkin mengalami jenis kesalahan ini

stubbed_public_client_application_called

Kesalahan ini berarti bahwa suatu metode telah dipanggil pada instans PublicClientApplication yang telah di-stub atau diinisialisasi secara tidak benar, saat Anda mencoba menggunakan komponen atau hook msal tanpa MsalProvider yang berada lebih tinggi dalam hierarki komponen. Semua kait dan komponen menggunakan API Konteks React dan memerlukan penyedia. Anda mungkin mendapatkan pesan seperti Stub instance of PublicClientApplication was called. If using @azure/msal-react, please ensure context is not used without a provider.

Cuplikan berikut akan menampilkan error ini karena hook useMsal digunakan di luar konteks MsalProvider.

import { useMsal, MsalProvider } from "@azure/msal-react";
import { PublicClientApplication } from "@azure/msal-browser";

const pca = new PublicClientApplication(config);

function App() {
    const { accounts } = useMsal();

    return (
        <MsalProvider instance={pca}>
            <YourAppComponent>
        </ MsalProvider>
    )
}

Untuk mengatasi kesalahan ini, Anda harus memfaktorkan ulang potongan kode sebelumnya agar hook useMsal dipanggil di dalam komponen yang berada di bawah MsalProvider. Implementasi yang benar ditunjukkan dalam cuplikan berikut.

import { useMsal, MsalProvider } from "@azure/msal-react";
import { PublicClientApplication } from "@azure/msal-browser";

const pca = new PublicClientApplication(config);

function ExampleComponent () {
    const { accounts } = useMsal();

    return <YourAppComponent />;
};

function App() {
    return (
        <MsalProvider instance={pca}>
            <ExampleComponent />
        </ MsalProvider>
    )
}

BrowserAuthErrors

BrowserAuthErrors digunakan untuk mewakili kesalahan yang terjadi selama proses autentikasi di lingkungan browser. Kejadian seperti itu dapat terjadi ketika pengguna mencoba memulai permintaan masuk baru saat permintaan sebelumnya masih diproses. Untuk mengatasi kesalahan ini, Anda harus memastikan bahwa setiap interaksi telah selesai sebelum memulai yang baru.

Interaction_in_progress

Kesalahan ini dilemparkan ketika API interaktif (loginPopup, loginRedirect, acquireTokenPopup, acquireTokenRedirect) dipanggil saat API interaktif lain masih berlangsung. API login dan acquireToken bersifat asinkron, jadi Anda perlu memastikan bahwa promise yang dihasilkan sudah resolve sebelum memanggil API lainnya. Anda mungkin mendapatkan pesan kesalahan yang mirip dengan Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.

Dalam @azure/msal-react ada 2 skenario ketika ini dapat terjadi:

1. Aplikasi Anda memanggil salah satu API di luar konteks di mana Anda tidak memiliki akses ke inProgress status. Untuk informasi selengkapnya tentang konteks, lihat Tanya Jawab Umum MSAL React
2. Aplikasi Anda memanggil salah satu API tanpa terlebih dahulu memeriksa apakah interaksi sudah berlangsung di tempat lain.

Cuplikan berikut melemparkan kesalahan ketika komponen lain telah memanggil API interaktif yang sedang berlangsung:

import { useMsal, useIsAuthenticated } from "@azure/msal-react";
import { useEffect } from "react";

export function exampleComponent() {
    const { instance } = useMsal();
    const isAuthenticated = useIsAuthenticated();

    useEffect(() => {
        if (!isAuthenticated) {
            // If another component has already invoked an interactive API this will throw
            await instance.loginPopup();
        }
    }, [isAuthenticated, instance]);
}

Untuk memperbaiki cuplikan sebelumnya, periksa apakah tidak ada interaksi lain yang sedang berlangsung sebelum memanggil loginPopup:

import { useMsal, useIsAuthenticated } from "@azure/msal-react";
import { InteractionStatus } from "@azure/msal-browser";
import { useEffect } from "react";

export function exampleComponent() {
    const { instance, inProgress } = useMsal();
    const isAuthenticated = useIsAuthenticated();

    useEffect(() => {
        if (!isAuthenticated && inProgress === InteractionStatus.None) {
            await instance.loginPopup();
        }
    }, [isAuthenticated, inProgress, instance]);
}

Langkah Pemecahan Masalah

• Aktifkan pengelogan verbose dan lacak urutan peristiwa. Verifikasi bahwa API interaktif tidak dipanggil sebelum api lain diselesaikan. Jika menggunakan alur pengalihan pastikan handleRedirectPromise telah diselesaikan (dilakukan dalam MsalProvider).

Jika Anda tidak dapat mengetahui mengapa kesalahan ini dilemparkan, silakan buka masalah dan bersiaplah untuk membagikan informasi berikut:

• Log verbose
• Contoh cuplikan aplikasi dan/atau kode yang dapat kita gunakan untuk mereproduksi masalah
• Refresh halaman. Apakah kesalahan hilang?
• Buka aplikasi Anda di tab baru. Apakah kesalahan hilang?

Baca juga

Terdapat kesalahan tambahan yang dapat dihasilkan oleh MSAL.js. Anda dapat merujuk ke daftar lengkap kesalahan yang tercakup dalam Browser MSAL.