Zpracování chyb a výjimek v MSAL Reactu

Tento článek popisuje, jak zpracovat některé chyby a výjimky, které může vyvolat MSAL React. Probereme BrowserConfigurationAuthErrors a BrowserAuthErrors a poskytneme několik kroků pro řešení potíží, které vám pomůžou je vyřešit.

BrowserConfigurationAuthErrors

BrowserConfigurationAuthErrors slouží k reprezentaci chyb, ke kterým dochází v důsledku nesprávné konfigurace parametrů ověřování MSAL, a mohou nastat při inicializaci instance PublicClientApplication nebo ConfidentialClientApplication. Pokud objekt konfigurace předaný konstruktoru nesplňuje požadavky knihovny, nezadáte platné ID klienta nebo autoritu nebo pokud zadáte neplatný identifikátor URI přesměrování, může dojít k tomuto typu chyby.

stubbed_public_client_application_called

Tato chyba znamená, že byla volána metoda na instanci PublicClientApplication, která byla nahrazena zástupným objektem nebo nesprávně inicializována, když se pokusíte použít komponentu nebo hook MSAL bez MsalProvider umístěného výše ve stromu komponent. Všechny háky a komponenty využívají rozhraní API React Context a vyžadují zprostředkovatele. Může se zobrazit zpráva podobná Stub instance of PublicClientApplication was called. If using @azure/msal-react, please ensure context is not used without a provider.

Následující fragment kódu vyvolá tuto chybu, protože useMsal háček se používá mimo kontext 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>
    )
}

Chcete-li chybu vyřešit, měli byste refaktorovat předchozí úryvek kódu tak, aby byl hook useMsal volán v komponentě pod MsalProvider. Správná implementace se zobrazí v následujícím fragmentu kódu.

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 slouží k reprezentaci chyb, ke kterým dochází během procesu ověřování v prostředí prohlížeče. Tyto výskyty můžou být, když se uživatel pokusí zahájit novou žádost o přihlášení, zatímco předchozí požadavek se stále zpracovává. Pokud chcete tyto chyby vyřešit, měli byste před spuštěním nové interakce zajistit dokončení každé interakce.

Interaction_in_progress

Tato chyba se vyvolá, když se vyvolá interaktivní rozhraní API (loginPopup, loginRedirectacquireTokenPopup, ), acquireTokenRedirectzatímco probíhá jiné interaktivní rozhraní API. Rozhraní API pro přihlášení a získáníTokenu jsou asynchronní, takže budete muset zajistit, aby se výsledné přísliby vyřešily před vyvoláním jiného. Může se zobrazit chybová zpráva podobná této: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.

V @azure/msal-react existují 2 scénáře, kdy k tomu může dojít:

  1. Vaše aplikace volá jedno z rozhraní API mimo kontext, ve kterém nemáte přístup ke inProgress stavu. Další informace o kontextu najdete v nejčastějších dotazech k MSAL Reactu.
  2. Vaše aplikace volá jedno z rozhraní API bez první kontroly, jestli už probíhá interakce jinde.

Následující fragment kódu vyvolá chybu, pokud už jiná komponenta vyvolala interaktivní rozhraní API, které probíhá:

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

Pokud chcete předchozí fragment kódu opravit, před vyvoláním loginPopupzkontrolujte, že neprobíhá žádná jiná interakce:

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

Postup při řešení problémů

  • Povolte podrobné protokolování a sledujte pořadí událostí. Ověřte, že interaktivní rozhraní API není voláno dříve, než se dokončí jiné volání rozhraní API. Pokud používáte proces přesměrování, ujistěte se, že handleRedirectPromise bylo dokončeno (což se provádí v MsalProvider).

Pokud nemůžete zjistit, proč k této chybě dochází, otevřete problém a připravte se na sdílení následujících informací:

  • Podrobné protokoly
  • Ukázková aplikace nebo fragmenty kódu, které můžeme použít k reprodukci problému
  • Aktualizujte stránku. Zmizí chyba?
  • Otevřete aplikaci v nové kartě. Zmizí chyba?

Viz také

Existují další chyby, které mohou být vyvolány knihovnou MSAL.js. Můžete se podívat na úplný seznam chyb popsaných v prohlížeči MSAL.

  • Last updated on