Tutorial: Erstellen einer React-SPA für die Authentifizierung in einem externen Mandanten

Artikel
07/01/2024

Dieses Tutorial ist Teil 2 einer Reihe, in der das Erstellen einer Single-Page-Webanwendung (Single-Page Application, SPA) in React (Schützen des privilegierten Zugriffs) und ihre Vorbereitung für die Authentifizierung mithilfe des Microsoft Entra Admin Centers veranschaulicht wird. In Teil 1 dieser Reihe haben Sie eine Anwendung registriert und Benutzerflows in Ihrem externen Mandanten konfiguriert. In diesem Tutorial wird veranschaulicht, wie Sie mithilfe von npm eine React-SPA erstellen. Zudem wird das Erstellen von Dateien veranschaulicht, die für die Authentifizierung und Autorisierung erforderlich sind.

In diesem Tutorial:

Erstellen eines React-Projekts in Visual Studio Code
Installieren von Identitäts- und Bootstrappaketen
Konfigurieren der Einstellungen für die Anwendung

Voraussetzungen

Tutorial: Vorbereiten Ihres externen Mandanten für die Authentifizierung von Benutzern und Benutzerinnen in einer React-SPA
Sie können jede integrierte Entwicklungsumgebung (IDE) verwenden, die React-Anwendungen unterstützt. In diesem Tutorial wird Visual Studio Code verwendet.
Node.js.

Erstellen eines React-Projekts

Öffnen Sie Visual Studio Code, und wählen Sie Datei>Ordner öffnen... aus. Navigieren Sie zu dem Speicherort, an dem Ihr Projekt erstellt werden soll, und wählen Sie diesen aus.
Öffnen Sie ein neues Terminal, indem Sie Terminal>Neues Terminal auswählen.
Führen Sie die folgenden Befehle aus, um ein neues React-Projekt mit dem Namen reactspalocal zu erstellen, wechseln Sie in das neue Verzeichnis, und starten Sie das React-Projekt. Standardmäßig wird ein Webbrowser mit der Adresse http://localhost:3000/ geöffnet. Der Browser bleibt geöffnet und wird für jede gespeicherte Änderung erneut gerendert.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Erstellen Sie weitere Ordner und Dateien, um die folgende Projektstruktur zu erzielen:

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

Installieren der App-Abhängigkeiten

Identitätsbezogene npm-Pakete müssen im Projekt installiert sein, um die Benutzerauthentifizierung zu aktivieren. Für die Formatierung von Projekten wird Bootstrap verwendet.

Wählen Sie in der Terminalleiste das +-Symbol aus, um ein neues Terminal zu erstellen. Ein neues Terminalfenster wird geöffnet, sodass das andere Terminal im Hintergrund weiter ausgeführt werden kann.
Navigieren Sie bei Bedarf zu reactspalocal und geben Sie die folgenden Befehle in das Terminal ein, um die Pakete msal und bootstrap zu installieren.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Erstellen Sie die Authentifizierungskonfigurationsdatei authConfig.js.

Öffnen Sie im Ordner src die Datei authConfig.js und fügen Sie den folgenden Codeschnipsel hinzu:

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

Ersetzen Sie die folgenden Werte durch die Werte aus dem Azure-Portal:
- Suchen Sie den Wert Enter_the_Application_Id_Here und ersetzen Sie ihn durch die Anwendungs-ID (clientId) der App, die Sie im Microsoft Entra Admin Center registriert haben.
- Suchen Sie in Autorität nach Enter_the_Tenant_Subdomain_Here, und ersetzen Sie den Platzhalter durch die Unterdomäne Ihres Mandanten. Wenn Ihre primäre Mandantendomäne beispielsweise contoso.onmicrosoft.com lautet, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, erfahren Sie hier, wie Sie Ihre Mandantendetails auslesen.
Speichern Sie die Datei .

Verwenden einer benutzerdefinierten URL-Domäne (Optional)

Verwenden Sie eine benutzerdefinierte Domäne, um die Authentifizierungs-URL vollständig für Ihre Marke anzupassen. Aus Sicht der Benutzer entsteht dadurch der Eindruck, dass sie während des Authentifizierungsprozesses in Ihrer Domäne bleiben, anstatt zum Domänennamen ciamlogin.com umgeleitet zu werden.

Führen Sie die folgenden Schritte aus, um eine benutzerdefinierte Domäne zu verwenden:

Führen Sie die Schritte unter Aktivieren von benutzerdefinierten URL-Domänen für Apps in externen Mandanten aus, um eine benutzerdefinierte URL-Domäne für Ihren externen Mandanten zu aktivieren.
Suchen Sie in Ihrer Datei authConfig.js nach dem auth-Objekt, und führen Sie dann die folgenden Schritte aus:
1. Aktualisieren Sie den Wert der authority-Eigenschaft in https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Ersetzen Sie Enter_the_Custom_Domain_Here durch die benutzerdefinierte URL-Domäne und Enter_the_Tenant_ID_Here durch Ihre Mandanten-ID. Wenn Sie Ihre Mandanten-ID nicht kennen, erfahren Sie hier, wie Sie die Mandantendetails abrufen.
2. Fügen Sie die knownAuthorities-Eigenschaft mit dem Wert [Enter_the_Custom_Domain_Here] hinzu.

Nachdem Sie die Änderungen an der Datei authConfig.js vorgenommen haben, sollte die Datei in etwa wie der folgende Codeschnipsel aussehen (wenn Ihre benutzerdefinierte URL-Domäne login.contoso.com lautet und Ihre Mandanten-ID aaaabbbb-0000-cccc-1111-dddd2222eeee ist):

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

Ändern Sie index.js, um den Authentifizierungsanbieter einzuschließen

Alle Teile der App, die eine Authentifizierung erfordern, müssen in die MsalProvider-Komponente eingeschlossen werden. Sie instanziieren eine PublicClientApplication und übergeben sie dann an MsalProvider.

Öffnen Sie im Ordner src die Datei index.js, und ersetzen Sie den Inhalt der Datei durch den folgenden Codeschnipsel, um die msal-Pakete und die Bootstrapformatierung zu verwenden:

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

Nächster Schritt

Teil 3: Verarbeiten von Authentifizierungsflows in einer React-SPA

Freigeben über