Kait di MSAL React

Kait dalam MSAL React adalah fungsi yang memungkinkan Anda menggunakan fitur MSAL dan metode status dan siklus hidup React di dalam komponen fungsi. Kait utama adalah useAccount, , useIsAuthenticateduseMsal, dan useMsalAuthentication. Artikel ini akan memandu Anda melalui cara menggunakan masing-masing kait ini.

`useAccount` Hook

Hook useAccount menerima parameter accountIdentifier dan mengembalikan objek AccountInfo untuk akun tersebut jika akun tersebut sedang masuk, atau null jika tidak. Jika tidak ada pengidentifikasi akun yang diberikan, akun aktif saat ini akan dikembalikan. Anda dapat membaca lebih lanjut tentang objek AccountInfo yang dikembalikan dalam dokumentasi @azure/msal-browser di API Login di MSAL.

const accountIdentifier = {
    localAccountId: "example-local-account-identifier",
    homeAccountId: "example-home-account-identifier"
    username: "example-username" // We do not recommend relying only on username
}

const accountInfo = useAccount(accountIdentifier);

`useIsAuthenticated` Hook

Hook useIsAuthenticated mengembalikan boolean yang menunjukkan apakah akun masuk atau tidak. Ini secara opsional menerima objek yang accountIdentifier dapat Anda berikan jika Anda perlu mengetahui apakah akun tertentu masuk atau tidak.

Tentukan apakah ada akun yang saat ini masuk

Cuplikan berikut menggunakan hook useIsAuthenticated dari paket @azure/msal-react. Komponen kemudian secara kondisional merender pesan berdasarkan apakah pengguna masuk atau tidak.

import React from 'react';
import { useIsAuthenticated } from "@azure/msal-react";

export function App() {
    const isAuthenticated = useIsAuthenticated();

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            {isAuthenticated && (
                <p>At least one account is signed in!</p>
            )}
            {!isAuthenticated && (
                <p>No users are signed in!</p>
            )}
        </React.Fragment>
    );
}

Menentukan apakah pengguna tertentu masuk

Cuplikan berikut menggunakan hook useIsAuthenticated dari paket @azure/msal-react untuk menentukan apakah pengguna tertentu sedang login.

import React from 'react';
import { useIsAuthenticated } from "@azure/msal-react";

export function App() {
    const accountIdentifiers = {
        localAccountId: "example-local-account-identifier",
        homeAccountId: "example-home-account-identifier",
        username: "example-username"
    }

    const isAuthenticated = useIsAuthenticated(accountIdentifiers);

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            {isAuthenticated && (
                <p>User with specified localAccountId is signed in!</p>
            )}
            {!isAuthenticated && (
                <p>User with specified localAccountId is not signed in!</p>
            )}
        </React.Fragment>
    );
}

`useMsal` Hook

Hook useMsal mengembalikan konteks. Ini dapat digunakan jika Anda memerlukan akses ke PublicClientApplication instans, daftar akun yang saat ini masuk atau jika Anda perlu mengetahui apakah login atau interaksi lain saat ini sedang berlangsung.

Catatan: Nilai accounts yang dikembalikan oleh useMsal hanya akan diperbarui saat akun ditambahkan atau dihapus, dan tidak akan diperbarui saat klaim diperbarui. Jika Anda perlu mengakses klaim yang diperbarui untuk pengguna saat ini, gunakan hook useAccount atau panggil acquireTokenSilent sebagai gantinya.

import { useState, useEffect } from "react";
import { useMsal } from "@azure/msal-react";
import { InteractionStatus } from "@azure/msal-browser";

const { instance, accounts, inProgress } = useMsal();
const [loading, setLoading] = useState(false);
const [apiData, setApiData] = useState(null);

useEffect(() => {
    if (!loading && inProgress === InteractionStatus.None && accounts.length > 0) {
        if (apiData) {
            // Skip data refresh if already set - adjust logic for your specific use case
            return;
        }

        const tokenRequest = {
            account: accounts[0], // This is an example - Select account based on your app's requirements
            scopes: ["User.Read"]
        }

        // Acquire an access token
        instance.acquireTokenSilent(tokenRequest).then((response) => {
            // Call your API with the access token and return the data you need to save in state
            callApi(response.accessToken).then((data) => {
                setApiData(data);
                setLoading(false);
            });
        }).catch(async (e) => {
            // Catch interaction_required errors and call interactive method to resolve
            if (e instanceof InteractionRequiredAuthError) {
                await instance.acquireTokenRedirect(tokenRequest);
            }

            throw e;
        });
    }
}, [inProgress, accounts, instance, loading, apiData]);

