MSAL React gebruiken met klasseonderdelen

MSAL React ondersteunt zowel functieonderdelen als klasseonderdelen. Dit artikel bevat richtlijnen voor het gebruik van MSAL React met klasseonderdelen, zodat u MSAL React-context in uw klasseonderdelen kunt initialiseren, beveiligen en openen.

Het is belangrijk om op te merken dat u geen @azure/msal-react hooks in uw klassecomponenten kunt gebruiken. Als u toegang nodig hebt tot de verificatiestatus in uw klasseonderdeel, moet u deze rechtstreeks gebruiken @azure/msal-browser om vergelijkbare functionaliteit te verkrijgen.

Prerequisites

Initialisatie

Initialisatie met klasseonderdelen met MSAL React werkt op dezelfde manier als functieonderdelen. Net als bij het gebruik van functieonderdelen hebt u een MsalProvider onderdeel nodig op het hoogste niveau van de onderdeelstructuur waarvoor toegang tot de verificatiestatus is vereist.

In het volgende codefragment wordt het MsalProvider onderdeel gebruikt om de hele toepassing te verpakken, waardoor het MSAL-exemplaar beschikbaar is voor alle onderliggende onderdelen. Hierdoor kunnen onderliggende onderdelen MSAL gebruiken voor gebruikersverificatie, het verkrijgen van tokens en het aanroepen van beveiligde API's.

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

Onderdelen beveiligen

In MSAL React kunt u uw onderdelen beveiligen en vervolgens voorwaardelijk renderen op basis van de verificatiestatus van de gebruiker. Dit werkt op dezelfde manier als het gebruik van functieonderdelen. De belangrijkste voorbeelden zijn:

• AuthenticatedTemplate - Dit onderdeel rendert zijn child-componenten alleen als de gebruiker is geauthenticeerd. Als de gebruiker niet is geverifieerd, wordt er niets weergegeven.
• UnauthenticatedTemplate - Dit onderdeel geeft de onderliggende elementen alleen weer als de gebruiker niet is geauthenticeerd. Als de gebruiker is geverifieerd, wordt er niets weergegeven.
• MsalAuthenticationTemplate - Deze component probeert de gebruiker te authenticeren voordat de onderliggende componenten worden weergegeven. U kunt het interactietype (omleiding of pop-up) opgeven als een prop. Als de gebruiker niet is geverifieerd, wordt het verificatieproces gestart.

In het volgende codefragment ziet u hoe u AuthenticatedTemplate, UnauthenticatedTemplate en MsalAuthenticationTemplate gebruikt om uw React-componenten te beveiligen. Merk op hoe MSAL Provider zich om de onderliggende componenten heen wikkelt.

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

Toegang tot MSAL React-context in een klasseonderdeel

De useMsal hook kan niet worden gebruikt voor toegang tot de MSAL React-context in een klasseonderdeel. Dit komt doordat hooks alleen kunnen worden gebruikt in functiecomponenten, waarin je functionaliteit zonder instantie kunt gebruiken. Omdat klasseonderdelen exemplaren hebben, hebt u twee andere opties. U kunt de ruwe context rechtstreeks gebruiken, of u kunt de higher-ordercomponent withMsal gebruiken om de context door te geven aan de props van uw component.

Toegang tot onbewerkte context

Het volgende codefragment laat zien hoe u de MsalContext kunt gebruiken om toegang te krijgen tot de onbewerkte context in een klassecomponent.

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

Voor een werkend voorbeeld raadpleegt u ProfileRawContext.jsx in ons react-router-sample.

Toegang krijgen via withMsal HOC

Het alternatief is om het onderdeel met een withMsal hogere volgorde te gebruiken om de context in de props van uw onderdeel te injecteren. In het volgende fragment ziet u hoe u de withMsal HOC gebruikt voor toegang tot de MSAL React-context in een klasseonderdeel.

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

Raadpleeg ProfileWithMsal.jsx in react-router-sample voor een werkend voorbeeld.

Aanmelden met behulp van een klasseonderdeel

Ongeacht welke benadering u neemt om de MSAL React context op te halen, is het gebruik hetzelfde. Zodra u het contextobject hebt, kunt u een van de API'sPublicClientApplicationaanroepen, de accounts controleren die zijn aangemeld of bepalen of er momenteel verificatie wordt uitgevoerd.

In de volgende voorbeelden ziet u hoe u zich aanmeldt met behulp van de withMsal HOC-benadering, maar u kunt zich zo nodig snel aanpassen aan de andere aanpak.

Aanmelden als gevolg van klikken op een knop

Het volgende codefragment definieert een React-klasseonderdeel LoginButton dat gebruikmaakt van het onderdeel met een withMsal hogere volgorde. Er wordt een knop weergegeven waarmee een aanmeldingspop-up wordt geactiveerd als de gebruiker niet is geverifieerd of de gebruiker afmeldt als deze is geverifieerd.

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

Aanmelden bij het laden van pagina's

Het volgende codefragment definieert een React-klasseonderdeel ProtectedComponent dat gebruikmaakt van het onderdeel met een withMsal hogere volgorde. Er wordt geprobeerd de gebruiker te verifiëren bij het koppelen en bijwerken en geeft aan of de gebruiker is geverifieerd of of verificatie wordt uitgevoerd op de laadpagina.

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

Zie ook

• Bekijk ons react-router-sample.