Hooks i MSAL React

Hooks i MSAL React är funktioner som gör att du kan använda MSAL-funktioner och React-tillstånd och livscykelmetoder i funktionella komponenter. Huvudkrokerna är useAccount, useIsAuthenticated, useMsaloch useMsalAuthentication. Den här artikeln guidar dig genom hur du använder var och en av de här hooksen.

`useAccount` hook

Kroken useAccount accepterar en accountIdentifier parameter och returnerar AccountInfo objektet för det kontot om det är loggat in eller null om det inte är det. Om ingen kontoidentifierare anges returneras det aktuella aktiva kontot . Du kan läsa mer om objektet som AccountInfo returneras i @azure/msal-browser dokumenten i Inloggnings-API:er i MSAL.

const accountIdentifier = {
    localAccountId: "example-local-account-identifier",
    homeAccountId: "example-home-account-identifier"
    username: "example-username" // We do not recommend relying only on username
}

const accountInfo = useAccount(accountIdentifier);

`useIsAuthenticated` hook

Kroken useIsAuthenticated returnerar ett booleskt värde som anger om ett konto är loggat in eller inte. Det kan också acceptera ett accountIdentifier objekt som du kan ange om du behöver veta om ett specifikt konto är loggat in eller inte.

Ta reda på om något konto är inloggad för tillfället

Följande kodfragment använder hooken useIsAuthenticated från paketet @azure/msal-react. Komponenten återger sedan villkorligt ett meddelande baserat på om en användare är inloggad eller inte.

import React from 'react';
import { useIsAuthenticated } from "@azure/msal-react";

export function App() {
    const isAuthenticated = useIsAuthenticated();

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            {isAuthenticated && (
                <p>At least one account is signed in!</p>
            )}
            {!isAuthenticated && (
                <p>No users are signed in!</p>
            )}
        </React.Fragment>
    );
}

Ta reda på om en specifik användare är inloggad

Följande kodfragment använder kroken useIsAuthenticated@azure/msal-react från paketet för att avgöra om en specifik användare är inloggad.

import React from 'react';
import { useIsAuthenticated } from "@azure/msal-react";

export function App() {
    const accountIdentifiers = {
        localAccountId: "example-local-account-identifier",
        homeAccountId: "example-home-account-identifier",
        username: "example-username"
    }

    const isAuthenticated = useIsAuthenticated(accountIdentifiers);

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            {isAuthenticated && (
                <p>User with specified localAccountId is signed in!</p>
            )}
            {!isAuthenticated && (
                <p>User with specified localAccountId is not signed in!</p>
            )}
        </React.Fragment>
    );
}

`useMsal` hook

Kroken useMsal returnerar kontexten. Detta kan användas om du behöver åtkomst till instansen PublicClientApplication , listan över konton som för närvarande är inloggade eller om du behöver veta om en inloggning eller annan interaktion pågår för närvarande.

Obs! Värdet accounts som returneras av useMsal uppdateras bara när konton läggs till eller tas bort och uppdateras inte när anspråk uppdateras. Om du behöver åtkomst till uppdaterade claims för den aktuella användaren använder du useAccount hook eller anropar acquireTokenSilent i stället.

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

const { instance, accounts, inProgress } = useMsal();
const [loading, setLoading] = useState(false);
const [apiData, setApiData] = useState(null);

useEffect(() => {
    if (!loading && inProgress === InteractionStatus.None && accounts.length > 0) {
        if (apiData) {
            // Skip data refresh if already set - adjust logic for your specific use case
            return;
        }

        const tokenRequest = {
            account: accounts[0], // This is an example - Select account based on your app's requirements
            scopes: ["User.Read"]
        }

        // Acquire an access token
        instance.acquireTokenSilent(tokenRequest).then((response) => {
            // Call your API with the access token and return the data you need to save in state
            callApi(response.accessToken).then((data) => {
                setApiData(data);
                setLoading(false);
            });
        }).catch(async (e) => {
            // Catch interaction_required errors and call interactive method to resolve
            if (e instanceof InteractionRequiredAuthError) {
                await instance.acquireTokenRedirect(tokenRequest);
            }

            throw e;
        });
    }
}, [inProgress, accounts, instance, loading, apiData]);