if (loading || inProgress === InteractionStatus.Login) {
    // Render loading component
} else if (apiData) {
    // Render content that depends on data from your API
}

`useMsalAuthentication` Hook

Hook useMsalAuthentication akan memulai login jika pengguna belum masuk, jika tidak, pengguna akan mencoba memperoleh token.

Parameter Masukan

Ada beberapa parameter input berbeda yang dapat Anda berikan ke useMsalAuthentication hook:

interactionType - (None, Popup, Redirect, atau Silent) menentukan bagaimana Anda ingin memperoleh token atau login saat interaksi diperlukan (perhatikan opsi Senyap memiliki beberapa pertimbangan tambahan yang dijelaskan di bawah).
objek permintaan - (opsional) menentukan parameter tambahan yang akan digunakan oleh panggilan masuk atau akuisisi token
accountIdentifiers - objek ini digunakan untuk memberi tahu hook pengguna mana yang harus login atau diperolehkan tokennya

Mengembalikan Properti

result - Hasil dari login terakhir yang berhasil atau akuisisi token. Perhatikan bahwa hook ini hanya mencoba masuk atau memperoleh token secara otomatis satu kali. Ini adalah tanggung jawab aplikasi untuk memanggil login fungsi atau acquireToken , ketika diperlukan, untuk memperbarui nilai ini.
error - Jika terjadi kesalahan selama login atau akuisisi token, properti ini akan berisi informasi tentang kesalahan tersebut. Anda dapat menggunakan fungsi login atau acquireToken yang dikembalikan oleh hook ini untuk mencoba lagi. Properti error akan dihapus pada proses masuk atau akuisisi token yang berhasil berikutnya.
login - fungsi yang dapat digunakan untuk mencoba kembali login yang gagal. Properti result dan error akan diperbarui.
acquireToken - fungsi yang dapat digunakan untuk mendapatkan token akses baru sebelum memanggil API yang dilindungi. Properti result dan error akan diperbarui.

Meneruskan tipe interaksi "Silent" akan memanggil ssoSilent, yang mencoba membuka iframe tersembunyi dan menggunakan ulang sesi yang sudah ada dengan Microsoft Entra ID. Ini tidak akan berfungsi di browser yang memblokir cookie pihak ke-3 seperti Safari. Selain itu, objek permintaan diperlukan saat menggunakan jenis "Senyap". Jika Anda sudah memiliki informasi login pengguna, Anda dapat meneruskan salah satu parameter opsional loginHint atau sid untuk login ke akun tertentu. Catatan: ada pertimbangan tambahan - saat menggunakan ssoSilent tanpa memberikan informasi apa pun tentang sesi pengguna.

`ssoSilent` contoh

Jika Anda menggunakan mode senyap, Anda harus menangani kesalahan apa pun dan mencoba login secara interaktif sebagai cadangan.

import React, { useEffect } from 'react';

import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal, useMsalAuthentication } from "@azure/msal-react";
import { InteractionType, InteractionRequiredAuthError } from '@azure/msal-browser';

function App() {
    const request = {
        loginHint: "name@example.com",
        scopes: ["User.Read"]
    }
    const { login, result, error } = useMsalAuthentication(InteractionType.Silent, request);

    useEffect(() => {
        if (error instanceof InteractionRequiredAuthError) {
            login(InteractionType.Popup, request);
        }
    }, [error]);

    const { accounts } = useMsal();

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            <AuthenticatedTemplate>
                <p>Signed in as: {accounts[0]?.username}</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <p>No users are signed in!</p>
            </UnauthenticatedTemplate>
        </React.Fragment>
    );
}

export default App;

Contoh pengguna tertentu

Jika Anda ingin memastikan pengguna tertentu masuk, berikan accountIdentifiers objek.

import React from 'react';
import { useMsalAuthentication } from "@azure/msal-react";
import { InteractionType } from '@azure/msal-browser';

export function App() {
    const accountIdentifiers = {
        username: "example-username"
    }
    const request = {
        loginHint: "example-username",
        scopes: ["User.Read"]
    }
    const { login, result, error } = useMsalAuthentication(InteractionType.Popup, request, accountIdentifiers);

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            <AuthenticatedTemplate username="example-username">
                <p>Example user is signed in!</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate username="example-username">
                <p>Example user is not signed in!</p>
            </UnauthenticatedTemplate>
        </React.Fragment>
    );
}

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-07-02

Kait di MSAL React

useAccount Hook

useIsAuthenticated Hook

Tentukan apakah ada akun yang saat ini masuk

Menentukan apakah pengguna tertentu masuk

useMsal Hook

useMsalAuthentication Hook