Vanliga frågor och svar om MSAL React

Compatibility

Vilka webbläsare stöds?

Se här för webbläsare som stöds.

Vilka versioner av React stöds?

Den senaste versionen av @azure/msal-react (v3.x) kräver React 18 eller senare. React 19 rekommenderas för nya projekt.

Har @azure/msal-react stöd för SSR (Server Side Rendering) eller generering av statiska webbplatser?

Yes! Autentisering kan dock inte utföras på serversidan och du bör undvika att anropa MSAL-API:er på serversidan. @azure/msal-react abstraherar en del av den här logiken från dig, men om du skapar anpassad autentiseringslogik kontrollerar du att alla API:er anropas när de återges i webbläsaren. Du kan ta en titt på vårt Next.js exempel och Gatsby-exempel för exempel.

Har @azure/msal-react stöd för klasskomponenter?

Ja, @azure/msal-react stöder både funktions- och klasskomponenter. Hooks kan dock inte användas i klasskomponenter, så du måste använda MSAL-kontexten och använda API:erna som tillhandahålls av @azure/msal-browser för att skapa motsvarande logik. Mer information om hur du använder @azure/msal-react i klasskomponenter finns här.

Kan @azure/msal-react användas med Microsoft Graph JavaScript SDK?

Ja, @azure/msal-react kan användas som en anpassad autentiseringsprovider för Microsoft Graph JavaScript SDK. En implementering finns i exemplet: React SPA anropar Graph API.

Authentication

Hur hanterar jag omdirigeringsflödet i en react-app?

Om du har använt @azure/msal-browser eller msal v1 tidigare kan du vara van vid att anropa handleRedirectCallback eller handleRedirectPromise vid sidinläsning för att hantera svaret på en omdirigering. I @azure/msal-react sker detta bakom kulisserna och du behöver inte anropa handleRedirectPromise själv. När du har ringt loginRedirect eller acquireTokenRedirect omdirigeras till inloggningssidan Microsoft Entra och när du har angett dina autentiseringsuppgifter omdirigeras du tillbaka till din app som nu ska visa att en användare är inloggad. Eftersom det här är en ny, ren instans av ditt program kan det faktiska svarsobjektet inte returneras till det ursprungliga loginRedirect API-anropet. I stället finns det några sätt att få det du behöver:

Om du bara behöver ett ID eller en åtkomsttoken rekommenderar vi att du anropar API:et acquireTokenSilent direkt innan du behöver token. Kontrollera att en användare är inloggad och att interaktionen inte pågår innan du försöker hämta token. Om den föregående omdirigeringsåtgärden lyckades returnerar acquireTokenSilent tokenerna från cachen.

const GetDataFromAPI = () => {
    const { instance, accounts, inProgress } = useMsal();
    const isAuthenticated = useIsAuthenticated();
    const [graphData, setGraphData] = useState(null);

    useEffect(() => {
        if (isAuthenticated && inProgress === InteractionStatus.None) {
            instance.acquireTokenSilent({
                account: accounts[0],
                scopes: ["User.Read"]
            }).then(response => {
                callAPI(response.accessToken);
            })
        }
    }, [inProgress, isAuthenticated, accounts, instance]);
};

Om du behöver direkt åtkomst till svarsobjektet eller felet som returneras av en omdirigeringsåtgärd finns det tre sätt att göra detta:

1. Använd händelse-API :et för att registrera ett återanrop som anropas med svaret när du återvänder till din app. Se till att detta registreras i en kodväg som körs efter omdirigeringen, eftersom eventuella återanrop som registreras innan omdirigeringen kommer att gå förlorade.
2. Använd useMsalAuthentication hook för att logga in. Den här hooken returnerar resultatet eller felet när du återvänder till din app.
3. Anropa handleRedirectPromise, som returnerar resultatet eller avvisas med ett fel om sidan laddades till följd av en omdirigering.

Vad kan jag göra utanför kontexten @azure/msal-react ?

