Freigeben über

Lernprogramm: Erstellen einer einzelseitigen React-Anwendung und Vorbereiten der Anwendung für die Authentifizierung

Gilt für:Grüner Kreis mit weißem Häkchen. Mitarbeitermandanten Grüner Kreis mit weißem Häkchen. Externe Mandanten (weitere Informationen)

In diesem Lernprogramm erstellen Sie eine Einzelseitenanwendung (React Single Page Application, SPA) und bereiten sie mit der Microsoft Identity Platform auf die Authentifizierung vor. Dieses Lernprogramm zeigt, wie Sie mithilfe von npm eine React SPA erstellen, die notwendigen Dateien für Authentifizierung und Autorisierung anlegen und Ihre Mandantendetails dem Quellcode hinzufügen. Die Anwendung kann für Mitarbeitende in einem Mitarbeitermandanten oder für Kunden mit einem externen Mandanten verwendet werden.

In diesem Tutorial werden Sie:

  • Erstellen eines neuen React-Projekts
  • Installieren von Paketen, die für die Authentifizierung erforderlich sind
  • Erstellen Der Dateistruktur und Hinzufügen von Code zur Serverdatei
  • Fügen Sie Ihre Mandantendetails zur Authentifizierungskonfigurationsdatei hinzu

Voraussetzungen

  • Ein Mandant für Mitarbeitende. Sie können Ihr Standardverzeichnis verwenden oder einen neuen Mandanten einrichten.
  • Registrieren Sie eine neue App im Microsoft Entra Admin Center, die nur für Konten in diesem Organisationsverzeichnis konfiguriert ist. Weitere Informationen finden Sie unter Registrieren einer Anwendung . Notieren Sie die folgenden Werte auf der Anwendungsübersichtsseite für die spätere Verwendung:
    • Anwendungs-ID (Client)
    • Verzeichnis-ID (Mandant)
  • Fügen Sie die folgenden Umleitungs-URIs mithilfe der Konfiguration der Plattform für die Einzelseitenanwendung hinzu. Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
    • Umleitungs-URI: http://localhost:3000/.

Erstellen eines neuen React-Projekts

  1. Ö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.

  2. Öffnen Sie ein neues Terminal, indem Sie Terminal>Neues Terminal auswählen.

  3. 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. Ein Webbrowser wird standardmäßig 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

  4. Erstellen Sie weitere Ordner und Dateien, um die folgende Ordnerstruktur zu erzielen.

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

Installieren Sie Identitäts- und Bootstrap-Pakete

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

  1. Wählen Sie in der Terminalleiste das +-Symbol aus, um ein neues Terminal zu erstellen. Ein separates Terminalfenster wird geöffnet, wobei das vorherige Knotenterminal weiterhin im Hintergrund ausgeführt wird.

  2. Stellen Sie sicher, dass das richtige Verzeichnis ausgewählt ist (reactspalocal), und geben Sie dann Folgendes in das Terminal ein, um die relevanten msal und bootstrap Pakete zu installieren.

    npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap

Fügen Sie Ihre Mandantendetails zur MSAL-Konfiguration hinzu

Die authConfig.js Datei enthält die Konfigurationseinstellungen für den Authentifizierungsfluss und wird verwendet, um MSAL.js mit den erforderlichen Einstellungen für die Authentifizierung zu konfigurieren.

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

    
 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://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Replace the placeholder with your tenant info
         redirectUri: 'http://localhost:3000/redirect', // Points to window.location.origin. You must register this URI on Microsoft Entra admin center/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/en-us/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"
 // };

  2. Ersetzen Sie die folgenden Werte durch die Werte aus dem Microsoft Entra Admin Center.

    • clientId – Der Bezeichner der Anwendung, auch als Client bezeichnet. Ersetzen Sie Enter_the_Application_Id_Here durch den Wert Anwendungs-ID (Client), der zuvor auf der Übersichtsseite der registrierten Anwendung aufgezeichnet wurde.
    • authority – Diese besteht aus zwei Teilen:
      • Die Instanz ist der Endpunkt des Cloudanbieters. Überprüfen Sie die verschiedenen verfügbaren Endpunkte unter Nationale Clouds.
      • Die Mandanten-ID ist der Bezeichner des Mandanten, in dem die Anwendung registriert ist. Ersetzen Sie Enter_the_Tenant_Info_Here durch den Wert der Verzeichnis-ID (Mandanten-ID), die zuvor auf der Übersichtsseite der registrierten Anwendung aufgezeichnet wurde.

  3. Speichern Sie die Datei.

