MSAL React'i sınıf bileşenleriyle kullanma

MSAL React hem işlev bileşenlerini hem de sınıf bileşenlerini destekler. Bu makale, sınıf bileşenlerinizde MSAL React bağlamını başlatmanızı, korumanızı ve bunlara erişmenizi sağlayan MSAL React'i sınıf bileşenleriyle kullanma konusunda rehberlik sağlar.

Hook'ları @azure/msal-react sınıf bileşenlerinizde kullanamayacağınızı unutmamak önemlidir. Sınıf bileşeninizin içindeki kimlik doğrulama durumuna erişmeniz gerekiyorsa, benzer işlevleri elde etmek için doğrudan kullanmanız @azure/msal-browser gerekir.

Prerequisites

Başlatma İşlemi

MSAL React ile sınıf bileşenleriyle yapılan başlatma, fonksiyon bileşenleriyle çok benzer şekilde çalışır. İşlev bileşenlerini kullanırken olduğu gibi, kimlik doğrulaması durumuna erişim gerektiren bileşen ağacının en üst düzeyinde bir MsalProvider bileşene ihtiyacınız olacaktır.

Aşağıdaki kod parçacığında MsalProvider , bileşen uygulamanın tamamını sarmak için kullanılır ve MSAL örneğini tüm alt bileşenler için kullanılabilir hale getirir. Bu, alt bileşenlerin kullanıcı kimlik doğrulaması, belirteç alma ve korumalı API'leri çağırma için MSAL kullanmasını sağlar.

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

Bileşenleri Koruma

MSAL React'te, bileşenlerinizi koruyabilir ve ardından kullanıcının kimlik doğrulama durumuna göre koşullu olarak işleyebilirsiniz. Bu, işlev bileşenlerini kullanmaya benzer şekilde çalışır. Başlıca örnekler şunlardır:

  • AuthenticatedTemplate - Bu bileşen, yalnızca kullanıcının kimliği doğrulanmışsa alt bileşenlerini görüntüler. Kullanıcının kimliği doğrulanmazsa hiçbir şey işlenmez.
  • UnauthenticatedTemplate - Bu bileşen, yalnızca kullanıcının kimliği doğrulanmamış olması durumunda alt öğelerini görüntüler. Kullanıcının kimliği doğrulanmışsa hiçbir şey işlemez.
  • MsalAuthenticationTemplate - Bu bileşen, alt öğelerini işlemeden önce kullanıcının kimliğini doğrulamayı dener. Etkileşim türünü (yeniden yönlendirme veya popup) bir prop olarak belirtebilirsiniz. Kullanıcının kimliği doğrulanmamışsa, kimlik doğrulama işlemi başlatılır.

Aşağıdaki kod parçacığında React bileşenlerinizi korumak için , AuthenticatedTemplateve UnauthenticatedTemplate 'nin nasıl kullanılacağı MsalAuthenticationTemplategösterilmektedir. MSAL Provider bileşeninin alt bileşenleri nasıl sardığına dikkat edin.

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

Sınıf bileşeninde MSAL React bağlamlarına erişme

useMsal kancası, bir sınıf bileşeninde MSAL React bağlamına erişmek için kullanılamaz. Bunun nedeni, hook’ların yalnızca bir instance olmadan özellikleri kullanabildiğiniz fonksiyon bileşenlerinde kullanılabilmesidir. Sınıf bileşenlerinin örnekleri olduğundan 2 seçeneğiniz daha vardır. Ham bağlamı doğrudan kullanabilir veya bağlamı bileşeninizin destek bileşenlerine eklemek için daha yüksek sıralı bileşeni kullanabilirsiniz withMsal .

Ham bağlama erişim

Aşağıdaki kod parçacığı, bir sınıf bileşeninde ham bağlama erişmek için MsalContext öğesinin nasıl kullanılacağını gösterir.

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

Çalışan bir örnek için react-router-sample örneğimizdeki ProfileRawContext.jsx dosyasına bakın.

WithMsal HOC aracılığıyla erişim

Alternatif olarak, bağlamı bileşeninizin props’larına aktarmak için withMsal higher-order component’ını kullanabilirsiniz. Aşağıdaki kod parçacığı, bir sınıf bileşeninde withMsal MSAL React bağlamını erişmek için HOC'nin nasıl kullanılacağını gösterir.

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

Çalışan bir örnek için react-router-sample içindeki ProfileWithMsal.jsx dosyasına bakın.

Sınıf bileşeni kullanarak oturum açma

MSAL React bağlamını almak için hangi yaklaşımı kullanırsanız kullanın, kullanım şekli aynı olacaktır. Bağlam nesnesine sahip olduktan sonra üzerinde PublicClientApplication çağırabilir, oturum açmış hesapları inceleyebilir veya kimlik doğrulamasının devam ediyor olup olmadığını belirleyebilirsiniz.

Aşağıdaki örneklerde HOC yaklaşımını withMsal kullanarak nasıl oturum açacağınız gösterilir, ancak gerekirse diğer yaklaşıma hızla uyum sağlayabilirsiniz.

Note

Bağlam kullanan herhangi bir bileşenin üstündeki herhangi bir düzeyde bir MsalProvider bileşeninin işlenmesi gerektiğini unutmamak önemlidir. Aşağıdaki örneklerde bir sağlayıcı olduğu varsayılır ve bunu göstermez.

Bir düğmeye tıklamanın sonucu olarak oturum açma

Aşağıdaki kod parçacığı, daha yüksek sıralı bileşeni LoginButton kullanan withMsal bir React sınıf bileşenini tanımlar. Kullanıcının kimliği doğrulanmamışsa oturum açma açılır penceresini tetikleyen veya kimliği doğrulanmışsa kullanıcının oturumunu kapatan bir düğmeyi işler.

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

Sayfa yüklemesinde oturum açma

Aşağıdaki kod parçacığı, daha yüksek sıralı bileşeni ProtectedComponent kullanan withMsal bir React sınıf bileşenini tanımlar. Bağlama ve güncelleştirme sonrasında kullanıcının kimliğini doğrulamayı dener ve yükleme sayfasında kullanıcının kimliğinin doğrulanıp doğrulanmamış olduğunu veya kimlik doğrulamasının devam edip etmediğini görüntüler.

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

Ayrıca bakınız

  • Last updated on