Utilisation de MSAL React avec des composants de classe

MSAL React prend en charge les composants de fonction et les composants de classe. Cet article fournit des conseils sur l’utilisation de MSAL React avec des composants de classe, ce qui vous permet d’initialiser, de protéger et d’accéder au contexte MSAL React dans vos composants de classe.

Il est important de noter que vous ne pourrez pas utiliser les @azure/msal-react hooks dans vos composants de classe. Si vous avez besoin d’accéder à l’état d’authentification à l’intérieur de votre composant de classe, vous devez utiliser @azure/msal-browser directement pour obtenir des fonctionnalités similaires.

Prerequisites

Initialisation

L’initialisation avec des composants de classe avec MSAL React fonctionne de manière très similaire aux composants de fonction. Comme lorsque vous utilisez des composants de fonction, vous aurez besoin d’un MsalProvider composant au niveau supérieur de l’arborescence des composants qui nécessite l’accès à l’état d’authentification.

Dans l’extrait de code suivant, le MsalProvider composant est utilisé pour encapsuler l’ensemble de l’application, ce qui rend l’instance MSAL disponible pour tous les composants enfants. Cela permet aux composants enfants d’utiliser MSAL pour l’authentification utilisateur, l’acquisition de jetons et l’appel d’API protégées.

import React from "react";
import { MsalProvider } from "@azure/msal-react";
import { PublicClientApplication } from "@azure/msal-browser";

const pca = new PublicClientApplication(config);

class App extends React.Component {
    render() {
        return (
            <MsalProvider instance={pca}>
                <YourAppComponents>
            </ MsalProvider>
        );
    }
}

Protection des composants

Dans MSAL React, vous pouvez protéger vos composants et effectuer un rendu conditionnel en fonction de l’état d’authentification de l’utilisateur. Cela fonctionne de la même façon que l’utilisation des composants de fonction. Les principaux exemples sont les suivants :

• AuthenticatedTemplate - Ce composant affiche uniquement ses enfants si l’utilisateur est authentifié. Si l’utilisateur n’est pas authentifié, il n’affiche rien.
• UnauthenticatedTemplate - Ce composant affiche uniquement ses enfants si l’utilisateur n’est pas authentifié. Si l’utilisateur est authentifié, il n’affiche rien.
• MsalAuthenticationTemplate - Ce composant tente d’authentifier l’utilisateur avant de rendre ses enfants. Vous pouvez spécifier le type d’interaction (redirection ou fenêtre contextuelle) en tant que propriété. Si l’utilisateur n’est pas authentifié, il lance le processus d’authentification.

L’extrait de code suivant montre comment utiliser AuthenticatedTemplate, UnauthenticatedTemplateet MsalAuthenticationTemplate protéger vos composants React. Notez comment MSAL Provider entoure les composants enfants.

import React from "react";
import { MsalProvider, AuthenticatedTemplate, UnauthenticatedTemplate, MsalAuthenticationTemplate } from "@azure/msal-react";
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";

const pca = new PublicClientApplication(config);

class App extends React.Component {
    render() {
        return (
            <MsalProvider instance={pca}>
                <AuthenticatedTemplate>
                    <span>This will only render for authenticated users</span>
                </ AuthenticatedTemplate>
                <UnauthenticatedTemplate>
                    <span>This will only render for unauthenticated users</span>
                </ UnauthenticatedTemplate>
                <MsalAuthenticationTemplate interactionType={InteractionType.Popup}>
                    <span>This will only render for authenticated users.</span>
                </ MsalAuthenticationTemplate>
            </ MsalProvider>
        );
    }
}

Accès au contexte MSAL React dans un composant de classe

Le useMsal hook ne peut pas être utilisé pour accéder au contexte MSAL React dans un composant de classe. Cela est dû au fait que les hooks ne peuvent être utilisés que dans les composants de fonction où vous pouvez utiliser des fonctionnalités sans instance. Étant donné que les composants de classe ont des instances, vous avez 2 autres options. Vous pouvez utiliser directement le contexte brut ou utiliser le withMsal composant de commande supérieure pour injecter le contexte dans les propriétés de votre composant.

Accès au contexte brut

L’extrait de code suivant montre comment utiliser le MsalContext pour accéder au contexte brut dans un composant de classe.

import React from "react";
import { MsalProvider, MsalContext } from "@azure/msal-react";
import { PublicClientApplication } from "@azure/msal-browser";

