Självstudie: Skapa ett React SPA för autentisering i en extern klientorganisation

Artikel
04/09/2024

Den här självstudien är del 2 i en serie som visar hur du skapar ett React-ensidesprogram (skydda privilegierad åtkomst (SPA)) och förbereder det för autentisering med hjälp av administrationscentret för Microsoft Entra. I del 1 av den här serien registrerade du ett program och konfigurerade användarflöden i din externa klientorganisation. Den här självstudien visar hur du skapar ett React SPA med hjälp av npm och skapar filer som behövs för autentisering och auktorisering.

I den här självstudien;

Skapa ett React-projekt i Visual Studio Code
Installera identitets- och bootstrap-paket
Konfigurera inställningarna för programmet

Förutsättningar

Självstudie: Förbered din externa klientorganisation för att autentisera användare i ett React SPA.
Även om alla integrerade utvecklingsmiljöer (IDE) som stöder React-program kan användas, använder den här självstudien Visual Studio Code.
Node.js.

Skapa ett React-projekt

Öppna Visual Studio Code, välj Arkiv>Öppna mapp.... Navigera till och välj den plats där projektet ska skapas.
Öppna en ny terminal genom att välja Terminal>Ny terminal.
Kör följande kommandon för att skapa ett nytt React-projekt med namnet reactspalocal, ändra till den nya katalogen och starta React-projektet. En webbläsare öppnas som standard med adressen http://localhost:3000/ . Webbläsaren förblir öppen och avsändare för varje sparad ändring.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Skapa ytterligare mappar och filer för att uppnå följande mappstruktur:

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

Installera appberoenden

Identitetsrelaterade npm-paket måste installeras i projektet för att aktivera användarautentisering. För projektformatering används Bootstrap .

I terminalfältet väljer du + ikonen för att skapa en ny terminal. Ett nytt terminalfönster öppnas så att den andra terminalen kan fortsätta köras i bakgrunden.
Om det behövs navigerar du till reactspalocal och anger följande kommandon i terminalen för att installera paketen msal och bootstrap .
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Skapa konfigurationsfilen för autentisering, authConfig.js

I mappen src öppnar du authConfig.js och lägger till följande kodfragment:

/*
 * 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"
// };

Ersätt följande värden med värdena från Azure-portalen:
- Leta upp värdet Enter_the_Application_Id_Here och ersätt det med program-ID (clientId) för appen som du registrerade i administrationscentret för Microsoft Entra.
- I Utfärdare letar du upp Enter_the_Tenant_Subdomain_Here och ersätter den med underdomänen för din klientorganisation. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn kan du läsa klientinformationen.
Spara filen.

Ändra index.js för att inkludera autentiseringsprovidern

Alla delar av appen som kräver autentisering måste omslutas i komponenten MsalProvider . Du instansierar en PublicClientApplication och skickar den sedan till MsalProvider.

I mappen src öppnar du index.js och ersätter innehållet i filen med följande kodfragment för att använda paketen msal och bootstrap-formateringen:

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

Gå vidare

Del 3: Hantera autentiseringsflöden i ett React SPA

Dela via