Aktivieren der Authentifizierung in Ihrer eigenen React-Anwendung mithilfe von Azure Active Directory B2C

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

In diesem Artikel wird gezeigt, wie Sie Ihrer eigenen Einzelseitenanwendung (Single Page Application, SPA) azure Active Directory B2C (Azure AD B2C) Authentifizierung hinzufügen. Erfahren Sie, wie Sie eine React-Anwendung in die MSAL für React-Authentifizierungsbibliothek integrieren.

Verwenden Sie diesen Artikel mit dem zugehörigen Artikel " Konfigurieren der Authentifizierung" in einer React-Einzelseitenanwendung. Ersetzen Sie die React-Beispiel-App durch Ihre eigene React-App. Nachdem Sie die Schritte in diesem Artikel ausgeführt haben, akzeptiert Ihre Anwendung Anmeldungen über Azure AD B2C.

Voraussetzungen

Überprüfen Sie die Voraussetzungen und Integrationsschritte im Artikel " Konfigurieren der Authentifizierung" in einem Beispielartikel zur einzelseitigen React-Anwendung .

Schritt 1: Erstellen eines React-App-Projekts

Sie können eine vorhandene React-App verwenden oder eine neue React-App erstellen. Führen Sie zum Erstellen eines neuen Projekts die folgenden Befehle in der Befehlsshell aus:

npx create-react-app my-app
cd my-app

Schritt 2: Installieren der Abhängigkeiten

Um die MSAL Browser - und MSAL React-Bibliotheken in Ihrer Anwendung zu installieren, führen Sie den folgenden Befehl in der Befehlsshell aus:

npm i @azure/msal-browser  @azure/msal-react

Installieren Sie die react-router-dom Version 5.*. Das React-router-dom-Paket enthält Bindungen für die Verwendung von React Router in Webanwendungen. Führen Sie den folgenden Befehl in der Befehlsshell aus:

npm i react-router-dom@5.3.3

Installieren Sie den Bootstrap für React (optional für die Benutzeroberfläche):

npm i bootstrap react-bootstrap

Schritt 3: Hinzufügen der Authentifizierungskomponenten

Der Beispielcode besteht aus den folgenden Komponenten. Fügen Sie diese Komponenten aus der React-Beispiel-App zu Ihrer eigenen App hinzu:

  • public/index.html– Der Bündelungsprozess verwendet diese Datei als Vorlage und fügt die React-Komponenten in das <div id="root"> Element ein. Wenn Sie sie direkt im Browser öffnen, wird eine leere Seite angezeigt.

  • src/authConfig.js – Eine Konfigurationsdatei, die Informationen zu Ihrem Azure AD B2C-Identitätsanbieter und dem Web-API-Dienst enthält. Die React-App verwendet diese Informationen, um eine Vertrauensstellung mit Azure AD B2C herzustellen, den Benutzer anzumelden und abzumelden, Token zu erwerben und die Token zu überprüfen.

  • src/index.js – Der JavaScript-Einstiegspunkt zu Ihrer Anwendung. Diese JavaScript-Datei:

    • Stellt die App Stammkomponente als Stammkomponente in das Element der öffentlichen/index.html Seite <div id="root"> bereit.
    • Initiiert die MSAL-Bibliothek PublicClientApplication mit der in der authConfig.js Datei definierten Konfiguration. MsAL React sollte außerhalb der Komponentenstruktur instanziiert werden, um zu verhindern, dass sie bei erneuten Rendern erneut bereitgestellt wird.
    • Nach der Instanziierung der MSAL-Bibliothek übergibt der JavaScript-Code die msalInstance Als Eigenschaften an Ihre Anwendungskomponenten. Beispiel: <App instance={msalInstance} />.

  • src/App.jsx - Definiert die Komponenten "App " und "Pages ":

    • Die App-Komponente ist die Komponente der obersten Ebene Ihrer App. Es umschließt alles zwischen MsalProvider Komponente. Alle Komponenten unter MsalProvider haben Zugriff auf die PublicClientApplication-Instanz über Kontext und alle Hooks und Komponenten, die von MSAL React bereitgestellt werden. Die App-Komponente stellt das pageLayout und dessen untergeordnetes Pages-Element bereit.

    • Die Pages-Komponente registriert und hebt die Registrierung der MSAL-Ereignisrückrufe auf. Die Ereignisse werden verwendet, um MSAL-Fehler zu behandeln. Außerdem wird die Routinglogik der App definiert.

    Von Bedeutung

    Wenn der Dateiname der App-Komponente lautet App.js, ändern Sie sie in App.jsx.

  • src/pages/Hello.jsx – Veranschaulichen, wie eine geschützte Ressource mit OAuth2-Bearertoken aufgerufen wird.

    • Es verwendet den useMsal-Hook , der die PublicClientApplication-Instanz zurückgibt.
    • Mit der PublicClientApplication-Instanz wird ein Zugriffstoken abgerufen, um die REST-API aufzurufen.
    • Ruft die callApiWithToken-Funktion auf, um die Daten aus der REST-API abzurufen und das Ergebnis mithilfe der DataDisplay-Komponente zu rendern.

  • src/components/NavigationBar.jsx – Die obere Navigationsleiste der App, die über die Schaltflächen zum Zurücksetzen der REST-API verfügt, die die Anmelde-, Abmelde-, Bearbeitungs-, Profilbearbeitungs- und Aufrufschaltflächen der REST-API enthält.

    • Es verwendet die AuthenticatedTemplate und die unauthenticatedTemplate, die ihre untergeordneten Elemente nur rendern, wenn ein Benutzer authentifiziert oder nicht authentifiziert ist.
    • Behandeln Sie die Anmeldung und Abmelden mit Umleitungs- und Popupfensterereignissen.

  • src/components/PageLayout.jsx

    • Das allgemeine Layout, das dem Benutzer eine konsistente Benutzeroberfläche bietet, während er von Seite zu Seite navigiert. Das Layout enthält allgemeine Benutzeroberflächenelemente wie die App-Kopfzeile, die Navigationsleistenkomponente , die Fußzeile und die zugehörigen untergeordneten Komponenten.
    • Es verwendet die AuthenticatedTemplate, die ihre untergeordneten Elemente nur rendert, wenn ein Benutzer authentifiziert ist.

  • src/components/DataDisplay.jsx - Rendert die Daten, die vom REST-API-Aufruf zurückgegeben werden.

  • src/styles/App.css und src/styles/index.css – CSS-Formatdateien für die App.

  • src/fetch.js – Ruft HTTP-Anforderungen an die REST-API ab.

Schritt 4: Konfigurieren Ihrer React-App

Nachdem Sie die Authentifizierungskomponenten hinzugefügt haben, konfigurieren Sie Ihre React-App mit Ihren Azure AD B2C-Einstellungen. Azure AD B2C-Identitätsanbietereinstellungen werden in der authConfig.js Datei konfiguriert.

Anleitungen finden Sie unter Konfigurieren Ihrer React-App.

Schritt 5: Ausführen der React-Anwendung

  1. Öffnen Sie in Visual Studio Code ein neues Terminal, und führen Sie die folgenden Befehle aus:

    npm install && npm update
npm start

    Das Konsolenfenster zeigt die Portnummer an, an der die Anwendung gehostet wird:

    Listening on port 3000...

  2. Um eine REST-API aufzurufen, befolgen Sie die Anleitung zum Ausführen der Web-API

  3. Wechseln Sie in Ihrem Browser zum http://localhost:3000 Anzeigen der Anwendung.

Nächste Schritte

  • Last updated on