MSAL React FAQ

Compatibility

Quels navigateurs sont pris en charge ?

Consultez ici pour les navigateurs pris en charge.

Quelles sont les versions de React prises en charge ?

La dernière version de @azure/msal-react (v3.x) nécessite React 18 ou version ultérieure. React 19 est recommandé pour les nouveaux projets.

@azure/msal-react prend-il en charge le rendu côté serveur (SSR) ou la génération de sites statiques ?

Yes! Toutefois, l’authentification ne peut pas se faire côté serveur et vous devez éviter d’invoquer les API MSAL côté serveur. @azure/msal-react extrait une partie de cette logique loin de vous, mais si vous créez une logique d’authentification personnalisée, vérifiez que toutes les API sont appelées lors du rendu dans le navigateur. Vous pouvez examiner notre exempleNext.js et l’exemple Gatsby pour obtenir des exemples.

@azure/msal-react prend-il en charge les composants de classe ?

Oui, @azure/msal-react prend en charge les composants de fonction et de classe. Toutefois, les hooks ne peuvent pas être utilisés dans les composants de classe ; vous devrez donc exploiter le contexte MSAL et utiliser les API fournies par @azure/msal-browser pour créer une logique équivalente. Vous trouverez plus d’informations sur l’utilisation @azure/msal-react dans les composants de classe ici.

Peut-il @azure/msal-react être utilisé avec Microsoft Graph Kit de développement logiciel (SDK) JavaScript ?

Oui, @azure/msal-react vous pouvez l’utiliser comme fournisseur d’authentification personnalisé pour le sdk JavaScript Microsoft Graph. Pour une implémentation, consultez l'exemple : Application monopage React appelant l'API Graph.

Authentication

Comment gérer le flux de redirection dans une application React ?

Si vous avez utilisé @azure/msal-browser ou msal v1 par le passé, vous avez peut-être l’habitude d’appeler handleRedirectCallback ou handleRedirectPromise au chargement de la page pour traiter la réponse à une redirection. Dans @azure/msal-react, cela se fait en interne et vous n’avez pas besoin d’appeler handleRedirectPromise vous-même. Après avoir appelé loginRedirect ou acquireTokenRedirect vous êtes redirigé vers la page de connexion Microsoft Entra, et après avoir entré vos informations d'identification, vous êtes redirigé vers votre application, ce qui doit maintenant indiquer qu'un utilisateur est connecté. Étant donné qu’il s’agit d’une nouvelle instance propre de votre application, l’objet de réponse réel ne peut pas être retourné à l’appel d’API d’origine loginRedirect . Au lieu de cela, vous pouvez obtenir ce dont vous avez besoin :

Si vous avez simplement besoin d’un ID ou d’un jeton d’accès, nous vous recommandons d’appeler l’API acquireTokenSilent juste avant d’avoir besoin du jeton. Veillez à vérifier qu’un utilisateur est connecté et que l’interaction n’est pas en cours avant de tenter de récupérer le jeton. Si l’opération de redirection précédente a réussi, acquireTokenSilent retournera les jetons du cache.

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

Si vous avez besoin d’un accès direct à l’objet de réponse ou à l’erreur retourné par une opération de redirection, il existe trois façons de procéder :

1. Utilisez l’API d’événement pour inscrire un rappel qui sera appelé avec la réponse lorsque vous revenez à votre application. Assurez-vous que cela est enregistré dans une portion du code exécutée après la redirection, car toutes les fonctions de rappel enregistrées avant la redirection seront perdues.
2. Utilisez le hook useMsalAuthentication pour vous connecter. Ce hook retourne le résultat ou l’erreur lorsque vous êtes retourné à votre application.
3. Appelez handleRedirectPromise, qui se résout avec le résultat ou génère une erreur si la page a été chargée à la suite d'une redirection.

Que puis-je faire en dehors du @azure/msal-react contexte ?

La courte réponse est que tous les composants de votre application qui ont besoin d’accéder aux API MSAL doivent être affichés sous un MsalProvider composant garantissant que vos composants ont accès au contexte MSAL. Toutefois, il peut exister des scénarios où il est plus judicieux d’avoir une fonction utilitaire en dehors de l’arborescence de composants pour gérer l’acquisition de jetons d’accès ou déterminer si un utilisateur est connecté ou non. Il n’y a pas de problème à le faire tant que vous n’appelez pas d’API qui peuvent change l’état de connexion de l’utilisateur ou déclencher une interaction.

Cela signifie que les API suivantes sont hors limites en dehors du contexte de MsalProvider:

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

Remarque : Si vous choisissez d’utiliser une autre API @azure/msal-browser en dehors du contexte React, vous devez tout de même utiliser la même instance PublicClientApplication que celle que vous transmettez à MsalProvider.

Comment implémenter l’inscription en libre-service ?

MSAL React prend en charge l’inscription en libre-service dans le flux de code d’authentification. Consultez notre documentation ici pour connaître les valeurs de paramètre prompt prises en charge dans la requête et leurs résultats attendus, ainsi qu’une vue d’ensemble de l’inscription en libre-service et des modifications de configuration à apporter à votre tenant Azure. Notez que l’inscription en libre-service n’est pas disponible dans les environnements B2C et de test.

Business to Consumer (B2C)

Comment gérer le flux de mot de passe oublié dans une application React ?

La nouvelle expérience de réinitialisation de mot de passe fait désormais partie de la stratégie d’inscription ou de connexion. Quand l’utilisateur sélectionne le lien Vous avez oublié votre mot de passe ? , il est immédiatement dirigé vers l’expérience Mot de passe oublié. Vous n’avez plus besoin d’une stratégie distincte pour la réinitialisation du mot de passe.

Notre recommandation est de passer à la nouvelle expérience de réinitialisation du mot de passe, car elle simplifie la gestion de l’état de l’application et réduit les erreurs à gérer côté utilisateur. Si, pour une raison quelconque, vous devez utiliser l’ancien flux AADB2C90118« Mot de passe oublié », vous devrez gérer la réponse d’erreur renvoyée par le service B2C lorsqu’un utilisateur sélectionne le lien Vous avez oublié votre mot de passe ?, puis relancer la connexion avec votre stratégie « Mot de passe oublié ».

Si vous utilisez le useMsalAuthentication hook pour vous connecter, vous pouvez inspecter l’erreur retournée et appeler le rappel de connexion avec un nouvel objet de requête.

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

Si vous utilisez MsalAuthenticationTemplate ou si vous appelez directement l’une des API de connexion, vous devez utiliser l’API d’événements pour intercepter l’erreur et la gérer.

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

Si vous avez des questions sur des erreurs spécifiques que vous recevez, consultez les documents suivants détaillant certaines des erreurs courantes :

• @azure/msal-browser document d’erreur
• @azure/msal-react document d’erreur

Que se passe-t-il si ma question n’a pas été répondue ?

Vérifiez tout d’abord le @azure/msal-browserFAQ pour voir si votre question est répondue là-bas. Étant donné que @azure/msal-react est une enveloppe autour de @azure/msal-browser, vous y trouverez la réponse à de nombreuses questions que vous pourriez vous poser.

Si vous avez des questions sur notre feuille de route, vous trouverez une vue d’ensemble générale des fonctionnalités et versions planifiées ici.

Si votre question n’est pas répondue dans ce document ou dans la @azure/msal-browser FAQ, vous pouvez ouvrir un problème et nous y répondrons dès que nous le pouvons.