Menggunakan MSAL React dengan komponen kelas

MSAL React mendukung komponen fungsi dan komponen kelas. Artikel ini menyediakan panduan tentang menggunakan MSAL React dengan komponen kelas, memungkinkan Anda menginisialisasi, melindungi, dan mengakses konteks MSAL React di komponen kelas Anda.

Penting untuk dicatat bahwa Anda tidak akan dapat menggunakan hook @azure/msal-react di dalam komponen class Anda. Jika Anda memerlukan akses ke status autentikasi di dalam komponen kelas, Anda harus menggunakan @azure/msal-browser secara langsung untuk mendapatkan fungsionalitas serupa.

Prasyarat

Inisialisasi

Inisialisasi menggunakan komponen kelas dengan MSAL React sangat mirip dengan komponen fungsi. Mirip dengan saat menggunakan komponen fungsi, Anda memerlukan MsalProvider komponen di tingkat atas pohon komponen yang memerlukan akses ke status autentikasi.

Dalam cuplikan berikut, MsalProvider komponen digunakan untuk membungkus seluruh aplikasi, membuat instans MSAL tersedia untuk semua komponen anak. Ini memungkinkan komponen anak menggunakan MSAL untuk autentikasi pengguna, memperoleh token, dan memanggil API yang dilindungi.

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

Melindungi Komponen

Di MSAL React, Anda dapat melindungi komponen anda dan merender secara kondisional kemudian berdasarkan status autentikasi pengguna. Cara kerjanya mirip dengan menggunakan komponen fungsi. Contoh utamanya adalah:

• AuthenticatedTemplate - Komponen ini hanya akan menampilkan elemen turunannya jika pengguna terautentikasi. Jika pengguna tidak terautentikasi, tidak ada yang akan dirender.
• UnauthenticatedTemplate - Komponen ini hanya akan menampilkan komponen turunannya jika pengguna belum terautentikasi. Jika pengguna diautentikasi, pengguna tidak akan merender apa pun.
• MsalAuthenticationTemplate - Komponen ini mencoba mengautentikasi pengguna sebelum menampilkan elemen turunannya. Anda dapat menentukan jenis interaksi (pengalihan atau pop-up) sebagai prop. Jika pengguna belum diautentikasi, proses autentikasi akan dimulai.

Cuplikan berikut menunjukkan cara menggunakan AuthenticatedTemplate, UnauthenticatedTemplate, dan MsalAuthenticationTemplate untuk melindungi komponen React Anda. Perhatikan bagaimana MSAL Provider membungkus komponen anak.

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

Mengakses konteks MSAL React dalam komponen kelas

Kait useMsal tidak dapat digunakan untuk mengakses konteks MSAL React dalam komponen kelas. Ini karena hook hanya dapat digunakan dalam komponen fungsi, karena di sana Anda dapat menggunakan fitur tanpa memerlukan instance. Karena komponen kelas memiliki instans, Anda memiliki 2 opsi lainnya. Anda dapat langsung menggunakan konteks mentah, atau menggunakan komponen tingkat tinggi withMsal untuk menyisipkan konteks ke dalam props komponen Anda.

Mengakses konteks mentah

Cuplikan berikut menunjukkan cara menggunakan MsalContext untuk mengakses konteks mentah dalam komponen kelas.

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

Untuk contoh kerja, lihat ProfileRawContext.jsx di react-router-sample kami.

Mengakses melalui withMsal HOC

Alternatifnya, gunakan komponen tingkat tinggi withMsal untuk meneruskan konteks ke prop komponen Anda. Cuplikan berikut menunjukkan cara menggunakan withMsal HOC untuk mengakses konteks MSAL React dalam komponen kelas.

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

Untuk contoh kerja, lihat ProfileWithMsal.jsx dalam react-router-sample.

Masuk menggunakan komponen kelas

Terlepas dari pendekatan mana yang Anda ambil untuk mendapatkan MSAL React konteks, penggunaannya akan sama. Setelah Anda memiliki objek konteks, Anda dapat memanggil salah satu API pada PublicClientApplication, memeriksa akun yang masuk, atau menentukan apakah autentikasi saat ini sedang berlangsung.

Contoh berikut akan menunjukkan cara masuk menggunakan withMsal pendekatan HOC tetapi Anda dapat dengan cepat beradaptasi dengan pendekatan lain jika diperlukan.

Masuk sebagai akibat dari mengklik tombol

Cuplikan berikut mendefinisikan komponen LoginButton kelas React yang menggunakan withMsal komponen berurutan lebih tinggi. Ini menampilkan tombol yang akan memicu jendela pop-up login jika pengguna belum diautentikasi, atau mengeluarkan pengguna dari sesi jika pengguna sudah diautentikasi.

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

Login saat halaman dimuat

Cuplikan berikut mendefinisikan komponen ProtectedComponent kelas React yang menggunakan withMsal komponen berurutan lebih tinggi. Ini mencoba mengautentikasi pengguna saat memasang dan memperbarui, dan menampilkan apakah pengguna diautentikasi atau jika autentikasi sedang berlangsung di halaman pemuatan.

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

Baca juga

• Lihat react-router-sample kami.