Verwenden von MSAL React mit Klassenkomponenten

MSAL React unterstützt sowohl Funktionskomponenten als auch Klassenkomponenten. Dieser Artikel enthält Anleitungen zur Verwendung von MSAL React mit Klassenkomponenten, mit denen Sie den MSAL React-Kontext in Ihren Klassenkomponenten initialisieren, schützen und darauf zugreifen können.

Es ist wichtig zu beachten, dass Sie @azure/msal-react Hooks innerhalb Ihrer Klassenkomponenten nicht verwenden können. Wenn Sie innerhalb Ihrer Klassenkomponente Zugriff auf den Authentifizierungsstatus benötigen, müssen Sie @azure/msal-browser direkt verwenden, um eine ähnliche Funktionalität zu erhalten.

Voraussetzungen

Initialisierung

Die Initialisierung mit Klassenkomponenten mit MSAL React funktioniert sehr ähnlich wie Funktionskomponenten. Ähnlich wie bei der Verwendung von Funktionskomponenten benötigen Sie eine MsalProvider Komponente auf der obersten Ebene der Komponentenstruktur, die Zugriff auf den Authentifizierungsstatus erfordert.

Im folgenden Codeausschnitt wird die MsalProvider Komponente verwendet, um die gesamte Anwendung umzuschließen und die MSAL-Instanz für alle untergeordneten Komponenten verfügbar zu machen. Dadurch können untergeordnete Komponenten MSAL für die Benutzerauthentifizierung, das Abrufen von Token und das Aufrufen geschützter APIs verwenden.

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

Schützen von Komponenten

In MSAL React können Sie Ihre Komponenten schützen und dann basierend auf dem Authentifizierungsstatus des Benutzers bedingt rendern. Dies funktioniert ähnlich wie die Verwendung von Funktionskomponenten. Die wichtigsten Beispiele sind:

• AuthenticatedTemplate – Diese Komponente rendert seine untergeordneten Elemente nur, wenn der Benutzer authentifiziert ist. Wenn der Benutzer nicht authentifiziert ist, wird nichts gerendert.
• UnauthenticatedTemplate – Diese Komponente zeigt ihre untergeordneten Elemente nur an, wenn der Benutzer nicht authentifiziert ist. Wenn der Benutzer authentifiziert ist, wird nichts gerendert.
• MsalAuthenticationTemplate – Diese Komponente versucht, den Benutzer vor dem Rendern seiner untergeordneten Elemente zu authentifizieren. Sie können den Interaktionstyp (Umleitung oder Popup) als Prop angeben. Wenn der Benutzer nicht authentifiziert ist, wird der Authentifizierungsprozess initiiert.

Der folgende Codeausschnitt zeigt, wie Sie AuthenticatedTemplate, UnauthenticatedTemplate und MsalAuthenticationTemplate verwenden, um Ihre React-Komponenten zu schützen. Beachten Sie, wie MSAL Provider die untergeordneten Komponenten umschließt.

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

Zugreifen auf den MSAL React-Kontext in einer Klassenkomponente

Der useMsal Hook kann nicht für den Zugriff auf den MSAL React-Kontext in einer Klassenkomponente verwendet werden. Dies liegt daran, dass Hooks nur in Funktionskomponenten verwendet werden können, in denen Sie Features ohne Instanz verwenden können. Da Klassenkomponenten Instanzen haben, haben Sie 2 weitere Optionen. Sie können entweder den Kontext direkt verwenden oder die withMsal Higher-Order-Komponente verwenden, um den Kontext in die Props Ihrer Komponente zu injizieren.

Zugreifen auf unformatierten Kontext

Der folgende Codeausschnitt zeigt, wie Sie mit MsalContext in einer Klassenkomponente auf den unformatierten Kontext zugreifen.

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

Ein Funktionierendes Beispiel finden Sie in unserem React-Router-Beispiel auf ProfileRawContext.jsx.

Zugriff über withMsal HOC

Die Alternative ist, die withMsal Komponente höherer Ordnung zu verwenden, um den Kontext an die Props Ihrer Komponente zu übergeben. Der folgende Codeausschnitt zeigt, wie Sie mit der withMsal HOC-Anforderung auf den MSAL React-Kontext in einer Klassenkomponente zugreifen.

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

Ein Funktionierendes Beispiel finden Sie unter "ProfileWithMsal.jsx " im React-Router-Beispiel.

Anmelden mithilfe einer Klassenkomponente

Unabhängig davon, welchen Ansatz Sie zum Abrufen des MSAL React Kontexts ergreifen, ist die Verwendung identisch. Sobald Sie über das Kontextobjekt verfügen, können Sie eine der APIsPublicClientApplicationaufrufen, die angemeldeten Konten überprüfen oder ermitteln, ob die Authentifizierung derzeit ausgeführt wird.

In den folgenden Beispielen wird gezeigt, wie Sie sich mit dem withMsal HOC-Ansatz anmelden, aber Sie können sich bei Bedarf schnell an den anderen Ansatz anpassen.

Anmelden als Ergebnis des Klickens auf eine Schaltfläche

Der folgende Codeausschnitt definiert eine React-Klassenkomponente LoginButton , die die Komponente mit höherer withMsal Reihenfolge verwendet. Es rendert eine Schaltfläche, die entweder ein Anmeldepopup auslöst, wenn der Benutzer nicht authentifiziert ist, oder meldet den Benutzer ab, wenn er authentifiziert wird.

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

Anmelden beim Laden der Seite

Der folgende Codeausschnitt definiert eine React-Klassenkomponente ProtectedComponent , die die Komponente mit höherer withMsal Reihenfolge verwendet. Er versucht, den Benutzer beim Einbinden und Aktualisieren zu authentifizieren, und zeigt an, ob der Benutzer authentifiziert ist oder ob die Authentifizierung auf der Ladeseite ausgeführt wird.

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

Siehe auch

• Schauen Sie sich unser React-Router-Beispiel an.