if (loading || inProgress === InteractionStatus.Login) {
    // Render loading component
} else if (apiData) {
    // Render content that depends on data from your API
}

`useMsalAuthentication` hook

Hooken useMsalAuthentication initierar en inloggning om en användare inte redan är inloggad, annars försöker den hämta en token.

Indataparametrar

Det finns några olika indataparametrar som du kan ange för kroken useMsalAuthentication :

interactionType – (Ingen, Popup, Omdirigering eller Tyst) anger hur du vill hämta token eller inloggning när interaktion krävs (observera att alternativet Tyst har några extra överväganden som beskrivs nedan).
request object – (valfritt) anger ytterligare parametrar som ska användas av anropet för inloggning eller tokenförvärv
accountIdentifiers – objektet används för att tala om för hooken vilken användare det ska logga in eller hämta token för

Returnera egenskaper

result – Resultatet från den senaste lyckade inloggningen eller tokenförvärvet. Observera att den här hooken bara försöker logga in sig eller hämta token automatiskt en gång. Det är programmets ansvar att anropa login funktionen eller acquireToken när det behövs för att uppdatera det här värdet.
error – Om ett fel inträffar under inloggningen eller tokenförvärvet innehåller den här egenskapen information om felet. Du kan använda funktionerna login eller acquireToken som returneras av den här kroken för att försöka igen. Egenskapen error rensas vid nästa lyckade inloggning eller tokenförvärv.
login – funktion som kan användas för att försöka logga in igen. Egenskaperna result och error uppdateras.
acquireToken – funktion som kan användas för att hämta en ny åtkomsttoken innan du anropar ett skyddat API. Egenskaperna result och error uppdateras.

Om du anger interaktionstypen "Silent" kommer ssoSilent att försöka öppna en dold iframe och återanvända en befintlig session med Microsoft Entra ID. Detta fungerar inte i webbläsare som blockerar cookies från tredje part, till exempel Safari. Dessutom krävs begärandeobjektet när du använder typen "Tyst". Om du redan har användarens inloggningsinformation kan du skicka med de valfria parametrarna loginHint eller sid för att logga in på ett visst konto. Obs! Det finns ytterligare överväganden – när du använder ssoSilent utan att ange någon information om användarens session.

`ssoSilent` exempel

Om du använder silent-läge bör du fånga upp eventuella fel och försöka med en interaktiv inloggning som reservlösning.

import React, { useEffect } from 'react';

import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal, useMsalAuthentication } from "@azure/msal-react";
import { InteractionType, InteractionRequiredAuthError } from '@azure/msal-browser';

function App() {
    const request = {
        loginHint: "name@example.com",
        scopes: ["User.Read"]
    }
    const { login, result, error } = useMsalAuthentication(InteractionType.Silent, request);

    useEffect(() => {
        if (error instanceof InteractionRequiredAuthError) {
            login(InteractionType.Popup, request);
        }
    }, [error]);

    const { accounts } = useMsal();

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            <AuthenticatedTemplate>
                <p>Signed in as: {accounts[0]?.username}</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <p>No users are signed in!</p>
            </UnauthenticatedTemplate>
        </React.Fragment>
    );
}

export default App;

Specifikt användarexempel

Om du vill se till att en viss användare är inloggad anger du ett accountIdentifiers objekt.

import React from 'react';
import { useMsalAuthentication } from "@azure/msal-react";
import { InteractionType } from '@azure/msal-browser';

export function App() {
    const accountIdentifiers = {
        username: "example-username"
    }
    const request = {
        loginHint: "example-username",
        scopes: ["User.Read"]
    }
    const { login, result, error } = useMsalAuthentication(InteractionType.Popup, request, accountIdentifiers);

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            <AuthenticatedTemplate username="example-username">
                <p>Example user is signed in!</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate username="example-username">
                <p>Example user is not signed in!</p>
            </UnauthenticatedTemplate>
        </React.Fragment>
    );
}

Se även

Du kan hitta dokumentation för de API:er som PublicClientApplication exponeras i MSAL Browser:

Feedback

Var den här sidan till hjälp?

Last updated on 2026-07-02