Uso de MSAL React con componentes de clase

MSAL React admite componentes de función y componentes de clase. En este artículo se proporcionan instrucciones sobre el uso de MSAL React con componentes de clase, lo que le permite inicializar, proteger y acceder al contexto de MSAL React en los componentes de clase.

Es importante tener en cuenta que no podrás usar @azure/msal-react hooks dentro de tus componentes de clase. Si necesita acceso al estado de autenticación dentro del componente de clase, deberá usar @azure/msal-browser directamente para obtener una funcionalidad similar.

Prerequisites

Inicialización

La inicialización con componentes de clase con MSAL React funciona de forma muy similar a los componentes de función. Al igual que al usar componentes de función, necesitará un MsalProvider componente en el nivel superior del árbol de componentes que requiere acceso al estado de autenticación.

En el fragmento de código siguiente, el MsalProvider componente se usa para encapsular toda la aplicación, lo que hace que la instancia de MSAL esté disponible para todos los componentes secundarios. Esto permite que los componentes secundarios usen MSAL para la autenticación de usuarios, la adquisición de tokens y la llamada a api protegidas.

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

Protección de componentes

En MSAL React, puedes proteger tus componentes y mostrarlos de forma condicional en función del estado de autenticación del usuario. Esto funciona de forma similar al uso de componentes de función. Los ejemplos principales son:

• AuthenticatedTemplate - Este componente solo renderizará sus hijos si el usuario está autenticado. Si el usuario no está autenticado, no mostrará nada.
• UnauthenticatedTemplate - Este componente solo renderizará sus hijos si el usuario no está autenticado. Si el usuario está autenticado, no mostrará nada.
• MsalAuthenticationTemplate: este componente intenta autenticar al usuario antes de mostrar sus componentes hijos. Puedes especificar el tipo de interacción (redirección o ventana emergente) como una propiedad. Si el usuario no está autenticado, iniciará el proceso de autenticación.

En el fragmento de código siguiente se muestra cómo usar AuthenticatedTemplate, UnauthenticatedTemplatey MsalAuthenticationTemplate para proteger los componentes de React. Fíjate en cómo MSAL Provider envuelve a los componentes hijos.

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

Acceso al contexto de MSAL React en un componente de clase

El useMsal hook no se puede usar para acceder al contexto de React de MSAL en un componente de clase. Esto se debe a que los hooks solo se pueden usar en componentes funcionales, donde se pueden usar funcionalidades sin necesidad de una instancia. Dado que los componentes de clase tienen instancias, tiene 2 otras opciones. Puedes utilizar el contexto sin procesar directamente o bien utilizar el componente de orden superior withMsal para inyectar el contexto en las propiedades (props) de tu componente.

Acceso al contexto sin procesar

En el siguiente fragmento de código se muestra cómo usar MsalContext para acceder al contexto original en un componente de clase.

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

Para ver un ejemplo de trabajo, consulte ProfileRawContext.jsx en nuestro react-router-sample.

Acceso a través de withMsal HOC

La alternativa es usar el withMsal componente de orden superior para insertar el contexto en las propiedades del componente. En el fragmento de código siguiente se muestra cómo usar el withMsal HOC para acceder al contexto de MSAL React en un componente de clase.

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

Para obtener un ejemplo de trabajo, consulte ProfileWithMsal.jsx en react-router-sample.

Inicio de sesión con un componente de clase

Independientemente del enfoque que tome para obtener el MSAL React contexto, el uso será el mismo. Una vez que tenga el objeto de contexto, puede invocar cualquiera de las API en PublicClientApplication, inspeccionar las cuentas iniciadas o determinar si la autenticación está en curso.

En los ejemplos siguientes se muestra cómo iniciar sesión con el withMsal enfoque HOC, pero puede adaptarse rápidamente al otro enfoque si es necesario.

Iniciar sesión como resultado de hacer clic en un botón

El fragmento de código siguiente define un componente LoginButton de clase React que usa el componente de withMsal orden superior. Muestra un botón que abre una ventana emergente de inicio de sesión si el usuario no está autenticado o cierra la sesión si está autenticado.

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

Iniciar sesión al cargar la página

El fragmento de código siguiente define un componente ProtectedComponent de clase React que usa el componente de withMsal orden superior. Intenta autenticar al usuario al montar y actualizar, y muestra si el usuario está autenticado o si la autenticación está en curso en la página de carga.

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

Consulte también

• Echa un vistazo a nuestra react-router-sample.