Hooks dans MSAL React

Les hooks dans MSAL React sont des fonctions qui vous permettent d’utiliser des fonctionnalités MSAL et des méthodes d’état et de cycle de vie React à l’intérieur de composants fonctionnels. Les crochets principaux sont useAccount, useIsAuthenticated, useMsal, et useMsalAuthentication. Cet article vous guidera dans l’utilisation de chacun de ces hooks.

`useAccount` Accroche

Le useAccount hook accepte un accountIdentifier paramètre et retourne l’objet AccountInfo de ce compte s’il est connecté ou null s’il n’est pas. Si aucun identificateur de compte n’est fourni, le compte actif actuel est retourné. Vous pouvez en savoir plus sur l’objet AccountInfo renvoyé dans la documentation @azure/msal-browser, dans Les API de connexion dans 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` Accroche

Le useIsAuthenticated hook retourne une valeur booléenne indiquant si un compte est connecté ou non. Elle accepte éventuellement un accountIdentifier objet que vous pouvez fournir si vous devez savoir si un compte spécifique est connecté ou non.

Déterminer si un compte est actuellement connecté

L’extrait de code suivant utilise le useIsAuthenticated hook à partir du @azure/msal-react package. Le composant affiche ensuite conditionnellement un message en fonction de la connexion ou non d’un utilisateur.

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

Déterminer si un utilisateur spécifique est connecté

L’extrait de code suivant utilise le useIsAuthenticated hook à partir du @azure/msal-react package pour déterminer si un utilisateur spécifique est connecté.

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` Accroche

Le useMsal hook retourne le contexte. Cela peut être utilisé si vous avez besoin d’accéder à l’instance PublicClientApplication , de la liste des comptes actuellement connectés ou si vous devez savoir si une connexion ou une autre interaction est en cours.

Remarque : la valeur accounts retournée par useMsal n’est mise à jour que lorsque des comptes sont ajoutés ou supprimés, et ne sera pas mise à jour lorsque les revendications sont mises à jour. Si vous avez besoin d’accéder à des claims mis à jour pour l’utilisateur actuel, utilisez le hook useAccount ou appelez acquireTokenSilent à la place.

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` Accroche

Le useMsalAuthentication hook lance une connexion si un utilisateur n’est pas déjà connecté ; sinon, il tente d’acquérir un jeton.

Paramètres d’entrée

Il existe quelques paramètres d’entrée différents que vous pouvez fournir au useMsalAuthentication hook :

interactionType : (None, Popup, Redirect ou Silent) spécifie la façon dont vous souhaitez acquérir des jetons ou une connexion lorsque l’interaction est requise (notez que l’option Silencieux comporte quelques considérations supplémentaires expliquées ci-dessous).
objet de requête - (facultatif) spécifie des paramètres supplémentaires utilisés par l’appel de connexion ou d’acquisition de jeton
accountIdentifiers - l’objet sert à indiquer au hook pour quel utilisateur il doit établir la connexion ou acquérir des jetons

Propriétés de retour

résultat : résultat de la dernière acquisition de jetons ou de connexion réussie. Notez que ce hook tente uniquement une seule fois de se connecter ou d’obtenir automatiquement des jetons. Il appartient à l’application d’appeler la fonction login ou acquireToken, si nécessaire, pour mettre à jour cette valeur.
erreur : si une erreur se produit lors de l’acquisition de jetons ou de connexion, cette propriété contient des informations sur l’erreur. Vous pouvez utiliser la fonction login ou acquireToken renvoyée par ce hook pour réessayer. La propriété error sera effacée à la prochaine connexion réussie ou obtention d’un jeton.
login - fonction qui peut être utilisée pour réessayer une connexion ayant échoué. Les propriétés result et error seront mises à jour.
acquireToken - fonction qui peut être utilisée pour obtenir un nouveau jeton d’accès avant d’appeler une API protégée. Les propriétés result et error seront mises à jour.

Le passage du type d’interaction « Silencieux » appellera ssoSilent qui tente d’ouvrir un iframe masqué et de réutiliser une session existante avec Microsoft Entra ID. Cela ne fonctionnera pas dans les navigateurs qui bloquent les cookies tiers tels que Safari. En outre, l’objet de requête est requis lors de l’utilisation du type « Silencieux ». Si vous disposez déjà des informations de connexion de l’utilisateur, vous pouvez transmettre l’un des paramètres facultatifs loginHint ou sid pour connecter un compte spécifique. Remarque : il existe des considérations supplémentaires : lors de l’utilisation ssoSilent sans fournir d’informations sur la session de l’utilisateur.

`ssoSilent` exemple

Si vous utilisez le mode silencieux, vous devez intercepter les erreurs et tenter une connexion interactive en tant que secours.

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;

Exemple d’utilisateur spécifique

Si vous souhaitez vous assurer qu’un utilisateur spécifique est connecté, fournissez un accountIdentifiers objet.

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

Voir aussi

Vous trouverez de la documentation pour les API PublicClientApplication exposées dans MSAL Browser :

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-07-02