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

Artikel
06/27/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 med adressen http://localhost:3000/ som standard. 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 Portal:
- 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.

Använda anpassad URL-domän (valfritt)

Använd en anpassad domän för att helt märka autentiserings-URL:en. Från ett användarperspektiv finns användarna kvar på din domän under autentiseringsprocessen, i stället för att omdirigeras till ciamlogin.com domännamn.

Använd följande steg för att använda en anpassad domän:

Använd stegen i Aktivera anpassade URL-domäner för appar i externa klienter för att aktivera anpassad URL-domän för din externa klientorganisation.
Leta upp objektet i auth authConfig.js-filen och sedan:
1. Uppdatera värdet för authority egenskapen till https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Ersätt Enter_the_Custom_Domain_Here med din anpassade URL-domän och Enter_the_Tenant_ID_Here med ditt klient-ID. Om du inte har ditt klientorganisations-ID lär du dig att läsa klientinformationen.
2. Lägg till knownAuthorities egenskap med ett värde [Enter_the_Custom_Domain_Here].

När du har gjort ändringarna i din authConfig.js-fil , om din anpassade URL-domän är login.contoso.com och klientorganisations-ID:t är aaaabbbb-0000-cccc-1111-dddd222eeee, bör filen se ut ungefär så här:

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

Ä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