Schnellstart: Anmelden von Benutzern in einer React-Einzelseiten-App mithilfe der systemeigenen Authentifizierung (Vorschau)

Gilt für: Mitarbeitermieter Externe Mieter (weitere Informationen)

In diesem Schnellstart verwenden Sie eine Single-Page-Webanwendung in React (Single Page Applications, SPA), um zu veranschaulichen, wie Benutzer mithilfe der nativen Authentifizierungs-API authentifiziert werden. Die Beispiel-App veranschaulicht die Benutzeranmeldung, Anmeldung, Abmeldung und Kennwortzurücksetzung mit einer E-Mail und einem Kennwort.

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement. Wenn Sie noch kein Konto haben, Ein Konto kostenlos erstellen.
• Dieses Azure-Konto muss über die Berechtigung zum Verwalten von Anwendungen verfügen. Alle folgenden Microsoft Entra-Rollen enthalten die erforderlichen Berechtigungen:
  • Anwendungsadministrator
  • Anwendungsentwickler
• Ein externer Mieter. Um eine zu erstellen, wählen Sie aus den folgenden Methoden aus:
  • Verwenden Sie die Microsoft Entra External ID-Erweiterung, um einen externen Mandanten direkt in Visual Studio Code einzurichten. (Empfohlen)
  • Erstellen Sie einen neuen externen Mandanten im Microsoft Entra Admin Center.
• Ein Benutzerablauf. Weitere Informationen finden Sie unter Benutzerabläufe zur Selbstregistrierung für Apps in externen Mandanten erstellen. Stellen Sie sicher, dass der Benutzerablauf die folgenden Benutzerattribute enthält:
  • Name
  • Familienname
• 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)
• Hinzufügen Ihrer Anwendung zum Benutzerflow
• Node.js
• Visual Studio Code oder ein anderer Code-Editor.

Aktivieren von öffentlichen Client- und systemeigenen Authentifizierungsflüssen

Um anzugeben, dass es sich bei dieser App um einen öffentlichen Client handelt und systemeigene Authentifizierung verwenden kann, aktivieren Sie öffentliche Clients und systemeigene Authentifizierungsflüsse:

1. Wählen Sie auf der Seite "App-Registrierungen" die App-Registrierung aus, für die Sie öffentliche Client- und systemeigene Authentifizierungsflüsse aktivieren möchten.
2. Wählen Sie unter Verwalten die Option Authentifizierung aus.
3. Aktivieren Sie unter Erweiterte Einstellungen die Option zum Zulassen öffentlicher Clientflows:
   1. Wählen Sie für Folgende Mobilgerät- und Desktopflows aktivieren die Option Ja aus.
   2. Wählen Sie für Native Authentifizierung aktivieren die Option Ja aus.
4. Wählen Sie die Schaltfläche Speichern aus.

Klonen oder Herunterladen von Beispiel-SPA

Um die Beispielanwendung zu erhalten, können Sie sie entweder von GitHub klonen oder als .zip Datei herunterladen.

Um das Beispiel zu klonen, öffnen Sie eine Eingabeaufforderung, und navigieren Sie zu der Stelle, an der Sie das Projekt erstellen möchten, und geben Sie den folgenden Befehl ein:

git clone https://github.com/Azure-Samples/ms-identity-ciam-native-javascript-samples.git

Alternativ Laden Sie das Beispielherunter, und extrahieren Sie es dann in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

Installieren von Projektabhängigkeiten

1. Öffnen Sie ein Terminalfenster, und navigieren Sie zu dem Verzeichnis, das die React-Beispiel-App enthält:

   cd API\React\ReactAuthSimple
   

2. Führen Sie den folgenden Befehl aus, um App-Abhängigkeiten zu installieren:

   npm install
   

Konfigurieren der React-Beispiel-App

1. Öffnen Sie in Ihrem Code-Editor die Datei src\config.ts.

2. Suchen Sie den Platzhalter Enter_the_Application_Id_Here und ersetzen Sie ihn durch die Anwendungs-ID (Client-ID) der App, die Sie zuvor registriert haben.

3. Speichern Sie die Änderungen.

Konfigurieren des CORS-Proxyservers

Die systemeigenen Authentifizierungs-APIs unterstützen cross-Origin Resource Sharing (CORS)- nicht, sodass Sie einen Proxyserver zwischen Ihrer SPA-App und den APIs einrichten müssen.

Dieses Codebeispiel enthält einen CORS-Proxyserver, der Anforderungen an native Authentifizierungs-API-URL-Endpunkte weiterleitet. Der CORS-Proxyserver ist ein Node.js Server, der auf Port 3001 lauscht.

Um den Proxyserver zu konfigurieren, öffnen Sie die proxy.config.js Datei, und suchen Sie dann den Platzhalter:

• tenantSubdomain und ersetzen Sie es durch die Verzeichnis-(Mandanten-)Unterdomäne. Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihre Mandantenunterdomäne nicht haben, erfahren Sie, wie Sie die Details Ihres Mandanten auslesen.
• tenantId, und ersetzen Sie ihn durch die Mandanten-ID (Verzeichnis). Wenn Sie Ihre Mandanten-ID nicht kennen, finden Sie weitere Informationen unter Abrufen der Details des externen Mandanten.

Ausführen und Testen der App

Sie haben nun die Beispiel-App konfiguriert und sie ist bereit, ausgeführt zu werden.

1. Führen Sie im Terminalfenster die folgenden Befehle aus, um den CORS-Proxyserver zu starten:

   cd API\React\ReactAuthSimple
   npm run cors
   

2. Um Ihre React-App zu starten, öffnen Sie ein weiteres Terminalfenster, und führen Sie dann die folgenden Befehle aus:

   cd API\React\ReactAuthSimple
   npm start
   

3. Öffnen Sie einen Webbrowser, und wechseln Sie zu http://localhost:3000/.

4. Um sich für ein Konto zu registrieren, wählen Sie Registrierenaus, und folgen Sie dann den Anweisungen.

5. Nachdem Sie sich angemeldet haben, testen Sie die Anmeldung und die Zurücksetzung des Kennworts, indem Sie Anmelden und Zurücksetzen des Kennworts auswählen.

Verwandte Inhalte

• Einrichten eines Reverse-Proxys für eine Single-Page-Anwendung, die eine native Authentifizierungs-API verwendet, mithilfe der Azure Function App.
• Nutzen Sie Azure Front Door als Reverse-Proxy in der Produktionsumgebung für eine Single-Page-Anwendung, die native Authentifizierungverwendet.
• Erstellen Sie eine React-„Single-Page-App“, die die native Authentifizierungs-API von Grund auf verwendet.