TANYA JAWAB UMUM MSAL React

Compatibility

Browser apa yang didukung?

Silakan lihat di sini untuk browser yang didukung.

Versi React apa yang didukung?

Versi @azure/msal-react terbaru (v3.x) memerlukan React 18 atau yang lebih baru. React 19 direkomendasikan untuk proyek baru.

Apakah @azure/msal-react mendukung Server Side Rendering (SSR) atau pembuatan situs statis?

Yes! Namun, autentikasi tidak dapat dilakukan sisi server dan Anda harus menghindari memanggil sisi server API MSAL. @azure/msal-react mengabstraksi beberapa logika ini dari Anda tetapi jika Anda membangun logika autentikasi kustom, pastikan semua API dipanggil saat dirender di browser. Anda dapat melihat sampelNext.js kami dan sampel Gatsby misalnya.

Apakah @azure/msal-react mendukung komponen kelas?

Ya, @azure/msal-react mendukung komponen fungsi dan kelas. Namun, hook tidak dapat digunakan dalam komponen kelas, sehingga Anda perlu mengakses konteks MSAL dan menggunakan API yang disediakan oleh @azure/msal-browser untuk menyusun logika yang setara. Informasi selengkapnya tentang menggunakan @azure/msal-react komponen kelas dapat ditemukan di sini.

Dapat @azure/msal-react digunakan dengan Microsoft Graph JavaScript SDK?

Ya, @azure/msal-react dapat digunakan sebagai penyedia autentikasi kustom untuk SDK JavaScript Microsoft Graph. Untuk contoh implementasi, silakan lihat sampel berikut: React SPA yang memanggil Graph API.

Authentication

Bagaimana cara menangani alur pengalihan di aplikasi react?

Jika Anda sebelumnya pernah menggunakan @azure/msal-browser atau msal v1, Anda mungkin terbiasa memanggil handleRedirectCallback atau handleRedirectPromise saat halaman dimuat untuk menangani respons dari pengalihan. Di @azure/msal-react, hal ini dilakukan di balik layar dan Anda tidak perlu memanggil handleRedirectPromisesecara manual. Setelah memanggil loginRedirect atau acquireTokenRedirect Anda akan diarahkan ke halaman masuk Microsoft Entra dan setelah memasukkan kredensial, Anda akan diarahkan kembali ke aplikasi yang sekarang akan menunjukkan bahwa pengguna masuk. Karena ini adalah instans baru yang bersih dari aplikasi Anda, objek respons aktual tidak dapat dikembalikan ke panggilan API asli loginRedirect . Sebaliknya, ada beberapa cara untuk mendapatkan apa yang Anda butuhkan:

Jika Anda hanya memerlukan id atau token akses, sebaiknya panggil acquireTokenSilent API tepat sebelum Anda memerlukan token. Pastikan untuk memeriksa bahwa pengguna masuk dan interaksi tidak sedang berlangsung sebelum Anda mencoba mengambil token. Jika operasi pengalihan sebelumnya berhasil acquireTokenSilent akan mengembalikan token dari cache.

const GetDataFromAPI = () => {
    const { instance, accounts, inProgress } = useMsal();
    const isAuthenticated = useIsAuthenticated();
    const [graphData, setGraphData] = useState(null);

    useEffect(() => {
        if (isAuthenticated && inProgress === InteractionStatus.None) {
            instance.acquireTokenSilent({
                account: accounts[0],
                scopes: ["User.Read"]
            }).then(response => {
                callAPI(response.accessToken);
            })
        }
    }, [inProgress, isAuthenticated, accounts, instance]);
};

Jika Anda memerlukan akses langsung ke objek respons atau kesalahan yang dikembalikan oleh operasi pengalihan, ada 3 cara untuk melakukan ini:

1. Gunakan API peristiwa untuk mendaftarkan panggilan balik yang akan dipanggil dengan respons saat Anda kembali ke aplikasi Anda. Pastikan ini terdaftar di jalur kode yang dijalankan setelah pengalihan karena panggilan balik apa pun yang terdaftar sebelum pengalihan akan hilang.
2. Gunakan hook useMsalAuthentication untuk masuk. Hook ini akan mengembalikan hasil atau kesalahan saat Anda dikembalikan ke aplikasi Anda.
3. Panggil handleRedirectPromise yang akan diselesaikan dengan hasil atau tolak dengan kesalahan jika halaman dimuat sebagai akibat dari pengalihan.

Apa yang dapat saya lakukan di luar @azure/msal-react konteks?

