Horgok az MSAL Reactben

Az MSAL React horgai olyan függvények, amelyek lehetővé teszik az MSAL-funkciók és a React állapot- és életciklus-metódusok használatát a funkcionális összetevőkben. A fő hookok a useAccount, useIsAuthenticated, useMsal és useMsalAuthentication. Ez a cikk bemutatja, hogyan használhatja ezeket a horgokat.

useAccount hook

A useAccount horog elfogad egy paramétert accountIdentifier , és visszaadja a AccountInfo fiók objektumát, ha be van jelentkezve, vagy null ha nem. Ha nincs megadva fiókazonosító, a rendszer az aktuális aktív fiókot adja vissza. A Bejelentkezési API-k az MSAL-ben című részben többet is olvashat a @azure/msal-browser dokumentációban visszaadott AccountInfo objektumról.

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

A useIsAuthenticated horog egy logikai értéket ad vissza, amely jelzi, hogy be van-e jelentkezve egy fiók. Opcionálisan elfogad egy accountIdentifier olyan objektumot, amelyet megadhat, ha tudnia kell, hogy egy adott fiók be van-e jelentkezve.

Annak megállapítása, hogy van-e jelenleg bejelentkezve valamelyik fiók

Az alábbi kódrészlet a useIsAuthenticated csomagból származó @azure/msal-react horogot használja. Az összetevő ezután feltételesen megjelenít egy üzenetet attól függően, hogy egy felhasználó bejelentkezett-e vagy sem.

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

Annak megállapítása, hogy egy adott felhasználó bejelentkezett-e

Az alábbi kódrészlet a useIsAuthenticated csomagból származó @azure/msal-react horoggal állapítja meg, hogy egy adott felhasználó bejelentkezett-e.

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

A useMsal hook visszaadja a kontextust. Ez akkor használható, ha hozzá kell férnie a PublicClientApplication példányhoz, a jelenleg bejelentkezett fiókok listájához, vagy ha tudnia kell, hogy egy bejelentkezés vagy más interakció jelenleg folyamatban van-e.

Megjegyzés: A accounts visszaadott useMsal érték csak a fiókok hozzáadásakor vagy eltávolításakor frissül, és nem frissül a jogcímek frissítésekor. Ha a jelenlegi felhasználó frissített jogcímadataihoz kell hozzáférnie, használja a useAccount hookot, vagy inkább hívja meg a acquireTokenSilent-t.

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

A useMsalAuthentication hook bejelentkezést kezdeményez, ha a felhasználó még nincs bejelentkezve, ellenkező esetben pedig megpróbál tokent szerezni.

Bemeneti paraméterek

A horognak számos különböző bemeneti paramétert adhat meg useMsalAuthentication :

  • interactionType – (Nincs, Előugró, Átirányítás vagy Csendes) megadja, hogyan szeretne jogkivonatokat vagy bejelentkezést beszerezni, ha interakcióra van szükség (vegye figyelembe, hogy a Csendes beállítás néhány további szempontot is ismertet alább).
  • request object – (nem kötelező) a bejelentkezési vagy jogkivonat-beszerzési hívás által használandó további paramétereket adja meg
  • accountIdentifiers – az objektum arra szolgál, hogy megadja a hooknak, melyik felhasználót jelentse be, vagy melyikhez szerezzen tokeneket

Tulajdonságok visszaküldése

  • eredmény – Az utolsó sikeres bejelentkezés vagy jogkivonat-beszerzés eredménye. Vegye figyelembe, hogy ez a hook csak egyszer próbál meg automatikusan bejelentkezni vagy tokeneket szerezni. Az alkalmazás felelőssége, hogy szükség esetén meghívja a login vagy acquireToken függvényt ennek az értéknek a frissítéséhez.
  • hiba – Ha a bejelentkezés vagy a jogkivonat beszerzése során hiba történik, ez a tulajdonság a hibával kapcsolatos információkat fogja tartalmazni. Az újrapróbálkozáshoz használhatja az e hook által visszaadott login vagy acquireToken függvényt. A error tulajdonság a következő sikeres bejelentkezéskor vagy jogkivonat-beszerzéskor törlődik.
  • login - függvény, amely a sikertelen bejelentkezés újrapróbálkozásához használható. A(z) result és error tulajdonságok frissülnek.
  • acquireToken - függvény, amely egy új hozzáférési jogkivonat lekérésére használható védett API meghívása előtt. A(z) result és error tulajdonságai frissülnek.

A „Silent” interakciótípus átadása meghívja a(z) ssoSilent elemet, amely megpróbál megnyitni egy rejtett iframe-et, és újra felhasználni egy meglévő Microsoft Entra ID-munkamenetet. Ez nem működik olyan böngészőkben, amelyek letiltják a harmadik féltől származó cookie-kat, például a Safarit. Emellett a "Csendes" típus használatakor a kérelemobjektumra is szükség van. Ha már rendelkezik a felhasználó bejelentkezési adataival, egy adott fiókba való bejelentkezéshez átadhatja a loginHint vagy a sid opcionális paraméterek valamelyikét. Megjegyzés: további szempontokat is figyelembe kell venni – ha ssoSilent a felhasználó munkamenetéről nem ad meg semmilyen információt.

ssoSilent példa

Ha csendes módot használ, le kell kezelnie minden hibát, és tartalék megoldásként meg kell kísérelnie az interaktív bejelentkezést.

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;

Adott felhasználói példa

Ha meg szeretné győződni arról, hogy egy adott felhasználó bejelentkezett, adjon meg egy accountIdentifiers objektumot.

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

Lásd még

Az PublicClientApplication által elérhetővé tett API-k dokumentációját az MSAL Browserben találja:

  • Last updated on