Usando o MSAL React com componentes de classe

O MSAL React dá suporte a componentes de função e componentes de classe. Este artigo fornece diretrizes sobre como usar o MSAL React com componentes de classe, permitindo que você inicialize, proteja e acesse o contexto do MSAL React em seus componentes de classe.

É importante observar que você não poderá usar hooks @azure/msal-react dentro dos seus componentes de classe. Se você precisar de acesso ao estado de autenticação dentro do componente de classe, precisará usar @azure/msal-browser diretamente para obter funcionalidades semelhantes.

Pré-requisitos

Inicialização

A inicialização com componentes de classe no MSAL React funciona de maneira muito semelhante à dos componentes de função. Semelhante ao uso de componentes de função, você precisará de um MsalProvider componente no nível superior da árvore de componentes que exija acesso ao estado de autenticação.

No trecho de código a seguir, o componente MsalProvider é usado para envolver toda a aplicação, tornando a instância do MSAL disponível para todos os componentes filhos. Isso permite que os componentes filhos usem a MSAL para autenticação de usuários, obtenção de tokens e fazer chamadas a APIs 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>
        );
    }
}

Proteção de componentes

No MSAL React, você pode proteger seus componentes e renderizar condicionalmente com base no estado de autenticação do usuário. Isso funciona de forma semelhante ao uso de componentes de função. Os principais exemplos são:

• AuthenticatedTemplate - Esse componente só renderizará seus filhos se o usuário for autenticado. Se o usuário não for autenticado, ele não renderizará nada.
• UnauthenticatedTemplate - Esse componente só renderizará seus filhos se o usuário não for autenticado. Se o usuário for autenticado, ele não renderizará nada.
• MsalAuthenticationTemplate - Esse componente tenta autenticar o usuário antes de renderizar seus filhos. Você pode especificar o tipo de interação (redirecionamento ou pop-up) como uma propriedade. Se o usuário não estiver autenticado, o processo de autenticação será iniciado.

O snippet a seguir mostra como usar AuthenticatedTemplateUnauthenticatedTemplatee MsalAuthenticationTemplate proteger os componentes do React. Observe como MSAL Provider envolve os componentes filhos.

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

Acessando o contexto do MSAL React em um componente de classe

O useMsal hook não pode ser usado para acessar o contexto do MSAL React em um componente de classe. Isso ocorre porque os ganchos só podem ser usados em componentes de função em que você pode usar recursos sem uma instância. Como os componentes de classe têm instâncias, você tem duas outras opções. Você pode usar o contexto bruto diretamente ou pode usar o componente de ordem superior withMsal para injetar o contexto nas propriedades do seu componente.

Acessando o contexto bruto

O snippet a seguir mostra como usar o MsalContext para acessar o contexto bruto em um componente 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>
        }
    }
}

Para obter um exemplo de trabalho, consulte ProfileRawContext.jsx em nosso react-router-sample.

Acessando via HOC withMsal

A alternativa é usar o componente de ordem superior withMsal para injetar o contexto nas propriedades do seu componente. O snippet a seguir mostra como usar o withMsal HOC para acessar o contexto do MSAL React em um componente 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>
        );
    }
}

Para obter um exemplo de trabalho, consulte ProfileWithMsal.jsx em react-router-sample.

Fazer logon usando um componente de classe

Independentemente de qual abordagem você adotar para obter o MSAL React contexto, o uso será o mesmo. Depois de ter o objeto de contexto em que você pode invocar qualquer uma das APIsPublicClientApplication, inspecione as contas assinadas ou determine se a autenticação está em andamento no momento.

Os exemplos a seguir mostrarão como fazer logon usando a withMsal abordagem HOC, mas você poderá se adaptar rapidamente à outra abordagem, se necessário.

Fazer login ao clicar em um botão

O snippet a seguir define um componente LoginButton da classe React que usa o withMsal componente de ordem superior. Ele renderiza um botão que dispara um pop-up de login se o usuário não estiver autenticado ou faz logout do usuário se ele estiver 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);

Fazer login ao carregar a página

O snippet a seguir define um componente ProtectedComponent da classe React que usa o withMsal componente de ordem superior. Ele tenta autenticar o usuário ao montar e atualizar e exibe se o usuário está autenticado ou se a autenticação está em andamento na página de carregamento.

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 também

• Confira nosso react-router-sample.