Używanie biblioteki MSAL React ze składnikami klasy

Biblioteka MSAL React obsługuje zarówno składniki funkcji, jak i składniki klasy. Ten artykuł zawiera wskazówki dotyczące korzystania z biblioteki MSAL React ze składnikami klasy, co umożliwia inicjowanie, ochronę i dostęp do kontekstu MSAL React w składnikach klasy.

Należy pamiętać, że nie można używać hooków @azure/msal-react w komponentach klasowych. Jeśli potrzebujesz dostępu do stanu uwierzytelniania wewnątrz komponentu klasowego, musisz bezpośrednio użyć @azure/msal-browser, aby uzyskać podobną funkcjonalność.

Wymagania wstępne

Inicjalizacja

Inicjalizacja przy użyciu komponentów klasowych w MSAL React działa bardzo podobnie jak w przypadku komponentów funkcyjnych. Podobnie jak w przypadku korzystania z komponentów funkcyjnych, na najwyższym poziomie drzewa komponentów, które wymaga dostępu do stanu uwierzytelniania, potrzebny będzie komponent MsalProvider.

W poniższym fragmencie komponent MsalProvider służy do opakowania całej aplikacji, dzięki czemu instancja MSAL jest dostępna dla wszystkich komponentów podrzędnych. Dzięki temu składniki podrzędne mogą używać biblioteki MSAL do uwierzytelniania użytkowników, uzyskiwania tokenów i wywoływania chronionych interfejsów 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>
        );
    }
}

Ochrona składników

W środowisku MSAL React można chronić składniki i warunkowo renderować je na podstawie stanu uwierzytelniania użytkownika. Działa to podobnie do używania składników funkcji. Główne przykłady to:

  • AuthenticatedTemplate — Ten składnik wyświetli swoje elementy podrzędne tylko wtedy, gdy użytkownik jest uwierzytelniony. Jeśli użytkownik nie jest uwierzytelniony, nie będzie renderował żadnych elementów.
  • UnauthenticatedTemplate — Ten składnik będzie renderować jego elementy podrzędne tylko wtedy, gdy użytkownik nie jest uwierzytelniony. Jeśli użytkownik zostanie uwierzytelniony, nie będzie renderował żadnych elementów.
  • MsalAuthenticationTemplate — Ten składnik próbuje uwierzytelnić użytkownika przed renderowaniem jego elementów podrzędnych. Możesz określić typ interakcji (przekierowanie lub wyskakujące okienko) jako prop. Jeśli użytkownik nie jest uwierzytelniony, zainicjuje proces uwierzytelniania.

Poniższy fragment kodu pokazuje, jak używać AuthenticatedTemplate, UnauthenticatedTemplate i MsalAuthenticationTemplate, aby chronić swoje komponenty React. Zwróć uwagę, jak MSAL Provider otacza komponenty podrzędne.

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

Uzyskiwanie dostępu do kontekstu MSAL React w komponencie klasowym

Hak useMsal nie może służyć do uzyskiwania dostępu do kontekstu MSAL React w składniku klasy. Wynika to z tego, że hooki mogą być używane tylko w komponentach funkcyjnych, które umożliwiają korzystanie z pewnych mechanizmów bez tworzenia instancji. Ponieważ składniki klasy mają wystąpienia, masz 2 inne opcje. Możesz bezpośrednio użyć surowego kontekstu albo użyć komponentu wyższego rzędu withMsal, aby przekazać kontekst do właściwości komponentu.

Uzyskiwanie dostępu do nieprzetworzonego kontekstu

Poniższy fragment kodu pokazuje, jak użyć elementu MsalContext, aby uzyskać dostęp do surowego kontekstu w komponencie klasowym.

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

Przykład działania znajdziesz w pliku ProfileRawContext.jsx w naszym react-router-sample.

Uzyskiwanie dostępu za pośrednictwem programu withMsal HOC

Alternatywą jest użycie withMsal składnika o wyższej kolejności do wstrzykiwania kontekstu do rekwizytów składnika. Poniższy fragment kodu pokazuje, jak używać withMsal hoc do uzyskiwania dostępu do kontekstu MSAL React w składniku klasy.

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

Przykład działania znajdziesz w pliku ProfileWithMsal.jsx w react-router-sample.

Logowanie przy użyciu składnika klasy

Niezależnie od tego, jakie podejście wybierzesz, aby uzyskać kontekst MSAL React, sposób użycia będzie taki sam. Po utworzeniu obiektu kontekstu można wywołać dowolny z interfejsów API w PublicClientApplicationsystemie , sprawdzić konta zalogowane lub określić, czy uwierzytelnianie jest obecnie w toku.

W poniższych przykładach pokazano, jak zalogować się przy użyciu withMsal podejścia HOC, ale w razie potrzeby możesz szybko dostosować się do innego podejścia.

Note

Należy pamiętać, że komponent MsalProvider musi zostać wyrenderowany na dowolnym poziomie nadrzędnym względem każdego komponentu korzystającego z kontekstu. W poniższych przykładach przyjęto założenie, że istnieje dostawca i nie pokaże tego.

Logowanie w wyniku kliknięcia przycisku

Poniższy fragment kodu definiuje składnik LoginButton klasy React, który używa withMsal składnika o wyższej kolejności. Renderuje przycisk, który wyzwala wyskakujące okienko logowania, jeśli użytkownik nie jest uwierzytelniony, lub wyloguje użytkownika w przypadku uwierzytelnienia.

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

Logowanie przy ładowaniu strony

Poniższy fragment kodu definiuje składnik ProtectedComponent klasy React, który używa withMsal składnika o wyższej kolejności. Próbuje uwierzytelnić użytkownika podczas instalowania i aktualizowania oraz wyświetla, czy użytkownik jest uwierzytelniony, czy też uwierzytelnianie jest w toku na stronie ładowania.

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

Zobacz także

  • Last updated on