Det korta svaret är att alla komponenter i din app som behöver åtkomst till MSAL-API:er ska återges under en MsalProvider komponent som säkerställer att komponenterna har åtkomst till MSAL-kontexten. Det kan dock finnas scenarier där det är mer meningsfullt att ha en verktygsfunktion utanför komponentträdet för att hantera att hämta åtkomsttoken eller avgöra om en användare är inloggad eller inte. Det går bra att göra så länge du inte anropar API:er som kan ändra användarens loggade tillstånd eller utlösarinteraktion.

Det innebär att följande API:er inte är tillgängliga utanför kontexten för MsalProvider:

• loginPopup
• loginRedirect
• handleRedirectPromise
• ssoSilent
• logout
• acquireTokenPopup
• acquireTokenRedirect

Observera: Om du väljer att använda något annat @azure/msal-browser API utanför react-kontexten bör du fortfarande använda samma PublicClientApplication instans som du skickar till MsalProvider.

Hur implementerar jag självbetjäningsregistrering?

MSAL React stöder självbetjäningsregistrering i autentiseringskodflödet. Se våra dokument här för promptvärden som stöds i begäran och deras förväntade resultat, samt en översikt över självbetjäningsregistrering och konfigurationsändringar som behöver göras i din Azure klientorganisation. Observera att registrering via självbetjäning inte är tillgängligt i B2C- och testmiljöer.

B2C (Företag till Konsument)

Hur hanterar jag flödet för glömt lösenord i en react-app?

Den nya funktionen för lösenordsåterställning är nu en del av registrerings- eller inloggningsprincipen. När användaren väljer länken Har du glömt lösenordet? skickas användaren omedelbart till funktionen Glömt lösenord. Du behöver inte längre någon separat princip för lösenordsåterställning.

Vår rekommendation är att gå över till den nya funktionen för lösenordsåterställning eftersom det förenklar apptillståndet och minskar felhanteringen på användarsidan. Om du av någon anledning måste använda det äldre flödet för glömt lösenord måste du hantera felsvaret AADB2C90118 som returneras från B2C-tjänsten när en användare väljer länken Har du glömt lösenordet? och anropar inloggningen igen med din princip för glömt lösenord.

Om du använder kroken useMsalAuthentication för att logga in kan du kontrollera felet som returneras och anropa återanropet för inloggning med ett nytt begärandeobjekt.

function Example() {
    const { result, error, login } = useMsalAuthentication(InteractionType.Popup);

    useEffect(() => {
        if (error && error.errorMessage.indexOf("AADB2C90118") > -1) {
            const request = {
                authority: "your-b2c-authority/your-password-reset-policy"
            }
            login(InteractionType.Popup, request)
        }
    }, [error]);
}

Om du använder MsalAuthenticationTemplate eller om du anropar någon av inloggnings-API:erna direkt bör du använda händelse-API :et för att fånga felet och hantera det.

function Example() {
    const { instance } = useMsal();

    useEffect(() => {
        const callbackId = instance.addEventCallback((event) => {
            if (event.eventType === EventType.LOGIN_FAILURE) {
                if (event.error && event.error.errorMessage.indexOf("AADB2C90118") > -1) {
                    if (event.interactionType === InteractionType.Redirect) {
                        instance.loginRedirect(forgotPasswordRequest);
                    } else if (event.interactionType === InteractionType.Popup) {
                        instance.loginPopup(forgotPasswordRequest).catch(e => {
                            return;
                        });
                    }
                }
            }
        });

        return () => {
            if (callbackId) {
                instance.removeEventCallback(callbackId);
            }
        };
    }, []);
}

Errors

Om du har frågor om specifika fel som du får kan du läsa följande dokument som beskriver några av de vanliga felen:

• @azure/msal-browser feldokument
• @azure/msal-react feldokument

Vad händer om min fråga inte har besvarats?

Kontrollera först vanliga @azure/msal-browserfrågor och svar för att se om din fråga besvaras där. Eftersom @azure/msal-react är en wrapper kring @azure/msal-browser besvaras många av de frågor du kan ha där.

Om du har frågor om vår roadmap kan du hitta en övergripande översikt över planerade funktioner och lanseringar här.

Om din fråga inte besvaras i det här dokumentet eller i @azure/msal-browser vanliga frågor och svar kan du öppna ett problem så svarar vi så snart vi kan.