Použití MSAL React s komponentami tříd

MSAL React podporuje součásti funkcí i komponenty třídy. Tento článek obsahuje pokyny k použití MSAL React s komponentami třídy, které vám umožní inicializovat, chránit a přistupovat k kontextu MSAL React v komponentách třídy.

Je důležité si uvědomit, že v komponentách třídy nebudete moct používat @azure/msal-react háčky. Pokud potřebujete přístup ke stavu ověřování uvnitř komponenty třídy, budete muset použít @azure/msal-browser přímo k získání podobných funkcí.

Předpoklady

Inicializace

Inicializace třídních komponent pomocí MSAL React funguje velmi podobně jako u funkčních komponent. Podobně jako při použití součástí funkcí budete potřebovat komponentu MsalProvider na nejvyšší úrovni stromu komponenty, která vyžaduje přístup ke stavu ověřování.

V následujícím fragmentu kódu se komponenta MsalProvider používá k zabalení celé aplikace, aby instance MSAL byla k dispozici pro všechny podřízené komponenty. To umožňuje podřízeným komponentám používat MSAL pro ověřování uživatelů, získávání tokenů a volání chráněných rozhraní API.

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

Ochrana komponent

V knihovně MSAL React můžete chránit své komponenty a podmíněně je vykreslovat v závislosti na stavu ověření uživatele. Funguje to podobně jako při použití funkčních komponent. Mezi hlavní příklady patří:

• AuthenticatedTemplate – Tato komponenta zobrazí své potomky pouze pokud je uživatel autentizován. Pokud uživatel není ověřený, nic se nevykreslí.
• UnauthenticatedTemplate – Tato komponenta vykreslí své potomky pouze tehdy, pokud uživatel není autentizovaný. Pokud je uživatel ověřený, nevykreslí nic.
• MsalAuthenticationTemplate - Tato komponenta se pokouší ověřit uživatele před vykreslením svých potomků. Typ interakce (přesměrování nebo místní okno) můžete zadat jako vlastnost. Pokud uživatel není autentizovaný, zahájí se proces autentizace.

Následující fragment kódu ukazuje, jak používat AuthenticatedTemplate, UnauthenticatedTemplatea MsalAuthenticationTemplate chránit komponenty React. Všimněte si, jak MSAL Provider obklopuje podřízené komponenty.

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

Přístup k kontextu MSAL React v komponentě třídy

Háček useMsal se nedá použít pro přístup k kontextu MSAL React v komponentě třídy. Důvodem je to, že háky se dají použít jenom v součástech funkcí, kde můžete používat funkce bez instance. Vzhledem k tomu, že komponenty třídy mají instance, máte 2 další možnosti. Nezpracovaný kontext můžete použít přímo nebo můžete použít komponentu vyššího withMsal pořadí k vložení kontextu do props vaší komponenty.

Přístup k nezpracovanému kontextu

Následující fragment kódu ukazuje, jak použít MsalContext pro přístup k nezpracovanému kontextu v třídní komponentě.

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

Pracovní příklad najdete v souboru ProfileRawContext.jsx v naší ukázce react-router-sample.

Přístup přes withMsal HOC

Alternativou je použití komponenty vyššího withMsal pořadí k vložení kontextu do props vaší komponenty. Následující fragment kódu ukazuje, jak použít withMsal HOC pro přístup k kontextu MSAL React v komponentě třídy.

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

Pracovní příklad najdete v souboru ProfileWithMsal.jsx v ukázce react-router-sample.

Přihlášení pomocí komponenty třídy

Bez ohledu na to, jaký přístup použijete k získání MSAL React kontextu, bude využití stejné. Jakmile máte kontextový objekt, můžete vyvolat některá z rozhraní API , PublicClientApplicationzkontrolovat účty přihlášené nebo určit, jestli právě probíhá ověřování.

Následující příklady ukazují, jak se přihlásit pomocí withMsal přístupu HOC, ale v případě potřeby se můžete rychle přizpůsobit druhému přístupu.

Přihlášení v důsledku kliknutí na tlačítko

Následující fragment kódu definuje komponentu LoginButton třídy React, která používá komponentu withMsal vyššího řádu. Vykreslí tlačítko, které buď aktivuje automaticky otevírané okno přihlášení, pokud uživatel není ověřený, nebo odhlásí uživatele, pokud je ověřený.

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

Přihlášení při načtení stránky

Následující fragment kódu definuje komponentu ProtectedComponent třídy React, která používá komponentu withMsal vyššího řádu. Pokusí se ověřit totožnost uživatele při inicializaci a aktualizaci a na načítací stránce zobrazí, zda je uživatel ověřen nebo zda ověřování právě probíhá.

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

Viz také

• Podívejte se na naši ukázku react-router-sample.