Jawaban singkatnya adalah bahwa semua komponen dalam aplikasi Anda yang memerlukan akses ke API MSAL harus dirender di bawah komponen yang MsalProvider memastikan komponen Anda memiliki akses ke konteks MSAL. Namun, mungkin ada skenario di mana lebih masuk akal untuk memiliki fungsi utilitas di luar pohon komponen Anda untuk menangani memperoleh token akses atau menentukan apakah pengguna masuk atau tidak. Ini baik-baik saja untuk dilakukan selama Anda tidak memanggil API yang dapat mengubah pengguna yang masuk dalam status atau memicu interaksi.

Ini berarti API berikut berada di luar konteks MsalProvider:

• loginPopup
• loginRedirect
• handleRedirectPromise
• ssoSilent
• logout
• acquireTokenPopup
• acquireTokenRedirect

Catatan: Jika Anda memilih untuk menggunakan API lain @azure/msal-browser di luar konteks react, Anda masih harus menggunakan instans yang sama dengan yang PublicClientApplication Anda berikan ke MsalProvider.

Bagaimana cara menerapkan pendaftaran layanan mandiri?

MSAL React mendukung pendaftaran layanan mandiri dalam alur kode autentikasi. Silakan lihat dokumen kami di sini untuk nilai prompt yang didukung dalam permintaan dan hasil yang diharapkan, dan gambaran umum pendaftaran layanan mandiri dan perubahan konfigurasi yang perlu dilakukan pada penyewa Azure Anda. Harap dicatat bahwa pendaftaran layanan mandiri tidak tersedia di lingkungan B2C dan pengujian.

B2C

Bagaimana cara menangani alur kata sandi yang lupa di aplikasi react?

Pengalaman reset kata sandi baru sekarang menjadi bagian dari kebijakan pendaftaran atau masuk. Ketika pengguna memilih tautan Lupa kata sandi Anda?, mereka akan segera dialihkan ke pengalaman Lupa Kata Sandi. Anda tidak memerlukan kebijakan terpisah untuk pengaturan ulang kata sandi lagi.

Rekomendasi kami adalah beralih ke pengalaman reset kata sandi baru karena menyederhanakan status aplikasi dan mengurangi penanganan kesalahan di ujung pengguna. Jika karena alasan tertentu Anda harus menggunakan alur lama untuk lupa kata sandi, Anda harus menangani respons kesalahan AADB2C90118 yang dikembalikan oleh layanan B2C saat pengguna mengklik tautan Lupa kata sandi Anda?, lalu memanggil login lagi menggunakan kebijakan lupa kata sandi Anda.

Jika Anda menggunakan useMsalAuthentication hook untuk masuk, Anda dapat memeriksa kesalahan yang dikembalikan dan memanggil panggilan balik masuk dengan objek permintaan baru.

function Example() {
    const { result, error, login } = useMsalAuthentication(InteractionType.Popup);

    useEffect(() => {
        if (error && error.errorMessage.indexOf("AADB2C90118") > -1) {
            const request = {
                authority: "your-b2c-authority/your-password-reset-policy"
            }
            login(InteractionType.Popup, request)
        }
    }, [error]);
}

Jika Anda menggunakan MsalAuthenticationTemplate atau memanggil salah satu API login secara langsung, Anda harus menggunakan API event untuk mendeteksi error dan menanganinya.

function Example() {
    const { instance } = useMsal();

    useEffect(() => {
        const callbackId = instance.addEventCallback((event) => {
            if (event.eventType === EventType.LOGIN_FAILURE) {
                if (event.error && event.error.errorMessage.indexOf("AADB2C90118") > -1) {
                    if (event.interactionType === InteractionType.Redirect) {
                        instance.loginRedirect(forgotPasswordRequest);
                    } else if (event.interactionType === InteractionType.Popup) {
                        instance.loginPopup(forgotPasswordRequest).catch(e => {
                            return;
                        });
                    }
                }
            }
        });

        return () => {
            if (callbackId) {
                instance.removeEventCallback(callbackId);
            }
        };
    }, []);
}

Errors

Jika Anda memiliki pertanyaan tentang kesalahan tertentu yang Anda terima, silakan lihat dokumen berikut yang merinci beberapa kesalahan umum:

• @azure/msal-browser dokumen kesalahan
• @azure/msal-react dokumen kesalahan

Bagaimana jika pertanyaan saya belum dijawab?

Pertama-tama @azure/msal-browser periksa FAQ untuk melihat apakah pertanyaan Anda dijawab di sana. Karena @azure/msal-react merupakan pembungkus untuk @azure/msal-browser, banyak pertanyaan yang mungkin Anda miliki terjawab di sana.

Jika Anda memiliki pertanyaan tentang peta strategi kami, Anda dapat menemukan gambaran umum tingkat tinggi tentang fitur dan rilis yang direncanakan di sini.

Jika pertanyaan Anda tidak dijawab dalam dokumen ini atau di @azure/msal-browser FAQ, Anda dapat membuka masalah dan kami akan menjawabnya sesegera mungkin.