Tutorial: Membuat React SPA untuk autentikasi di penyewa eksternal

Artikel
06/27/2024

Tutorial ini adalah bagian 2 dari seri yang menunjukkan pembuatan aplikasi satu halaman React (mengamankan akses istimewa (SPA)) dan menyiapkannya untuk autentikasi menggunakan pusat admin Microsoft Entra. Di Bagian 1 dari seri ini, Anda mendaftarkan aplikasi dan mengonfigurasi alur pengguna di penyewa eksternal Anda. Tutorial ini menunjukkan cara membuat React SPA menggunakan npm dan membuat file yang diperlukan untuk autentikasi dan otorisasi.

Dalam tutorial ini;

Membuat proyek React di Visual Studio Code
Menginstal paket identitas dan bootstrap
Mengonfigurasi pengaturan untuk aplikasi

Prasyarat

Tutorial: Siapkan penyewa eksternal Anda untuk mengautentikasi pengguna di React SPA.
Meskipun setiap lingkungan pengembangan terintegrasi (IDE) yang mendukung aplikasi React dapat digunakan, tutorial ini menggunakan Visual Studio Code.
Node.js.

Membuat proyek React

Buka Visual Studio Code, pilih Buka File>Folder.... Navigasi ke dan pilih lokasi untuk membuat proyek Anda.
Buka terminal baru dengan memilih Terminal> Terminal Baru.
Jalankan perintah berikut untuk membuat proyek React baru dengan nama reactspalocal, ubah ke direktori baru dan mulai proyek React. Browser web terbuka dengan alamat http://localhost:3000/ secara default. Browser tetap terbuka dan dirender untuk setiap perubahan yang disimpan.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Buat folder dan file tambahan untuk mencapai struktur folder berikut:

reactspalocal
├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── DataDisplay.jsx
    │   └─── NavigationBar.jsx
    │   └─── PageLayout.jsx
    └───styles
    │   └─── App.css
    │   └─── index.css
    └─── utils
    │    └─── claimUtils.js
    └── App.jsx
    └── authConfig.js
    └── index.js

Instal dependensi aplikasi

Paket npm terkait identitas harus diinstal dalam proyek untuk mengaktifkan autentikasi pengguna. Untuk gaya proyek, Bootstrap digunakan.

Di bilah Terminal , pilih + ikon untuk membuat terminal baru. Jendela terminal baru terbuka memungkinkan terminal lain untuk terus berjalan di latar belakang.
Jika perlu, navigasikan untuk bereaksipalocal dan masukkan perintah berikut ke terminal untuk menginstal msal paket dan bootstrap .
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Membuat file konfigurasi autentikasi, authConfig.js

Di folder src, buka authConfig.js dan tambahkan cuplikan kode berikut:

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from '@azure/msal-browser';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

export const msalConfig = {
    auth: {
        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain 
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
        navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }
            },
        },
    },
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit:
 * https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: [],
};

/**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "login_hint" property.
 */
// export const silentRequest = {
//     scopes: ["openid", "profile"],
//     loginHint: "example@domain.net"
// };

Ganti nilai berikut dengan nilai dari portal Azure:
- Enter_the_Application_Id_Here Temukan nilai dan ganti dengan ID Aplikasi (clientId) aplikasi yang Anda daftarkan di pusat admin Microsoft Entra.
- Di Otoritas, temukan Enter_the_Tenant_Subdomain_Here dan ganti dengan subdomain penyewa Anda. Misalnya, jika domain utama penyewa Anda adalah contoso.onmicrosoft.com, gunakan contoso. Jika Anda tidak memiliki nama penyewa, pelajari cara membaca detail penyewa Anda.
Simpan file.

Menggunakan domain URL kustom (Opsional)

Gunakan domain kustom untuk sepenuhnya memberi merek URL autentikasi. Dari perspektif pengguna, pengguna tetap berada di domain Anda selama proses autentikasi, daripada dialihkan ke nama domain ciamlogin.com .

Gunakan langkah-langkah berikut untuk menggunakan domain kustom:

Gunakan langkah-langkah dalam Mengaktifkan domain URL kustom untuk aplikasi di penyewa eksternal untuk mengaktifkan domain URL kustom untuk penyewa eksternal Anda.
Dalam file authConfig.js Anda, temukan lalu auth objek, lalu:
1. Perbarui nilai properti ke authority https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Ganti Enter_the_Custom_Domain_Here dengan domain URL kustom Anda dan Enter_the_Tenant_ID_Here dengan ID penyewa Anda. Jika Anda tidak memiliki ID penyewa, pelajari cara membaca detail penyewa Anda.
2. Tambahkan knownAuthorities properti dengan nilai [Enter_the_Custom_Domain_Here].

Setelah Anda membuat perubahan pada file authConfig.js Anda, jika domain URL kustom Anda login.contoso.com, dan ID penyewa Anda adalah aaaabbbb-0000-cc-1111-dddd2222eeee, maka file Anda akan terlihat mirip dengan cuplikan berikut:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

Ubah index.js untuk menyertakan penyedia autentikasi

Semua bagian aplikasi yang memerlukan autentikasi harus dibungkus dalam MsalProvider komponen. Anda membuat instans PublicClientApplication lalu meneruskannya ke MsalProvider.

Di folder src, buka index.js dan ganti konten file dengan cuplikan kode berikut untuk menggunakan msal paket dan gaya bootstrap:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { PublicClientApplication, EventType } from '@azure/msal-browser';
import { msalConfig } from './authConfig';

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/index.css';

/**
 * MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
 * For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
 */
const msalInstance = new PublicClientApplication(msalConfig);

// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
    // Account selection logic is app dependent. Adjust as needed for different use cases.
    msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);
}

// Listen for sign-in event and set active account
msalInstance.addEventCallback((event) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
        const account = event.payload.account;
        msalInstance.setActiveAccount(account);
    }
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

Langkah selanjutnya

Bagian 3: Menangani alur autentikasi di React SPA

Bagikan melalui