Uso di MSAL React con componenti di classe

MSAL React supporta sia i componenti della funzione che i componenti della classe. Questo articolo fornisce indicazioni sull'uso di MSAL React con componenti di classe, consentendo di inizializzare, proteggere e accedere al contesto React MSAL nei componenti della classe.

È importante notare che non sarà possibile usare @azure/msal-react hook all'interno dei componenti della classe. Se è necessario accedere allo stato di autenticazione all'interno del componente della classe, è necessario usare @azure/msal-browser direttamente per ottenere funzionalità simili.

Prerequisiti

Inizializzazione

L'inizializzazione con componenti di classe con MSAL React funziona in modo molto simile ai componenti di funzione. Analogamente a quando si usano componenti di funzione, è necessario un MsalProvider componente al livello superiore dell'albero dei componenti che richiede l'accesso allo stato di autenticazione.

Nel frammento di codice seguente il MsalProvider componente viene usato per eseguire il wrapping dell'intera applicazione, rendendo l'istanza MSAL disponibile per tutti i componenti figlio. Ciò consente ai componenti figlio di usare MSAL per l'autenticazione utente, l'acquisizione di token e la chiamata di API protette.

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

Protezione dei componenti

In MSAL React è possibile proteggere i componenti ed eseguire il rendering condizionale in base allo stato di autenticazione dell'utente. Questa operazione funziona in modo analogo all'uso dei componenti della funzione. Gli esempi principali sono:

• AuthenticatedTemplate - Questo componente eseguirà il rendering dei relativi elementi figlio solo se l'utente è autenticato. Se l'utente non è autenticato, non eseguirà il rendering di alcun elemento.
• UnauthenticatedTemplate - Questo componente eseguirà il rendering dei relativi elementi figlio solo se l'utente non è autenticato. Se l'utente è autenticato, non eseguirà il rendering di alcun elemento.
• MsalAuthenticationTemplate - Questo componente tenta di autenticare l'utente prima di eseguire il rendering degli elementi figlio. È possibile specificare il tipo di interazione (reindirizzamento o popup) tramite una proprietà. Se l'utente non è autenticato, verrà avviato il processo di autenticazione.

Il frammento di codice seguente illustra come usare AuthenticatedTemplate, UnauthenticatedTemplatee MsalAuthenticationTemplate per proteggere i componenti React. Si noti come MSAL Provider racchiuda i componenti figli.

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

Accesso al contesto React di MSAL in un componente di classe

L'hook useMsal non può essere usato per accedere al contesto React MSAL in un componente di classe. Ciò è dovuto al fatto che gli hook possono essere usati solo nei componenti di funzione in cui è possibile usare le funzionalità senza un'istanza di . Poiché i componenti della classe hanno istanze, sono disponibili altre 2 opzioni. Puoi usare direttamente il contesto grezzo oppure puoi usare il componente di ordine superiore withMsal per iniettare il contesto nelle proprietà del componente.

Accesso al contesto non elaborato

Il frammento di codice seguente illustra come usare MsalContext per accedere al contesto non elaborato in un componente di 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>
        }
    }
}

Per un esempio funzionante, vedere ProfileRawContext.jsxnell'esempio react-router-sample.

Accesso tramite withMsal HOC

L'alternativa consiste nell'usare il withMsal componente di ordine superiore per inserire il contesto nelle proprietà del componente. Il frammento di codice seguente illustra come usare hoc withMsal per accedere al contesto React MSAL in un componente di 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>
        );
    }
}

Per un esempio funzionante, vedere ProfileWithMsal.jsx in react-router-sample.

Accesso tramite un componente di classe

Indipendentemente dall'approccio adottato per ottenere il MSAL React contesto, l'utilizzo sarà lo stesso. Dopo aver ottenuto l'oggetto di contesto, è possibile richiamare una delle API in PublicClientApplication, esaminare gli account connessi o determinare se l'autenticazione è attualmente in corso.

Gli esempi seguenti illustrano come accedere usando l'approccio withMsal HOC, ma è possibile adattarsi rapidamente all'altro approccio, se necessario.

Accesso effettuato facendo clic su un pulsante

Il frammento di codice seguente definisce un componente LoginButton della classe React che usa il withMsal componente di ordine superiore. Visualizza un pulsante che apre un popup di login se l'utente non è autenticato oppure esegue il logout dell'utente se è autenticato.

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

Accesso al caricamento della pagina

Il frammento di codice seguente definisce un componente ProtectedComponent della classe React che usa il withMsal componente di ordine superiore. Tenta di autenticare l'utente al momento del montaggio e dell'aggiornamento e visualizza se l'utente è autenticato o se l'autenticazione è in corso nella pagina di caricamento.

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

Vedere anche

• Dai un'occhiata al nostro react-router-sample.