Hantera fel och undantag i MSAL React

Den här artikeln beskriver hur du hanterar några av de fel och undantag som kan genereras av MSAL React. Vi går igenom BrowserConfigurationAuthErrors och BrowserAuthErrors och tillhandahåller några felsökningssteg som hjälper dig att lösa dem.

Konfigurationsfel för webbläsarautentisering

BrowserConfigurationAuthErrors används för att representera fel som uppstår på grund av felaktig konfiguration av MSAL-autentiseringsparametrarna och kan inträffa när en PublicClientApplication instans ConfidentialClientApplication initieras. Om konfigurationsobjektet som skickas till konstruktorn inte uppfyller bibliotekets krav anger du inget giltigt klient-ID eller utfärdare, eller om du anger en ogiltig omdirigerings-URI kan det uppstå den här typen av fel

stubbed_public_client_application_called

Det här felet innebär att en metod har anropats på en PublicClientApplication instans som har stubbats ut eller initierats felaktigt, när du försöker använda en msal-komponent eller hook utan en MsalProvider högre upp i komponentträdet. Alla hooks och komponenter använder React Context API och kräver en provider-komponent. Du kan få ett meddelande som liknar Stub instance of PublicClientApplication was called. If using @azure/msal-react, please ensure context is not used without a provider.

Följande kodfragment utlöser det här felet eftersom hooken useMsal används utanför kontexten för 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>
    )
}

För att lösa felet bör du omstrukturera föregående kodfragment så att kroken useMsal anropas i en komponent under MsalProvider. Rätt implementering visas i följande kodfragment.

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 används för att representera fel som uppstår under autentiseringsprocessen i en webbläsarmiljö. Sådana förekomster kan vara när en användare försöker initiera en ny inloggningsbegäran medan en tidigare begäran fortfarande bearbetas. För att lösa dessa fel bör du se till att varje interaktion har slutförts innan du startar en ny.

Interaction_in_progress

Det här felet utlöses när ett interaktivt API (loginPopup, , loginRedirectacquireTokenPopup, acquireTokenRedirect) anropas medan ett annat interaktivt API fortfarande pågår. Inloggnings- och acquireToken-API:erna är asynkrona, så du måste se till att de resulterande löftena har lösts innan du anropar en annan. Du kan få ett felmeddelande som liknar Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.

I @azure/msal-react det finns två scenarier när detta kan inträffa:

  1. Ditt program anropar en av API:erna utanför kontexten där du inte har åtkomst till inProgress tillståndet. Mer information om kontext finns i vanliga frågor och svar om MSAL React
  2. Ditt program anropar ett av API:erna utan att först kontrollera om interaktionen redan pågår någon annanstans.

Följande kodfragment utlöser felet när en annan komponent redan har anropat ett interaktivt API som pågår:

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

Om du vill åtgärda föregående kodfragment kontrollerar du att ingen annan interaktion pågår innan du anropar 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]);
}

Felsökningssteg

  • Aktivera utförlig loggning och spåra händelseordningen. Kontrollera att ett interaktivt API inte anropas innan ett annat har lösts. Om du använder omdirigeringsflödet, se till att handleRedirectPromise har slutförts (görs i MsalProvider).

Om du inte kan förstå varför det här felet uppstår ber vi dig att skapa ett ärende och vara beredd att dela följande information:

  • Utförliga loggar
  • En exempelapp och/eller kodfragment som vi kan använda för att återskapa problemet
  • Uppdatera sidan. Försvinner felet?
  • Öppna programmet på en ny flik. Försvinner felet?

Se även

Det finns ytterligare fel som kan genereras av MSAL.js. Du kan se den fullständiga listan över fel som beskrivs i MSAL Browser.

  • Last updated on