Använda MSAL React med klasskomponenter

MSAL React stöder både funktionskomponenter och klasskomponenter. Den här artikeln innehåller vägledning om hur du använder MSAL React med klasskomponenter, så att du kan initiera, skydda och komma åt MSAL React-kontexten i dina klasskomponenter.

Observera att du inte kan använda @azure/msal-react hooks i klasskomponenter. Om du behöver åtkomst till autentiseringstillstånd i din klasskomponent måste du använda @azure/msal-browser direkt för att få liknande funktioner.

Förutsättningar

Initialisering

Initiering med klasskomponenter med MSAL React fungerar ungefär som funktionskomponenter. Precis som när du använder funktionskomponenter behöver du en MsalProvider komponent på den översta nivån i komponentträdet som kräver åtkomst till autentiseringstillståndet.

I följande kodfragment används komponenten MsalProvider för att omsluta hela programmet, vilket gör MSAL-instansen tillgänglig för alla underordnade komponenter. Detta gör det möjligt för underordnade komponenter att använda MSAL för användarautentisering, hämta token och anropa skyddade API:er.

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

Skydda komponenter

I MSAL React kan du skydda dina komponenter och villkorligt rendera sedan baserat på användarens autentiseringstillstånd. Detta fungerar på samma sätt som med hjälp av funktionskomponenter. De viktigaste exemplen är:

• AuthenticatedTemplate – Den här komponenten renderar endast sina barnkomponenter om användaren är autentiserad. Om användaren inte autentiseras återges ingenting.
• UnauthenticatedTemplate – Den här komponenten visar endast sina underordnade element om användaren inte är autentiserad. Om användaren är autentiserad renderas ingenting.
• MsalAuthenticationTemplate - Den här komponenten försöker autentisera användaren innan den renderar sina underordnade komponenter. Du kan ange interaktionstypen (omdirigering eller popup-meny) som rekvisita. Om användaren inte autentiseras initieras autentiseringsprocessen.

Följande kodfragment visar hur du använder AuthenticatedTemplate, UnauthenticatedTemplateoch MsalAuthenticationTemplate för att skydda dina React-komponenter. Observera hur MSAL Provider omsluter de underordnade komponenterna.

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

Åtkomst till MSAL React-kontext i en klasskomponent

Kroken useMsal kan inte användas för att komma åt MSAL React-kontexten i en klasskomponent. Detta beror på att krokar bara kan användas i funktionskomponenter där du kan använda funktioner utan en instans. Eftersom klasskomponenter har instanser har du två andra alternativ. Du kan antingen använda råkontexten direkt eller så kan du använda komponenten withMsal med högre ordning för att mata in kontexten i komponentens rekvisita.

Åtkomst till råkontext

Följande kodfragment visar hur du använder MsalContext för att komma åt raw-kontexten i en klasskomponent.

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

Ett fungerande exempel finns i ProfileRawContext.jsx i vårt react-router-sample.

Åtkomst via medMsal HOC

Alternativet är att använda komponenten withMsal med högre ordning för att mata in kontexten i komponentens rekvisita. Följande kodfragment visar hur du använder withMsal HOC för att komma åt MSAL React-kontexten i en klasskomponent.

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

Ett fungerande exempel finns i ProfileWithMsal.jsx i react-router-sample.

Logga in med en klasskomponent

Oavsett vilken metod du använder för att få kontexten MSAL React blir användningen densamma. När du har kontextobjektet kan du anropa någon av API:erna på PublicClientApplication, inspektera de konton som är inloggade eller avgöra om autentisering pågår för närvarande.

I följande exempel visas hur du loggar in med hjälp av withMsal HOC-metoden, men du kan snabbt anpassa dig till den andra metoden om det behövs.

Logga in som ett resultat av att klicka på en knapp

Följande kodfragment definierar en React-klasskomponent LoginButton som använder komponenten med withMsal högre ordning. Den renderar en knapp som antingen utlöser ett popup-fönster för inloggning om användaren inte autentiseras eller loggar ut användaren om de autentiseras.

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

Logga in vid sidinläsning

Följande kodfragment definierar en React-klasskomponent ProtectedComponent som använder komponenten med withMsal högre ordning. Den försöker autentisera användaren vid montering och uppdatering och visar om användaren är autentiserad eller om autentisering pågår på inläsningssidan.

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

Se även

• Kolla in vårt react-router-sample.