Hinzufügen des Authentifizierungsanbieters

Die msal Pakete werden verwendet, um die Authentifizierung in der Anwendung bereitzustellen. Das msal-browser Paket wird verwendet, um den Authentifizierungsfluss zu verarbeiten, und das msal-react Paket wird zur Integration msal-browser in React verwendet. addEventCallback wird verwendet, um Ereignisse zu überwachen, die während des Authentifizierungsprozesses auftreten, z. B. wenn sich ein Benutzer erfolgreich anmeldet. Die setActiveAccount Methode wird verwendet, um das aktive Konto für die Anwendung festzulegen, das verwendet wird, um zu bestimmen, welche Benutzerinformationen angezeigt werden sollen.

  1. Ö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 { createRoot } 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 = createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

  2. Speichern Sie die Datei.

Weitere Informationen zu diesen Paketen finden Sie in der Dokumentation in msal-browser und msal-react.

Hinzufügen der Hauptanwendungskomponente

Alle Teile der App, die eine Authentifizierung erfordern, müssen in die MsalProvider-Komponente eingeschlossen werden. Sie legen eine instance Variable fest, die den useMsal Hook aufruft, um die PublicClientApplication Instanz abzurufen, und übergeben sie dann an MsalProvider. Die MsalProvider Komponente stellt die Instanz über die PublicClientApplication Kontext-API von React in Ihrer App zur Verfügung. Alle darunter liegenden MsalProvider Komponenten haben Zugriff auf die PublicClientApplication Instanz über den Kontext sowie alle Hooks und Komponenten, die von msal-reactihnen bereitgestellt werden.

  1. Öffnen Sie im Ordner "src" App.jsx, und ersetzen Sie den Inhalt der Datei durch den folgenden Codeausschnitt:

    import { MsalProvider, AuthenticatedTemplate, useMsal, UnauthenticatedTemplate } from '@azure/msal-react';
import { Container, Button } from 'react-bootstrap';
import { PageLayout } from './components/PageLayout';
import { IdTokenData } from './components/DataDisplay';
import { loginRequest } from './authConfig';

import './styles/App.css';

/**
* Most applications will need to conditionally render certain components based on whether a user is signed in or not. 
* msal-react provides 2 easy ways to do this. AuthenticatedTemplate and UnauthenticatedTemplate components will 
* only render their children if a user is authenticated or unauthenticated, respectively. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const MainContent = () => {
    /**
    * useMsal is hook that returns the PublicClientApplication instance,
    * that tells you what msal is currently doing. For more, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
    */
    const { instance } = useMsal();
    const activeAccount = instance.getActiveAccount();

    const handleRedirect = () => {
        instance
            .loginRedirect({
                ...loginRequest,
                prompt: 'create',
            })
            .catch((error) => console.log(error));
    };
    return (
        <div className="App">
            <AuthenticatedTemplate>
                {activeAccount ? (
                    <Container>
                        <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />
                    </Container>
                ) : null}
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <Button className="signInButton" onClick={handleRedirect} variant="primary">
                    Sign up
                </Button>
            </UnauthenticatedTemplate>
        </div>
    );
};


/**
* msal-react is built on the React context API and all parts of your app that require authentication must be 
* wrapped in the MsalProvider component. You will first need to initialize an instance of PublicClientApplication 
* then pass this to MsalProvider as a prop. All components underneath MsalProvider will have access to the 
* PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const App = ({ instance }) => {
    return (
        <MsalProvider instance={instance}>
            <PageLayout>
                <MainContent />
            </PageLayout>
        </MsalProvider>
    );
};

export default App;

  2. Speichern Sie die Datei.

Nächste Schritte

Lernprogramm: Erstellen von Komponenten zum Anmelden und Abmelden in einer React-Einzelseiten-App