const pca = new PublicClientApplication(config);

class App extends React.Component {
    render() {
        return (
            <MsalProvider instance={pca}>
                <YourClassComponent/>
            </ MsalProvider>
        );
    }
}

class YourClassComponent extends React.Component {
    static contextType = MsalContext;

    render() {
        const isAuthenticated = this.context.accounts.length > 0;
        if (isAuthenticated) {
            return <span>There are currently {this.context.accounts.length} users signed in!</span>
        }
    }
}

Pour obtenir un exemple de travail, reportez-vous à ProfileRawContext.jsx dans notre exemple react-router-sample.

Accéder via withMsal HOC

L’alternative consiste à utiliser le composant withMsal d’ordre supérieur pour injecter le contexte dans les propriétés de votre composant. L’extrait de code suivant montre comment utiliser le withMsal HOC pour accéder au contexte MSAL React au sein d’un composant de classe.

import React from "react";
import { MsalProvider, withMsal } from "@azure/msal-react";
import { PublicClientApplication } from "@azure/msal-browser";

const pca = new PublicClientApplication(config);

class YourClassComponent extends React.Component {
    render() {
        const isAuthenticated = this.props.msalContext.accounts.length > 0;
        if (isAuthenticated) {
            return <span>There are currently {this.props.msalContext.accounts.length} users signed in!</span>
        }
    }
}

const YourWrappedComponent = withMsal(YourClassComponent);

class App extends React.Component {
    render() {
        return (
            <MsalProvider instance={pca}>
                <YourWrappedComponent />
            </ MsalProvider>
        );
    }
}

Pour obtenir un exemple de travail, reportez-vous à ProfileWithMsal.jsx dans react-router-sample.

Se connecter avec un composant de classe

Quelle que soit l’approche que vous prenez pour obtenir le MSAL React contexte, l’utilisation sera la même. Une fois que vous disposez de l’objet de contexte, vous pouvez appeler l’une des API sur PublicClientApplication, inspecter les comptes connectés ou déterminer si l’authentification est en cours.

Les exemples suivants montrent comment se connecter à l’aide de l’approche withMsal HOC, mais vous pouvez rapidement vous adapter à l’autre approche si nécessaire.

Se connecter après avoir cliqué sur un bouton

L’extrait de code suivant définit un composant de classe React LoginButton qui utilise le composant d’ordre supérieur withMsal. Il affiche un bouton qui déclenche une fenêtre contextuelle de connexion si l’utilisateur n’est pas authentifié ou déconnecte l’utilisateur s’il est authentifié.

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

class LoginButton extends React.Component {
    render() {
        const isAuthenticated = this.props.msalContext.accounts.length > 0;
        const msalInstance = this.props.msalContext.instance;
        if (isAuthenticated) {
            return <button onClick={() => msalInstance.logout()}>Logout</button>    
        } else {
            return <button onClick={() => msalInstance.loginPopup()}>Login</button>
        }
    }
}

export default YourWrappedComponent = withMsal(LoginButton);

Connexion au chargement de page

L’extrait de code suivant définit un composant de classe React ProtectedComponent qui utilise le composant d’ordre supérieur withMsal. Il tente d’authentifier l’utilisateur lors du montage et de la mise à jour, et indique si l’utilisateur est authentifié ou si l’authentification est en cours sur la page de chargement.

import React from "react";
import { withMsal } from "@azure/msal-react";
import { InteractionStatus } from "@azure/msal-browser";

class ProtectedComponent extends React.Component {
    callLogin() {
        const isAuthenticated = this.props.msalContext.accounts.length > 0;
        const msalInstance = this.props.msalContext.instance;

        // If a user is not logged in and authentication is not already in progress, invoke login
        if (!isAuthenticated && this.props.msalContext.inProgress === InteractionStatus.None) {
            msalInstance.loginPopup();
        }
    }
    componentDidMount() {
        this.callLogin();
    }

    componentDidUpdate() {
        this.callLogin();
    }
    
    render() {
        const isAuthenticated = this.props.msalContext.accounts.length > 0;
        if (isAuthenticated) {
            return <span>User is authenticated</span>
        } else {
            return <span>Authentication in progress</span>;
        }
    }
}

export default YourWrappedComponent = withMsal(ProtectedComponent);

Voir aussi

• Consultez notre exemple react-router-sample.