Использование MSAL React с компонентами класса

MSAL React поддерживает компоненты функций и компоненты класса. В этой статье приводятся рекомендации по использованию MSAL React с компонентами класса, что позволяет инициализировать, защищать и получать доступ к контексту MSAL React в компонентах класса.

Важно отметить, что вы не сможете использовать хуки @azure/msal-react в компонентах классов. Если вам нужен доступ к состоянию проверки подлинности в компоненте класса, необходимо использовать @azure/msal-browser непосредственно для получения аналогичных функций.

Необходимые условия

Инициализация

Инициализация с классовыми компонентами в MSAL React выполняется очень похоже на инициализацию с функциональными компонентами. Как и при использовании компонентов функции, вам потребуется MsalProvider компонент на верхнем уровне дерева компонентов, требующий доступа к состоянию проверки подлинности.

В следующем фрагменте кода компонент MsalProvider используется для обёртывания всего приложения, обеспечивая доступность экземпляра MSAL для всех дочерних компонентов. Это позволяет дочерним компонентам использовать MSAL для проверки подлинности пользователей, получения маркеров и вызова защищенных 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>
        );
    }
}

Защита компонентов

В MSAL React можно защищать компоненты и условно отображать их в зависимости от состояния аутентификации пользователя. Это работает аналогично использованию компонентов функций. Ниже приведены основные примеры.

  • AuthenticatedTemplate — Этот компонент будет отображать свои дочерние элементы, только если пользователь авторизован. Если пользователь не прошел проверку подлинности, он не будет отображать ничего.
  • UnauthenticatedTemplate — Этот компонент будет отображать свои дочерние элементы только в том случае, если пользователь не аутентифицирован. Если пользователь прошел проверку подлинности, он не будет отображать ничего.
  • MsalAuthenticationTemplate — Этот компонент пытается аутентифицировать пользователя перед отрисовкой дочерних элементов. Вы можете указать тип взаимодействия (перенаправление или всплывающее окно) в качестве свойства. Если пользователь не аутентифицирован, будет инициирован процесс аутентификации.

В следующем фрагменте кода показано, как использовать AuthenticatedTemplate, UnauthenticatedTemplate и MsalAuthenticationTemplate для защиты компонентов React. Обратите внимание на то, как MSAL Provider оборачивает дочерние компоненты.

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 в компоненте класса

Хук useMsal нельзя использовать для доступа к контексту MSAL React в компоненте-классе. Это связано с тем, что хуки можно использовать только в функциональных компонентах, в которых можно использовать возможности без экземпляра. Так как компоненты класса имеют экземпляры, у вас есть 2 других варианта. Вы можете либо использовать исходный контекст напрямую, либо использовать компонент высшего порядка withMsal, чтобы передать контекст в свойства вашего компонента.

Доступ к необработанному контексту

В следующем фрагменте кода показано, как использовать MsalContext для доступа к исходному контексту в компоненте класса.

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

В качестве рабочего примера см. файл ProfileRawContext.jsx в нашем react-router-sample.

Доступ через withMsal HOC

В качестве альтернативы можно использовать компонент высокого порядка withMsal, чтобы передать контекст в свойства вашего компонента. В следующем фрагменте кода показано, как использовать HOC-компонент withMsal для доступа к контексту MSAL React в классовом компоненте.

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

В качестве рабочего примера см. ProfileWithMsal.jsx в react-router-sample.

Вход в систему с помощью компонента класса

Независимо от того, какой подход требуется для получения MSAL React контекста, использование будет одинаковым. Получив объект контекста, вы можете вызвать любой из API в PublicClientApplication, просмотреть учетные записи, в которые выполнен вход, или определить, выполняется ли аутентификация в данный момент.

В следующих примерах показано, как выполнить вход с использованием подхода withMsal HOC, но при необходимости их можно быстро адаптировать для другого подхода.

Note

Важно помнить, что MsalProvider компонент должен отображаться на любом уровне выше любого компонента, использующего контекст. В следующих примерах предполагается, что поставщик уже есть, и это не будет показано.

Вход в систему в результате нажатия кнопки

Следующий фрагмент кода определяет компонент-класс React LoginButton, который использует компонент высшего порядка withMsal. Он отображает кнопку, которая активирует всплывающее окно входа, если пользователь не прошел проверку подлинности, или удаляет пользователя при проверке подлинности.

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

Вход в систему при загрузке страницы

Следующий фрагмент кода определяет классовый компонент React ProtectedComponent, который использует компонент высшего порядка withMsal. Он пытается пройти проверку подлинности пользователя при подключении и обновлении, а также показывает, выполняется ли проверка подлинности пользователя или выполняется ли проверка подлинности на странице загрузки.

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

См. также

  • Last updated on