MSAL React használata osztályösszetevőkkel

Az MSAL React a függvényösszetevőket és az osztályösszetevőket is támogatja. Ez a cikk útmutatást nyújt az MSAL React osztályösszetevőkkel való használatához, lehetővé téve az MSAL React-környezet inicializálását, védelmét és elérését az osztályösszetevőkben.

Fontos megjegyezni, hogy az osztálykomponensekben nem használhat @azure/msal-react hookokat. Ha hozzá kell férnie a hitelesítési állapothoz az osztálykomponensen belül, a hasonló funkcionalitás eléréséhez közvetlenül a(z) @azure/msal-browser elemet kell használnia.

Prerequisites

Inicializálás

Az osztályösszetevők inicializálása az MSAL React használatával nagyon hasonlóan működik a függvényösszetevőkhöz. A függvényösszetevőkhöz hasonlóan szüksége lesz egy MsalProvider összetevőre az összetevőfa legfelső szintjén, amely hozzáférést igényel a hitelesítési állapothoz.

A következő kódrészletben az összetevő a MsalProvider teljes alkalmazás körbefuttatására szolgál, így az MSAL-példány minden gyermekösszetevő számára elérhetővé válik. Ez lehetővé teszi, hogy a gyermekösszetevők az MSAL-t használják a felhasználói hitelesítéshez, a jogkivonatok beszerzéséhez és a védett API-k meghívásához.

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

Összetevők védelme

Az MSAL Reactben megvédheti az összetevőket, és feltételesen renderelheti őket a felhasználó hitelesítési állapota alapján. Ez a függvényösszetevőkhöz hasonlóan működik. A fő példák a következők:

• AuthenticatedTemplate – Ez az összetevő csak akkor jeleníti meg a gyermekeit, ha a felhasználó hitelesítése megtörtént. Ha a felhasználó nincs hitelesítve, az nem jelenít meg semmit.
• UnauthenticatedTemplate – Ez az összetevő csak akkor jeleníti meg a gyermekeket, ha a felhasználó nincs hitelesítve. Ha a felhasználó hitelesítése megtörtént, az nem jelenít meg semmit.
• MsalAuthenticationTemplate – Ez az összetevő megkísérli hitelesíteni a felhasználót a gyermekek megjelenítése előtt. Megadhatja az interakció típusát (átirányítás vagy előugró ablak) kellékként. Ha a felhasználó nincs hitelesítve, elindítja a hitelesítési folyamatot.

Az alábbi kódrészlet bemutatja, hogyan használhatja a AuthenticatedTemplate, UnauthenticatedTemplate és MsalAuthenticationTemplate elemeket a React-összetevői védelméhez. Figyelje meg, hogyan veszi körül a MSAL Provider a gyermekkomponenseket.

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

MSAL React-környezet elérése egy osztályösszetevőben

A useMsal horog nem használható az MSAL React környezetének elérésére egy osztályösszetevőben. Ennek az az oka, hogy a horgok csak olyan függvényösszetevőkben használhatók, ahol a funkciók példány nélkül is használhatók. Mivel az osztályösszetevők példányokkal rendelkeznek, további két lehetőség közül választhat. Használhatja közvetlenül a nyers környezetet, vagy a withMsal magasabb rendű összetevő használatával injektálhatja a környezetet az összetevő kellékeibe.

Hozzáférés a nyers környezethez

Az alábbi kódrészlet bemutatja, hogyan érheti el a MsalContext nyers környezetet egy osztályösszetevőben.

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

Egy működő példáért tekintse meg a ProfileRawContext.jsx fájlt a react-router-mintánkban.

Hozzáférés a withMsal HOC használatával

Alternatív megoldásként a withMsal magasabb rendű komponens használható arra, hogy a kontextust beinjektálja a komponens propjaiba. Az alábbi kódrészlet bemutatja, hogyan használható a HOC az withMsal MSAL React környezetének elérésére egy osztályösszetevőben.

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

Egy működő példáért tekintse meg a ProfileWithMsal.jsx fájlt a react-router-sample fájlban.

Bejelentkezés osztályösszetevő használatával

Függetlenül attól, hogy milyen megközelítést alkalmaz a MSAL React környezet lekéréséhez, a használat ugyanaz lesz. Miután megkapta a környezeti objektumot, bármelyik API-tPublicClientApplicationmeghívhatja, megvizsgálhatja a bejelentkezett fiókokat, vagy megállapíthatja, hogy a hitelesítés jelenleg folyamatban van-e.

Az alábbi példák bemutatják, hogyan lehet bejelentkezni a withMsal HOC megközelítéssel, de szükség esetén gyorsan alkalmazkodhat a másik megközelítéshez.

Note

Fontos megjegyezni, hogy az MsalProvider összetevőt a kontextust használó bármely összetevő fölötti bármely szinten renderelni kell. Az alábbi példák feltételezik, hogy van egy szolgáltató, és ezt nem fogja bemutatni.

Bejelentkezés egy gombra kattintva

Az alábbi kódrészlet egy React osztályösszetevőt LoginButton határoz meg, amely a withMsal magasabb rendű összetevőt használja. Megjelenít egy gombot, amely aktiválja a bejelentkezési előugró ablakokat, ha a felhasználó nincs hitelesítve, vagy kijelentkezteti a felhasználót, ha hitelesítve vannak.

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

Bejelentkezés lapbetöltéskor

Az alábbi kódrészlet egy React osztályösszetevőt ProtectedComponent határoz meg, amely a withMsal magasabb rendű összetevőt használja. Megkísérli hitelesíteni a felhasználót a csatlakoztatáskor és a frissítéskor, és megjeleníti, hogy a felhasználó hitelesítése megtörtént-e, vagy folyamatban van-e a hitelesítés a betöltési oldalon.

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

Lásd még

• Tekintse meg a react-router-mintát.