Share via

Tutorial: Erstellen einer React-SPA und Vorbereiten der Anwendung für die Authentifizierung

  • Artikel

Nach Abschluss der Registrierung kann ein React-Projekt mithilfe einer integrierten Entwicklungsumgebung (Integrated Development Environment, IDE) erstellt werden. In diesem Tutorial wird gezeigt, wie Sie eine React-Single-Page-Anwendung mithilfe von npm und Dateien, die für die Authentifizierung und Autorisierung erforderlich sind, erstellen.

Dieses Tutorial umfasst folgende Punkte:

  • Erstellen eines neuen React-Projekts
  • Konfigurieren der Einstellungen für die Anwendung
  • Installieren von Identitäts- und Bootstrappaketen
  • Hinzufügen von Authentifizierungscode zur Anwendung

Voraussetzungen

  • Abschluss der Voraussetzungen und Schritte im Tutorial: Registrieren einer Anwendung
  • Obwohl jede IDE, die React-Anwendungen unterstützt, verwendet werden kann, werden die folgenden Visual Studio-IDEs für dieses Tutorial verwendet. Sie können sie auf der Seite Downloads herunterladen. Für macOS-Benutzer wird empfohlen, Visual Studio Code zu verwenden.
    • Visual Studio 2022
    • Visual Studio Code
  • Node.js.

Erstellen eines neuen React-Projekts

Verwenden Sie die folgenden Registerkarten, um ein React-Projekt innerhalb der IDE zu erstellen.

  1. Öffnen Sie Visual Studio, und wählen Sie Neues Projekt erstellen aus.

  2. Suchen Sie nach der Vorlage Eigenständiges JavaScript-React-Projekt, wählen Sie sie aus, und wählen Sie dann Weiter aus.

  3. Geben Sie einen Namen für das Projekt ein, z. B. reactspalocal.

  4. Wählen Sie einen Speicherort für das Projekt aus, oder übernehmen Sie die Standardoption, und wählen Sie dann Weiter aus.

  5. Wählen Sie unter Zusätzliche Informationen die Option Erstellen aus.

  6. Wählen Sie auf der Symbolleiste Starten ohne Debuggen aus, um die Anwendung zu starten. 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.

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

    ├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── index.js

Installieren von Identitäts- und Bootstrappaketen

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

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Option npm, und wählen Sie Neue npm-Pakete installieren aus.
  2. Suchen Sie nach @azure/MSAL-Browser und wählen Sie dann Paket installieren aus. Wiederholen Sie den Vorgang für @azure/MSAL-react.
  3. Suchen Sie nach react-bootstrap, und installieren Sie es.
  4. Klicken Sie auf Schließen.

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

Erstellen der Authentifizierungskonfigurationsdatei

  1. Ö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",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        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: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};

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

    • clientId – Der Bezeichner der Anwendung, auch Client genannt. 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 .

Ä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.

  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 ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './authConfig';

// Bootstrap components
import 'bootstrap/dist/css/bootstrap.min.css';

const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));

/**
 * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
 */
 root.render(
  <React.StrictMode>
      <MsalProvider instance={msalInstance}>
          <App />
      </MsalProvider>
  </React.StrictMode>
);

  2. Speichern Sie die Datei .

Nächste Schritte

Tutorial: Erstellen von Komponenten zum An- und Abmelden in einer React-Single-Page-App