Háky v MSAL Reactu

Hooky v MSAL React jsou funkce, které umožňují používat funkce MSAL a metody stavu React a životního cyklu uvnitř funkčních komponent. Hlavní háky jsou useAccount, useIsAuthenticated, useMsala useMsalAuthentication. Tento článek vás provede používáním každého z těchto háků.

`useAccount` háček

Hook useAccount přijímá parametr accountIdentifier a vrací objekt AccountInfo pro daný účet, pokud je k němu někdo přihlášen, nebo hodnotu null, pokud tomu tak není. Pokud není zadaný žádný identifikátor účtu, vrátí se aktuální aktivní účet . Více o objektu AccountInfo vráceném v dokumentaci @azure/msal-browser si můžete přečíst v části Rozhraní API pro přihlášení v knihovně 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

Háček useIsAuthenticated vrátí logickou hodnotu označující, jestli je účet přihlášený nebo ne. Volitelně přijímá accountIdentifier objekt, který můžete zadat, pokud potřebujete vědět, jestli je konkrétní účet přihlášený nebo ne.

Určení, jestli je některý účet aktuálně přihlášený

Následující fragment kódu používá useIsAuthenticated háček z @azure/msal-react balíčku. Komponenta pak podmíněně vykreslí zprávu na základě toho, jestli je uživatel přihlášený nebo ne.

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

Určení, jestli je konkrétní uživatel přihlášený

Následující fragment kódu pomocí useIsAuthenticated háku z @azure/msal-react balíčku určí, jestli je konkrétní uživatel přihlášený.

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

Háček useMsal vrátí kontext. Můžete ho použít, pokud potřebujete přístup k PublicClientApplication instanci, seznam účtů aktuálně přihlášených nebo pokud potřebujete vědět, jestli právě probíhá přihlášení nebo jiná interakce.

Poznámka: Hodnota accounts, kterou vrací useMsal, se aktualizuje pouze při přidání nebo odebrání účtů a neaktualizuje se při aktualizaci deklarací identity. Pokud potřebujete přístup k aktualizovaným claimům aktuálního uživatele, použijte hook useAccount nebo místo toho zavolejte acquireTokenSilent.

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

Hook useMsalAuthentication zahájí přihlášení, pokud uživatel ještě není přihlášený, jinak se pokusí získat token.

Vstupní parametry

Háku useMsalAuthentication můžete poskytnout několik různých vstupních parametrů:

interactionType – (Žádné, Překryvné okno, Přesměrování nebo Bezobslužné) určuje, jak chcete získat tokeny nebo přihlášení, když se vyžaduje interakce (všimněte si, že možnost Bezobslužná obsahuje některé další aspekty, které jsou vysvětleny níže).
request object – (volitelné) určuje další parametry, které se použijí voláním přihlášení nebo získání tokenu.
accountIdentifiers – objekt slouží k určení, pro kterého uživatele má hook provést přihlášení nebo získat tokeny

Návratové vlastnosti

výsledek – výsledek posledního úspěšného přihlášení nebo získání tokenu. Všimněte si, že se tento hook pokusí přihlásit nebo získat tokeny automaticky jen jednou. Je odpovědností aplikace v případě potřeby zavolat funkci login nebo acquireToken, aby se tato hodnota aktualizovala.
chyba – Pokud dojde k chybě při přihlášení nebo získání tokenu, tato vlastnost bude obsahovat informace o chybě. K opětovnému pokusu můžete použít funkce login nebo acquireToken, které tento hook vrací. Vlastnost error se vymaže při dalším úspěšném přihlášení nebo získání tokenu.
login – funkce, která se dá použít k opakování neúspěšného přihlášení. Vlastnosti result a error budou aktualizovány.
acquireToken – funkce, která se dá použít k získání nového přístupového tokenu před voláním chráněného rozhraní API. Vlastnosti result a error budou aktualizovány.

Předání typu interakce „Silent“ vyvolá volání ssoSilent, které se pokusí otevřít skryté iframe a znovu použít existující relaci s Microsoft Entra ID. To nebude fungovat v prohlížečích, které blokují soubory cookie třetích stran, jako je Safari. Objekt požadavku je navíc vyžadován při použití typu "Silent". Pokud už máte přihlašovací údaje uživatele, můžete k přihlášení ke konkrétnímu účtu předat jeden z volitelných parametrů loginHint nebo sid. Poznámka: Existují další aspekty – při použití ssoSilent bez poskytnutí jakýchkoli informací o relaci uživatele.

příklad `ssoSilent`

Pokud používáte tichý režim, měli byste zachytit všechny chyby a jako záložní možnost se pokusit o interaktivní přihlášení.

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;

Konkrétní příklad uživatele

Pokud chcete zajistit, aby byl konkrétní uživatel přihlášený, zadejte 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>
    );
}

Viz také

Dokumentaci k rozhraním API, která zpřístupňuje PublicClientApplication, najdete v MSAL Browser:

Váš názor

Byla tato stránka užitečná?

Last updated on 2026-07-02